/* Approved neutral theme: white, gray and graphite, without blue accents. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ink: #1d1d1f;
  --muted: #5c5c63;
  --green: #1d1d1f;
  --green-dark: #333336;
  --paper: #f5f5f7;
  --soft: #f4f4f6;
  --line: #d9d9de;
  color-scheme: light;
  accent-color: #424245;
}

body, button, input, select { font-family: var(--font); }
button, button * { caret-color: transparent; -webkit-user-select: none; user-select: none; }
body { background: var(--paper); color: var(--ink); }
::selection { background: #dedee2; color: var(--ink); }
.header, main, footer { background: #fff; }
h1, h2, h3, .brand, .brand small, td:first-child, footer p,
.close, .detail-location dd, .burial-section h3, .grave-companions h3 {
  font-family: var(--font);
}
.header { position: relative; isolation: isolate; overflow: hidden; background: #f6f6f8; border-bottom-color: var(--line); padding-top: 24px; padding-bottom: 24px; column-gap: 32px; row-gap: 18px; }
.header::after { content: ""; position: absolute; z-index: 0; width: 330px; height: 160px; top: 6px; right: 38px; background: url("assets/header-ornament.svg") center / contain no-repeat; opacity: .50; pointer-events: none; }
.header > * { position: relative; z-index: 1; }
.header-label { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; margin: 0 0 0 auto; font-size: 18px; font-weight: 500; color: var(--ink); }
.header-label svg { width: 22px; height: 22px; flex-shrink: 0; }
.brand, .brand-cross, .header .brand-cross { color: var(--ink); }
.header .brand { gap: 24px; font-weight: 600; letter-spacing: -.6px; line-height: 1.25; }
.header .brand-cross { display: flex; align-items: center; align-self: stretch; padding-right: 24px; border-right: 1px solid #c7c7cf; }
.header .brand-cross svg { display: block; width: 44px; height: 72px; }
.header .brand small { font-size: clamp(20px, 1.8vw, 24px); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.header nav a { color: var(--muted); }
.header nav .active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }
.eyebrow, .brand small, .subtle, .information p, .info-item > span,
.data-notice, footer p, footer > span { color: var(--muted); }
footer p { font-style: normal; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
.advanced-filters summary:focus-visible {
  outline: 2px solid #606066;
  outline-offset: 3px;
}
.search-form { padding: 20px 24px; background: #f1f1f4; border: 1px solid #dedee4; border-radius: 10px; box-shadow: none; }
.field label { color: var(--ink); font-weight: 600; }
.field input, .field select { background: #fff; border-color: #b7b7bd; color: var(--ink); caret-color: var(--ink); }
.field input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus { border-color: #606066; }
.input-icon > span { color: #6e6e73; }
.advanced-filters summary, .clear-filters, .text-link { color: var(--ink); }
.filters-grid { border-top-color: var(--line); }
.filter-status { background: #ededf0; color: var(--ink); }
.primary, .secondary, .search-form .search-submit, td button, .detail-back {
  background: #ededf0;
  color: var(--ink);
  border-color: #e1e1e5;
  box-shadow: none;
}
.primary:hover, .secondary:hover, .search-form .search-submit:hover,
td button:hover, .detail-back:hover { background: #e1e1e6; border-color: #c5c5cb; color: var(--ink); }
.search-form .search-submit { background: #e3e3e8; border-color: #c5c5ce; }
.search-form .search-submit:hover { background: #d9d9e0; border-color: #aaaab4; }
td button { border-color: #a8a8b1; }
td button:hover { border-color: #8e8e98; }
.results-toolbar { color: var(--muted); }
.results-toolbar strong { color: var(--ink); }
.results-panel { border: 0; border-radius: 0; background: #fff; }
th { background: #f1f1f4; color: var(--ink); font-size: 14px; letter-spacing: 0; }
td { color: var(--ink); border-top-color: var(--line); }
td:first-child { color: var(--ink); }
tbody tr:nth-child(even) { background: #f1f1f3; }
.location-tag { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; }
.separate-label { color: var(--muted); }
.results-bottom { background: #fff; color: var(--muted); border-top-color: var(--line); }
.pagination { border-top-color: var(--line); }
.pagination > span { color: var(--muted); }
.empty > span, .empty p { color: var(--muted); }
.information { border-color: var(--line); }

dialog { background: #fff; color: var(--ink); border-color: #d2d2d7; border-radius: 12px; box-shadow: 0 20px 60px #1d1d1f29; }
dialog::backdrop { background: #1d1d1f73; }
.close { background: #fff; color: var(--ink); border-color: #d2d2d7; }
.close:hover { background: #f5f5f7; }
.detail-header { background: #f5f5f7; border-bottom-color: #e0e0e5; }
.detail-cross, .detail-name { color: var(--ink); }
.detail-name { font-weight: 600; letter-spacing: -.5px; }
.detail-dates { position: relative; }
.detail-dates > div { padding: 12px 14px; background: #f8f8fa; border: 1px solid #cfcfd5; border-radius: 8px; text-align: center; }
.detail-dates.has-age > div:not(.age-badge) dd { white-space: nowrap; }
.detail-dates > .age-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; width: 72px; height: 72px; padding: 6px; border: 1px solid #b7b7bd; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff; }
.detail-dates .age-badge dt { font-size: 11px; line-height: 1.2; color: var(--muted); }
.detail-dates .age-badge dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.detail-dates .age-badge-long dd { font-size: 15px; }
.detail-dates dt, .detail-location dt, .source-label, .detail-note { color: var(--muted); }
.detail-dates dd, .detail-location dd { color: var(--ink); }
.detail-location { gap: 12px; }
.detail-location > div { background: #f1f1f3; border: 1px solid #c5c5cb; border-radius: 8px; }
.grave-companions { border-top-color: var(--line); }
.grave-companions ul { gap: 10px; }
.grave-companions button { background: #f8f8fa; color: var(--ink); border: 1px solid #cfcfd5; border-radius: 8px; padding: 15px 18px; }
.grave-companions button:hover { background: #ededf0; border-color: #b7b7bd; color: var(--ink); }
.grave-companions button small, .grave-companions > p { color: var(--muted); }
.record-notice { background: #f5f5f7; color: #424245; border-color: #d2d2d7; }

@media (max-width: 950px) {
  .results-panel tbody { display: grid; gap: 14px; }
  .results-panel tbody tr, .results-panel tbody tr:last-child {
    background: #fff;
    border: 1px solid #c5c5cb;
    border-radius: 10px;
    padding: 20px 18px;
  }
  .results-panel tbody tr:nth-child(even) { background: #f1f1f3; }
  td[data-label]::before { color: var(--muted); }
}
@media (max-width: 600px) {
  .header { padding-top: 20px; padding-bottom: 20px; gap: 14px; }
  .header::after { width: min(240px, 68%); height: auto; top: 8px; bottom: 8px; right: -20px; opacity: .32; }
  .header .brand { font-size: clamp(24px, 6.8vw, 28px); gap: 14px; }
  .header .brand-cross { padding-right: 14px; }
  .header .brand-cross svg { width: 32px; height: 54px; }
  .header .brand small { font-size: 20px; }
  .header-label { margin-left: 0; font-size: 16px; gap: 8px; }
  .header-label svg { width: 20px; height: 20px; }
  .search-form { padding: 14px; }
  .detail-location { gap: 8px; }
  .detail-dates.has-age > div:first-child { text-align: left; padding: 12px 32px 12px 10px; }
  .detail-dates.has-age > div:nth-child(2) { text-align: right; padding: 12px 10px 12px 32px; }
  .detail-dates.has-age > div:not(.age-badge) dt { font-size: 14px; }
  .detail-dates.has-age > div:not(.age-badge) dd { font-size: clamp(17px, 4.6vw, 21px); }
  .detail-dates > .age-badge { width: 56px; height: 56px; padding: 5px; }
  .detail-dates .age-badge dt { font-size: 10px; }
  .detail-dates .age-badge dd { font-size: 18px; }
  .detail-dates .age-badge-long dd { font-size: 12px; }
}
@media (max-width: 380px) {
  .detail-dates.has-age { row-gap: 64px; }
}

.parish-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 32px 58px;
  background: #f5f5f7;
  border-top: 1px solid var(--line);
}
.parish-footer h2 { margin-bottom: 12px; font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.2px; }
.parish-footer address { font-style: normal; }
.parish-footer p { display: block; font-size: 15px; font-style: normal; line-height: 1.8; color: var(--ink); }
.parish-footer a, .parish-footer a:hover, .parish-footer a:focus { color: inherit; text-decoration: none; }
.regulations-link { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 16px; border: 0; background: transparent; color: var(--ink); font-size: 18px; font-weight: 500; text-decoration: none; }
.regulations-link:hover { color: var(--muted); }
.regulations-dialog .close { margin-bottom: 0; }
.regulations-content { padding: 24px 40px 36px; font-size: 16px; line-height: 1.75; }
.regulations-content h2 { margin-bottom: 26px; font-size: 25px; font-weight: 600; line-height: 1.35; }
.regulations-content ol { margin: 0; padding-left: 24px; }
.regulations-content ol > li { padding-left: 5px; margin-bottom: 18px; }
.regulations-content ul { margin: 10px 0 0; padding-left: 22px; list-style-type: disc; }
.regulations-content ul > li { margin: 5px 0; }
.regulations-signature { margin-top: 28px; text-align: right; font-weight: 500; }
@media (max-width: 1100px) {
  .parish-footer { padding-right: 30px; padding-left: 30px; }
}
@media (max-width: 600px) {
  .parish-footer { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 18px; }
  .regulations-link { align-self: flex-end; }
  .regulations-content { padding: 20px 22px 28px; }
  .regulations-content h2 { font-size: 22px; }
}

/* Kozy: imported search panel and clear tab from the reference project. */
/* A connected lower tab keeps Clear filters aligned with the submit button. */
.results-toolbar { align-items: flex-start; gap: 12px; margin: 0 0 28px; }
#result-count { padding-top: 10px; }
.clear-filters { position: relative; top: -1px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; margin: 0 25px 0 0; padding: 8px 16px; border: 1px solid #dedee4; border-top: 0; border-radius: 0 0 10px 10px; background: #f1f1f4; font-size: 16px; line-height: 1.4; white-space: nowrap; }
.clear-filters:hover { background: #e9e9ee; }
@media (max-width: 600px) {
  .results-toolbar { gap: 10px; margin: 0 0 28px; }
  .clear-filters { margin-right: 15px; padding-inline: 12px; font-size: 15px; }
}

/* The clear tab follows the outer form edge and uses the Search button type. */
.search-form { border-bottom-right-radius: 0; }
.clear-filters { margin-right: 0; font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.6; text-decoration: none; }
.clear-filters:hover { text-decoration: none; }
@media (max-width: 600px) { .clear-filters { font-size: 15px; } }

/* Public lease status, reserved for the grave's explicit validity date. */
.burial-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 24px; }
.burial-meta .source-label { margin: 0; }
.lease-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 26px; margin-left: auto; padding: 3px 10px; border: 1px solid #dedee4; border-radius: 999px; background: #f1f1f4; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
@media (max-width: 600px) {
  .burial-meta { column-gap: 8px; }
  .burial-meta .source-label { font-size: 13px; }
  .lease-badge { padding-inline: 8px; }
}
.lease-badge { flex-shrink: 1; max-width: 100%; white-space: normal; text-align: center; }

/* Keep the viewport and every table column stable when result pages change. */
html { scrollbar-gutter: stable; }


/* Static text does not show an editing caret; form inputs remain editable. */
body { caret-color: transparent; }
input, textarea, [contenteditable="true"] { caret-color: var(--ink); }
.advanced-filters summary, .advanced-filters summary * { caret-color: transparent; -webkit-user-select: none; user-select: none; cursor: pointer; }
.filters-chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; font-size: 0; line-height: 0; transform-origin: center; transition: transform .15s ease; }
.filters-chevron svg { display: block; width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .filters-chevron { transition: none; } }

/* Rounded lower corners on the person card heading. */
.detail-header { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* White backing reveals the rounded lower corners of the main gray header. */
.header-surface { max-width: 1320px; margin-inline: auto; background: #fff; }
.header { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* White backing reveals the rounded upper corners of the parish footer. */
.footer-surface { max-width: 1320px; margin-inline: auto; background: #fff; }
.parish-footer { border-top-left-radius: 16px; border-top-right-radius: 16px; }

/* Center the birth, death and burial columns beneath their headings. */
@media (min-width: 951px) {
  .results-panel th:nth-child(n+2):nth-child(-n+4),
  .results-panel td:nth-child(n+2):nth-child(-n+4) { text-align: center; }
}

/* Requested exceptions retained after restoring the original table view. */
#query::placeholder { color: #9696a0; opacity: 1; font-weight: 400; }
#search-form input:focus, #search-form select:focus, #search-form summary:focus { outline: none !important; box-shadow: none !important; }
#search-form .field input:focus, #search-form .field select:focus { border-color: #b7b7bd; }
#search-form input, #search-form select, #search-form summary, #search-form summary * { -webkit-tap-highlight-color: transparent; }