/* Page width override (optional, precedent: .tree-page) */
.people-list-page {
  width: min(100%, 64rem);
}

/* Search */
.people-search {
  display: grid;
  gap: 0.4rem;
  margin-block: var(--space-4);
  max-width: 24rem;
}
.people-search label { font-weight: 600; }
.people-search input {
  min-height: 44px;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--color-wood-mid);
  border-radius: var(--radius-sm);
  background: white;
  color: inherit;
  font: inherit;
}

/* Create action rendered as <Link className="button-primary"> — a plain <a>,
   so it needs the button's full visual treatment duplicated (a:focus-visible
   is already global in application.css, no need to repeat). */
.button-primary {
  display: inline-block;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-burgundy);
  color: white;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 1.6;
}
.button-primary:hover { background: var(--color-burgundy-dark); }

/* Shown in place of a relationship form's submit button when a person
   search finds no match -- olive rather than burgundy so it reads as a
   distinct "go create this person" action, not the form's own submit. */
.button-create-person {
  display: inline-block;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-olive);
  color: white;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 1.6;
}
.button-create-person:hover { background: #52521f; }

/* Grid */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

/* Card (precedent: .auth-panel border/bg treatment) */
.person-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
  text-align: center;
}
.person-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.person-card-name {
  color: var(--color-burgundy);
  font-weight: 700;
  text-decoration: none;
}
.person-card-name:hover { text-decoration: underline; }
.person-card-years {
  color: var(--color-wood-mid);
  font-size: 0.9rem;
}

/* Pagination */
.people-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Deceased checkbox — must override .field input (auth.css), which otherwise
   turns this checkbox into a 44px-tall, full-width, bordered box. */
.field-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--color-wood-mid);
  background: white;
}

/* Textareas — match .field input's visual weight, not present in auth.css */
.field textarea {
  min-height: 6rem;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--color-wood-mid);
  border-radius: var(--radius-sm);
  background: white;
  color: inherit;
  font: inherit;
  resize: vertical;
}

/* Form page: fieldset has no className in PersonForm.jsx and renders with the
   browser default border/padding box; reset scoped to this page only. */
.person-form-page fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.person-form-page fieldset:disabled { opacity: 0.65; }
.person-form-page .link-button {
  margin-inline-start: var(--space-3);
}
.person-proposal-guidance {
  margin-block: var(--space-3) var(--space-4);
  padding: var(--space-3);
  border-inline-start: 0.25rem solid var(--color-olive);
  background: var(--color-ivory);
}
.person-proposal-guidance p { margin-bottom: 0; }
.person-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.person-form-actions .link-button { margin-inline-start: 0; }

/* Profile page (main already inherits width:min(100%,48rem) from application.css) */
/* Plain burgundy text link, no border/background box -- same treatment as
   .request-return (requests.css) for the equivalent "go back" pattern, so
   this reads as in-page navigation rather than a floating form control.
   display:inline-flex + min-height (not a visible border) gets it to the
   same 44px-equivalent tap target every other interactive control here
   uses (see .tree-node-name in genealogy.css) without adding button chrome. */
.person-profile-back-to-tree {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-4);
  color: var(--color-burgundy);
  font-weight: 700;
}

.person-profile-photo {
  display: block;
  width: 12rem;
  height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 0 auto var(--space-4);
}
.person-profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.person-profile-facts > div { margin: 0; }
.person-profile-facts dt {
  font-weight: 700;
  color: var(--color-wood-mid);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.person-profile-facts dd { margin: 0; }
.person-profile-lead {
  font-size: 1.125rem;
  color: var(--color-wood-mid);
  margin-block: var(--space-4);
}
.person-profile-prose {
  font-family: var(--font-serif);
  line-height: 1.7;
  color: var(--color-ink);
  white-space: pre-wrap;
}
.person-profile-attribution {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-wood-mid);
  font-size: 0.85rem;
}
.person-profile-version-summary {
  color: var(--color-wood-mid);
  font-size: 0.85rem;
  margin-top: var(--space-2);
}

.removed-photos-panel {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.removed-photos-panel h3 { margin-bottom: var(--space-2); }
.removed-photos-panel h3 .link-button {
  min-height: 44px;
  font-weight: 700;
}
.removed-photos-help {
  color: var(--color-wood-mid);
  max-width: 42rem;
}
.removed-photos-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}
.removed-photo-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.removed-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.removed-photo-card p { margin: 0; }
.removed-photo-date {
  color: var(--color-wood-mid);
  font-size: 0.85rem;
}
.removed-photo-confirm {
  display: grid;
  gap: var(--space-2);
}

@media (max-width: 36rem) {
  .removed-photos-list { grid-template-columns: 1fr; }
  .removed-photo-card button { width: 100%; }
}

/* Version history page (docs/06-ui-ux.md's Version History section) */
.person-history-back {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.version-history-subsection {
  margin: var(--space-4) 0;
}
.version-history-subsection h3 {
  font-family: var(--font-serif);
  margin-bottom: var(--space-2);
}
.version-history-entries {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}
.version-history-entry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.version-history-entry-meta {
  color: var(--color-wood-mid);
  font-size: 0.85rem;
  flex: 0 0 100%;
}
.version-history-entry-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.version-history-alert {
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border: 1px solid var(--color-burgundy);
  border-radius: var(--radius-sm);
  background: var(--color-ivory);
}

/* Relationship sections (Parents/Partners/Children) on the profile page */
.person-relationships-section {
  margin: var(--space-6) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.person-relationships-section h2 {
  font-family: var(--font-serif);
  margin-bottom: var(--space-2);
}
.relationship-empty {
  color: var(--color-wood-mid);
  font-size: 0.9rem;
}
.relationship-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}
.relationship-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.relationship-row-photo {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.relationship-row-identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.relationship-row-years,
.relationship-row-dates {
  color: var(--color-wood-mid);
  font-size: 0.85rem;
}
.relationship-row-actions,
.relationship-row-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* Relationship add/edit form */
.relationship-editor {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.relationship-editor fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.relationship-editor fieldset:disabled { opacity: 0.65; }
.relationship-editor .link-button {
  margin-inline-start: var(--space-3);
}
.relationship-summary {
  font-family: var(--font-serif);
  color: var(--color-ink);
  margin: var(--space-3) 0;
}
.relationship-alert {
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border: 1px solid var(--color-burgundy);
  border-radius: var(--radius-sm);
  background: var(--color-ivory);
}

/* Photo gallery (precedent: .relationship-* sections/alerts/forms) */
.person-photo-gallery {
  margin: var(--space-6) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.person-photo-gallery h2 {
  font-family: var(--font-serif);
  margin-bottom: var(--space-2);
}
.person-photo-count {
  color: var(--color-wood-mid);
  font-size: 0.9rem;
  margin-top: 0;
}
.person-photo-empty {
  color: var(--color-wood-mid);
  font-size: 0.9rem;
}
.person-photo-alert {
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border: 1px solid var(--color-burgundy);
  border-radius: var(--radius-sm);
  background: var(--color-ivory);
}
.person-photo-primary {
  margin: var(--space-3) 0;
  text-align: center;
}
.person-photo-primary-image {
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 0 auto;
}
.person-photo-primary-badge {
  margin-top: var(--space-2);
  color: var(--color-olive);
  font-weight: 700;
  font-size: 0.85rem;
}
.person-photo-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}
.person-photo-thumbnail {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  line-height: 0;
}
.person-photo-thumbnail img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 2px);
  display: block;
}
.person-photo-thumbnail--active {
  border-color: var(--color-burgundy);
}
.person-photo-actions,
.person-photo-primary-confirm,
.person-photo-remove-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.person-photo-primary-confirm .field,
.person-photo-remove-confirm .field {
  flex-basis: 100%;
  margin: var(--space-3) 0;
}
.person-photo-caption-form,
.person-photo-upload-form {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ivory);
}
.person-photo-caption-form .link-button {
  margin-inline-start: var(--space-3);
}
.person-photo-upload-form h3 {
  font-family: var(--font-serif);
  margin-top: 0;
}
.person-photo-limit {
  color: var(--color-wood-mid);
  font-size: 0.9rem;
}

/* Person search picker */
.relationship-picker {
  display: grid;
  gap: 0.4rem;
  max-width: 24rem;
  margin-block: var(--space-3);
}
.relationship-picker input {
  min-height: 44px;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--color-wood-mid);
  border-radius: var(--radius-sm);
  background: white;
  color: inherit;
  font: inherit;
}
.relationship-picker-status {
  font-size: 0.85rem;
  color: var(--color-wood-mid);
}
.relationship-picker-results {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.relationship-picker-results button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 0;
  background: white;
  color: var(--color-ink);
  font-weight: 400;
}
.relationship-picker-results button:hover,
.relationship-picker-results button:focus-visible {
  background: var(--color-parchment);
}
.relationship-picker-selected {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-3);
}