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; border-radius: 0 0 16px 16px; }
.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: 600px) {
  .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; }
}

/* 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; }
.lease-badge-current { border-color: #d5e0d4; background: #eef3ed; color: #476047; }
.lease-badge-expired { border-color: #e6d9d5; background: #f6efed; color: #805b52; }
@media (max-width: 600px) {
  .burial-meta { column-gap: 8px; }
  .burial-meta .source-label { font-size: 13px; }
  .lease-badge { padding-inline: 8px; }
}

/* Keep the register label and lease status beside each other. */
.burial-meta { flex-wrap: nowrap; }
.burial-meta .source-label { min-width: 0; }
@media (max-width: 600px) {
  .burial-meta .source-label { font-size: 12px; }
  .burial-meta .lease-badge { padding-inline: 7px; font-size: 11px; }
}

/* Longer validity labels remain inside the person card on small screens. */
.lease-badge { flex-shrink: 1; max-width: 100%; white-space: normal; text-align: center; }

/* Match the source viewport for responsive type only while the person dialog is open. */
html:has(#details[open]) { scrollbar-gutter: auto; }