:root {
  color-scheme: light;
  --forest: #244631;
  --deep-forest: #122319;
  --moss: #66773d;
  --fern: #dde8c8;
  --gold: #d6a642;
  --sunlit: #f7e4a2;
  --cream: #fff9ec;
  --clay: #a85f3d;
  --bark: #553421;
  --rose: #f4d8b6;
  --focus: #184fff;
  --shadow: 0 1.5rem 3rem rgba(20, 37, 28, 0.18);
  --radius: 1.5rem;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--deep-forest);
  background:
    radial-gradient(circle at top left, rgba(247, 228, 162, 0.85), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(168, 95, 61, 0.14), transparent 18rem),
    linear-gradient(135deg, var(--fern), var(--cream) 50%, var(--rose));
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    radial-gradient(circle at 12% 18%, rgba(111, 127, 63, 0.2) 0 0.45rem, transparent 0.5rem),
    radial-gradient(circle at 82% 28%, rgba(168, 95, 61, 0.16) 0 0.4rem, transparent 0.45rem),
    radial-gradient(circle at 65% 82%, rgba(35, 63, 47, 0.13) 0 0.5rem, transparent 0.55rem);
  background-size: 12rem 12rem, 15rem 15rem, 18rem 18rem;
}

:focus-visible { outline: 0.25rem solid var(--focus); outline-offset: 0.25rem; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; }
img { max-width: 100%; }
.skip-link { position: absolute; top: 1rem; left: 1rem; z-index: 20; padding: 0.75rem 1rem; color: white; background: var(--deep-forest); border-radius: 999px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.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; }
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem max(1rem, calc((100vw - 72rem) / 2));
  background: rgba(255, 249, 236, 0.94);
  border-bottom: 0.12rem solid rgba(35, 63, 47, 0.18);
  backdrop-filter: blur(0.7rem);
}
.site-brand { color: var(--forest); font-size: 1.35rem; font-weight: 900; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; font-weight: 800; }
.site-nav a, .site-footer a { padding: 0.65rem 0.35rem; text-decoration-thickness: 0.12rem; text-underline-offset: 0.25rem; }

.site-shell { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem) 0; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 4rem); color: white; overflow: hidden; background: linear-gradient(120deg, rgba(20, 37, 28, 0.97), rgba(35, 63, 47, 0.88)), radial-gradient(circle at 85% 15%, rgba(247, 228, 162, 0.45), transparent 16rem); border: 0.35rem solid rgba(255, 249, 236, 0.82); border-radius: calc(var(--radius) + 0.75rem); box-shadow: var(--shadow); }
.hero::after { position: absolute; right: -5rem; bottom: -6rem; width: 18rem; height: 18rem; content: ""; background: radial-gradient(circle, rgba(214, 166, 66, 0.18), transparent 65%); border: 0.15rem solid rgba(247, 228, 162, 0.18); border-radius: 44% 56% 48% 52%; }
.eyebrow, .section-kicker { margin-bottom: 0.75rem; color: var(--gold); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.badge { display: inline-block; margin-bottom: 1rem; padding: 0.45rem 0.8rem; color: var(--deep-forest); background: var(--sunlit); border-radius: 999px; font-size: 0.95rem; font-weight: 900; }
h1 { max-width: 14ch; margin-bottom: 1.25rem; font-size: clamp(2.65rem, 7vw, 5.4rem); line-height: 1; }
h2 { margin-bottom: 0.65rem; color: var(--forest); font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.1; }
h3 { margin-bottom: 0.35rem; color: var(--forest); font-size: 1.55rem; }
.hero__intro { max-width: 44rem; margin-bottom: 1rem; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; }
.hero__note { max-width: 44rem; color: #fff3cf; }
.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--forest); font-weight: 900; text-decoration-thickness: 0.14rem; text-underline-offset: 0.3rem; }
.hero__links { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; }
.hero__link { color: var(--sunlit); }
.hero__image-card { position: relative; z-index: 1; margin: 0; padding: 0.75rem; color: var(--deep-forest); background: var(--cream); border-radius: var(--radius); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
.hero__image-card img { display: block; width: 100%; min-height: 20rem; object-fit: cover; background: linear-gradient(135deg, #37583f, #9dad75 55%, #f1d79a); border-radius: 1rem; }
.hero__image-card img:not([src]), .hero__image-card img[src=""] { min-height: 20rem; }
.hero__image-card figcaption { padding: 0.9rem 0.35rem 0.2rem; font-weight: 800; }

.finder-card, .content-section, .trust-section { margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: clamp(1.25rem, 4vw, 3rem); background: rgba(255, 249, 236, 0.97); border: 0.2rem solid rgba(35, 63, 47, 0.24); border-radius: var(--radius); box-shadow: var(--shadow); }
.finder-card { border-width: 0.3rem; }
.finder-card__header, .trust-section p { max-width: 58rem; }
.photo-form { display: grid; gap: 1.25rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
.area-selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.58fr); gap: clamp(1rem, 3vw, 2rem); align-items: end; padding: clamp(1rem, 3vw, 1.5rem); background: #fffdf6; border: 0.16rem solid rgba(35, 63, 47, 0.2); border-radius: calc(var(--radius) - 0.25rem); }
.area-selector h3 { margin-bottom: 0.4rem; }
.area-selector p { margin-bottom: 0; color: var(--bark); font-weight: 800; }
.field-group { display: grid; gap: 0.45rem; }
.field-group label { color: var(--forest); font-weight: 900; }
.field-group select { width: 100%; min-height: 3.35rem; padding: 0.75rem 2.75rem 0.75rem 1rem; color: var(--deep-forest); background: var(--cream); border: 0.16rem solid var(--moss); border-radius: 0.9rem; box-shadow: inset 0 -0.1rem 0 rgba(85, 52, 33, 0.12); font: inherit; font-weight: 800; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--forest) 50%), linear-gradient(135deg, var(--forest) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.85rem) 50%; background-size: 0.45rem 0.45rem, 0.45rem 0.45rem; background-repeat: no-repeat; }
.field-group select:hover { border-color: var(--clay); }
.upload-area { position: relative; display: grid; min-height: clamp(20rem, 42vw, 30rem); overflow: hidden; text-align: center; background: linear-gradient(rgba(255, 249, 236, 0.92), rgba(255, 249, 236, 0.92)), repeating-linear-gradient(45deg, rgba(97, 115, 59, 0.2) 0 1rem, rgba(247, 228, 162, 0.42) 1rem 2rem); border: 0.35rem dashed var(--moss); border-radius: calc(var(--radius) + 0.5rem); box-shadow: inset 0 0 0 0.35rem rgba(255, 249, 236, 0.85); }
.upload-area:hover, .upload-area:focus-within { border-color: var(--clay); background-color: #fffdf6; }
.upload-area__picker { display: grid; min-height: inherit; padding: clamp(1.75rem, 6vw, 4rem); place-items: center; cursor: pointer; }
.upload-area input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.upload-area__prompt { display: grid; gap: 0.35rem; place-items: center; }
.upload-area__icon svg { width: clamp(4rem, 9vw, 6rem); fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.upload-area__title { display: block; color: var(--forest); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; }
.upload-area__text { display: block; max-width: 34rem; font-size: clamp(1.2rem, 2.25vw, 1.65rem); font-weight: 800; }
.upload-area__preview { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.upload-area__remove { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; min-height: 2.75rem; padding: 0.65rem 0.9rem; color: white; background: rgba(18, 35, 25, 0.9); border: 0.12rem solid rgba(255, 249, 236, 0.9); border-radius: 999px; cursor: pointer; font: inherit; font-weight: 900; }
.upload-area__remove:hover, .upload-area__remove:focus-visible { background: var(--clay); }
.upload-area.has-photo { border-style: solid; box-shadow: inset 0 0 0 0.2rem rgba(255, 249, 236, 0.75); }
.upload-area.is-dragging { border-color: var(--clay); background-color: #fffdf6; }
.upload-area.has-photo .upload-area__picker { padding: 0; }
.upload-area.has-photo .upload-area__prompt { display: none; }
.error-message { margin: 0; padding: 1rem; color: #781f1f; background: #ffe8df; border: 0.15rem solid #c44b2f; border-radius: 0.85rem; font-weight: 800; }
.preview { padding: 0.75rem; background: white; border: 0.2rem solid var(--fern); border-radius: 1rem; }
.preview img { display: block; width: 100%; max-height: 34rem; object-fit: contain; border-radius: 0.75rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.primary-button, .secondary-button, .header-button { min-height: 3rem; padding: 0.85rem 1.2rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 900; }
.primary-button, .header-button { color: white; background: var(--forest); border: 0; box-shadow: 0 0.6rem 1.2rem rgba(20, 37, 28, 0.22); }
.share-button { min-height: 3.35rem; padding: 0.95rem 1.45rem; color: var(--deep-forest); background: var(--gold); border: 0.16rem solid rgba(255, 249, 236, 0.86); box-shadow: 0 0.7rem 1.35rem rgba(20, 37, 28, 0.32), inset 0 -0.12rem 0 rgba(85, 52, 33, 0.22); text-decoration: none; }
.profile-actions { align-items: stretch; }
.profile-actions .primary-button, .profile-actions .secondary-button { min-height: 3.35rem; }
.secondary-button { color: var(--forest); background: var(--sunlit); border: 0.15rem solid rgba(85, 52, 33, 0.24); }
.resident-action-placeholder:disabled { color: var(--forest); background: linear-gradient(135deg, rgba(255, 249, 236, 0.96), rgba(247, 228, 162, 0.88)); border: 0.16rem solid rgba(214, 166, 66, 0.75); cursor: not-allowed; box-shadow: inset 0 -0.12rem 0 rgba(168, 95, 61, 0.18); opacity: 1; }
.resident-action-placeholder:disabled:hover { background: linear-gradient(135deg, rgba(255, 249, 236, 0.96), rgba(247, 228, 162, 0.88)); transform: none; }
.primary-button:hover:not(:disabled), .header-button:hover { background: var(--clay); }
.share-button:hover:not(:disabled) { color: white; background: var(--clay); }
.secondary-button:hover:not(:disabled) { background: #ffeec0; }
button:disabled { color: #f5f0e3; background: #65705f; cursor: not-allowed; box-shadow: none; }
button.is-saving { background: #8a6a23; color: #fff7e8; }
button.is-saved { background: #2f6b46; color: #fff7e8; }
#matching-status { margin: 0; color: var(--deep-forest); font-weight: 800; }

.steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 1.5rem 0 0; list-style: none; counter-reset: steps; }
.steps-list li { position: relative; padding: 4.25rem 1.25rem 1.25rem; background: #fffdf6; border: 0.12rem solid rgba(35, 63, 47, 0.18); border-radius: 1rem; }
.steps-list li::before { position: absolute; top: 1rem; left: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: white; background: var(--clay); border-radius: 50%; counter-increment: steps; content: counter(steps); font-weight: 900; }
.steps-list span { display: block; margin-top: 0.35rem; }
.trust-section { background: linear-gradient(rgba(255, 249, 236, 0.96), rgba(255, 249, 236, 0.96)), radial-gradient(circle at 95% 10%, rgba(247, 228, 162, 0.7), transparent 12rem); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem max(1rem, calc((100vw - 72rem) / 2)); color: white; background: var(--deep-forest); }
.site-footer p { margin: 0; font-size: 1.25rem; font-weight: 900; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 52rem) {
  .site-header { position: static; align-items: stretch; flex-direction: column; }
  .site-nav { justify-content: flex-start; }
  .header-button { width: 100%; }
  .hero, .steps-list, .area-selector { grid-template-columns: 1fr; }
  .hero__image-card img { min-height: 14rem; }
}
@media (max-width: 42rem) {
  html { scroll-behavior: auto; }
  .site-shell { width: min(100% - 1rem, 72rem); padding-top: 0.5rem; }
  .hero, .finder-card, .content-section, .trust-section { border-radius: 1rem; }
  .upload-area { min-height: 18rem; }
  .primary-button, .secondary-button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link, .primary-button, .secondary-button, .header-button, .upload-area { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
  .primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled), .header-button:hover { transform: translateY(-0.1rem); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Resident profile template */
.profile-shell { max-width: 76rem; }
.profile { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.profile-hero { display: grid; grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; padding: clamp(1.25rem, 4vw, 3rem); color: white; background: linear-gradient(120deg, rgba(20, 37, 28, 0.98), rgba(36, 70, 49, 0.9)); border: 0.35rem solid rgba(255, 249, 236, 0.82); border-radius: calc(var(--radius) + 0.75rem); box-shadow: var(--shadow); }
.profile-hero h1 { max-width: none; }
.profile-hero__portrait { margin: 0; padding: 0.75rem; color: var(--deep-forest); background: var(--cream); border-radius: var(--radius); }
.profile-hero__portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; }
.profile-hero__portrait figcaption { padding: 0.75rem 0.25rem 0.1rem; font-weight: 800; }
.header-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.share-status { min-height: 1.75rem; margin: 0.85rem 0 0; color: #fff3cf; font-weight: 800; }
.quick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin: 1.5rem 0 0; }
.quick-facts div { padding: 1rem; background: #fffdf6; border: 0.12rem solid rgba(35, 63, 47, 0.18); border-radius: 1rem; }
.quick-facts dt { color: var(--bark); font-weight: 900; }
.quick-facts dd { margin: 0.25rem 0 0; font-size: 1.18rem; }
.story-section p { max-width: 66rem; }
.love-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.love-card { margin: 0; padding: 1rem; background: #fffdf6; border: 0.12rem solid rgba(35, 63, 47, 0.18); border-radius: 1rem; }
.love-icon { display: inline-grid; width: 3.25rem; height: 3.25rem; margin-bottom: 0.8rem; place-items: center; color: var(--clay); background: var(--sunlit); border-radius: 50%; }
.love-icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.love-icon circle { fill: rgba(168, 95, 61, 0.22); stroke: currentColor; }
.check-list { display: grid; gap: 0.75rem; padding-left: 1.4rem; }
.check-list li { padding-left: 0.25rem; }
.notice { padding: 1rem; background: var(--fern); border-left: 0.4rem solid var(--moss); border-radius: 0.75rem; font-weight: 800; }
.image-fallback { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(102, 119, 61, 0.35), rgba(247, 228, 162, 0.65)), var(--cream); }
.image-fallback::before { position: absolute; inset: 0.75rem; display: none; min-height: 12rem; align-items: center; justify-content: center; padding: 1rem; color: var(--forest); text-align: center; content: attr(data-fallback-label); background: repeating-linear-gradient(45deg, rgba(255, 249, 236, 0.75) 0 1rem, rgba(221, 232, 200, 0.75) 1rem 2rem); border: 0.2rem dashed var(--moss); border-radius: 0.9rem; font-weight: 900; }
.image-fallback:has(img[hidden])::before { display: flex; }

@media (max-width: 58rem) {
  .profile-hero, .quick-facts, .love-grid { grid-template-columns: 1fr; }
}
.loading-message { margin: 0; padding: 1rem; color: var(--deep-forest); background: rgba(255, 249, 236, 0.97); border: 0.2rem solid rgba(35, 63, 47, 0.24); border-radius: var(--radius); font-weight: 900; box-shadow: var(--shadow); }
.resident-message .primary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.profile-area { margin-bottom: 1rem; color: #fff3cf; font-weight: 900; }

/* Resident directory */
.directory-shell { max-width: 76rem; }
.directory-hero { padding: clamp(1.5rem, 4vw, 4rem); color: white; background: linear-gradient(120deg, rgba(20, 37, 28, 0.98), rgba(36, 70, 49, 0.9)), radial-gradient(circle at 92% 12%, rgba(214, 166, 66, 0.24), transparent 15rem); border: 0.35rem solid rgba(255, 249, 236, 0.82); border-radius: calc(var(--radius) + 0.75rem); box-shadow: var(--shadow); }
.directory-hero h1 { max-width: none; }
.directory-hero .hero__intro { margin-bottom: 0; color: #fff3cf; }
.directory-section { display: grid; gap: 1.25rem; }
.resident-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.resident-card { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; color: var(--deep-forest); background: #fffdf6; border: 0.16rem solid rgba(35, 63, 47, 0.2); border-radius: var(--radius); box-shadow: 0 0.8rem 1.6rem rgba(20, 37, 28, 0.12); }
.resident-card__image { margin: 0; padding: 0.65rem; background: var(--cream); border-bottom: 0.12rem solid rgba(35, 63, 47, 0.14); }
.resident-card__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; }
.resident-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: 1rem; }
.resident-card__body h3 { margin-bottom: 0; }
.resident-card__area { margin: 0; color: var(--bark); font-weight: 900; }
.resident-card__link { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; margin-top: auto; padding: 0.85rem 1rem; color: white; text-align: center; text-decoration: none; background: var(--forest); border-radius: 999px; box-shadow: 0 0.6rem 1.2rem rgba(20, 37, 28, 0.22); font-weight: 900; }
.resident-card__link:hover { background: var(--clay); }

@media (max-width: 42rem) {
  .directory-hero { border-radius: 1rem; }
  .resident-grid { grid-template-columns: 1fr; }
  .resident-card__link { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .resident-card__link { transition: background-color 160ms ease, transform 160ms ease; }
  .resident-card__link:hover { transform: translateY(-0.1rem); }
}
.consent-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 1rem; background: #fffdf6; border: 0.16rem solid rgba(35, 63, 47, 0.2); border-radius: 0.9rem; }
.consent-field input { width: 1.35rem; height: 1.35rem; margin-top: 0.25rem; accent-color: var(--forest); }
.consent-field label { color: var(--deep-forest); font-weight: 800; }
.turnstile-panel { display: grid; gap: 0.75rem; padding: 1rem; background: var(--cream); border: 0.16rem solid rgba(35, 63, 47, 0.18); border-radius: 0.9rem; }
.turnstile-panel p { margin: 0; color: var(--bark); font-weight: 800; }

.admin-shell .finder-card { margin-block: 1.5rem; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.admin-tabs button, .admin-list button { border: 2px solid var(--forest-green, #234336); border-radius: 999px; background: var(--cream, #fff7e8); color: var(--forest-green, #234336); padding: 0.75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.admin-tabs button[aria-current="page"], .admin-list .primary-button { background: var(--forest-green, #234336); color: var(--cream, #fff7e8); }
.admin-list { display: grid; gap: 1rem; }
.admin-list .resident-card { padding: 1rem; gap: 0.75rem; }
.admin-list img { max-width: 18rem; width: 100%; border-radius: 1rem; }
.admin-filters, .admin-edit { display: grid; gap: 0.75rem; }
.admin-edit label, .admin-filters label, #area-form label { display: grid; gap: 0.35rem; font-weight: 700; }
.admin-edit input, .admin-edit textarea, .admin-filters input, .admin-filters select, #area-form input, #area-form textarea, #area-form select, .admin-list textarea, .admin-list select { width: 100%; border: 2px solid rgba(35,67,54,.25); border-radius: .75rem; padding: .65rem; font: inherit; background: #fff; }
.admin-edit textarea { min-height: 5rem; }
@media (min-width: 760px) { .admin-filters { grid-template-columns: repeat(3, 1fr); } }

.match-results { display: grid; gap: 1rem; padding: 1rem; background: #fffdf6; border: 0.16rem solid rgba(35, 63, 47, 0.2); border-radius: 1rem; }
.match-result-list { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.65fr); gap: 1rem; align-items: stretch; }
.match-card { display: grid; gap: 0.75rem; align-content: start; padding: 1rem; background: white; border: 0.14rem solid var(--fern); border-radius: 1rem; }
.match-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.75rem; }
.match-card h4 { margin: 0; color: var(--forest); font-size: 1.25rem; }
.match-card__confidence { margin: 0; color: var(--bark); font-weight: 900; }
.match-card__actions { margin-top: 0.35rem; padding-top: 0.85rem; border-top: 0.12rem solid rgba(35, 63, 47, 0.18); }
.match-card__actions a { justify-content: center; text-align: center; }
.match-card:first-child { gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: linear-gradient(135deg, #fffdf6, var(--cream)); border: 0.24rem solid var(--gold); box-shadow: 0 1rem 2rem rgba(20, 37, 28, 0.16); }
.match-card:first-child img { aspect-ratio: 4 / 3; border-radius: 1rem; }
.match-card:first-child h4 { font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15; }
.match-card:first-child .match-card__confidence { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.match-card:not(:first-child) { align-self: center; }
.match-card:not(:first-child) img { aspect-ratio: 1 / 1; }
.submission-match-summary { display: grid; gap: 0.35rem; padding: 1rem; }
.submission-match-summary p { margin: 0; }
@media (max-width: 42rem) { .match-result-list { grid-template-columns: 1fr; } .match-card__actions { align-items: stretch; } .match-card__actions a { width: 100%; } }

.admin-loading {
  display: grid;
  min-height: 5rem;
  place-items: center;
}

.admin-loading[hidden] { display: none; }

.admin-loading__pig {
  display: inline-grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  font-size: 3rem;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .admin-loading__pig { animation: admin-pig-spin 850ms linear infinite; }
}

@keyframes admin-pig-spin {
  to { transform: rotate(360deg); }
}
.admin-status-message {
  margin: 1rem 0 0;
  color: #fff3cf;
  font-weight: 900;
}
.admin-status-message[hidden] { display: none; }


.resident-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-block: 1rem; }
.resident-photo-card { display: grid; gap: .75rem; align-content: start; padding: 1rem; border: 2px solid rgba(35,67,54,.18); border-radius: 1rem; background: #fff; }
.resident-photo-card--stored-reference { background: #e6e6e6; border-color: rgba(35,67,54,.32); }
.resident-photo-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .75rem; border: 1px solid rgba(35,67,54,.18); }
.resident-photo-card__type { margin: 0; font-size: .95rem; }
.resident-photo-card .button-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.resident-photo-card .button-row button { flex: 1 1 9rem; }
.resident-photo-card__button { border-width: 0; box-shadow: 0 0 0 0.12rem rgba(35,67,54,.18) inset; }
.resident-photo-card__button--reference { background: #6f7378; color: #fff; }
.resident-photo-card__button--reference:hover:not(:disabled) { background: #55595e; }
.resident-photo-card__button--preview { background: #0f7a3a; color: #fff; }
.resident-photo-card__button--preview:hover:not(:disabled) { background: #0b5f2d; }
.resident-photo-card__button--assign { background: #ffd84d; color: #2b2100; }
.resident-photo-card__button--assign:hover:not(:disabled) { background: #e8bd00; }
.resident-photo-card__button--delete { background: #b42318; color: #fff; }
.resident-photo-card__button--delete:hover:not(:disabled) { background: #8f1c14; }
@media (max-width: 520px) { .resident-photo-grid { grid-template-columns: 1fr; } }