/* Step 1 heirs: the read-only list in the input column (js/heirs/list.js)
   and the heirs dialog where they are edited (js/heirs/dialog.js). */

/* ---------- Read-only list ---------- */

.heirs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.heirs-list__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.heirs-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* One heir: plain text, not clickable -- editing is only ever through the
   "+ Add waris" / "Edit waris" button below the list. */
.heirs-list__heir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.heirs-list__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
}

.heirs-list__name {
  font-weight: 600;
}

.heirs-list__name--empty {
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
}

.heirs-list__rel {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.heirs-list__tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-node-deceased);
}

/* Something the case can't continue without (see js/heirs/checks.js). */
.heirs-list__issue {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-danger);
}

/* Date notes: a prompt to check, not a verdict -- same amber as the other
   "worth a second look" notes (faraid-calc.css's .faraid-calc__note--warning). */
.heirs-list__note {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-node-incomplete-border);
}

/* A deceased heir's own heirs: indented with the "deceased" colour on the
   inline-start edge, the same visual language as the family tree's
   deceased nodes (family-tree.css), at any depth. */
.heirs-list__sub {
  margin-inline-start: 0.75rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid var(--color-node-deceased);
}

.heirs-list__sub-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.heirs-list__open {
  margin-block-start: 0.875rem;
}

/* ---------- The dialog ---------- */

/* Wide (the form is laid out across, see below), and laid out as head /
   scrolling body / foot, so Save stays in view however long the list gets. */
.heirs-modal__dialog {
  max-width: 84rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.heirs-modal__pane {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.heirs-modal__pane[hidden] {
  display: none;
}

/* The two question panes: discard unsaved changes, and clear the results on Save. */
.heirs-modal__confirm,
.heirs-modal__clear {
  padding: 1.25rem;
}

.heirs-modal__head {
  padding: 1rem 1.25rem 0;
}

.heirs-modal__head .modal-hint {
  margin-block-end: 0.625rem;
}

/* The heir disclaimers (js/heirs/disclaimers.js): above the read-only list,
   and under the dialog's intro. Look: .notice in components.css. */
.heirs-disclaimers {
  margin-block-end: 0.75rem;
}

.heirs-modal__body {
  container: heirs / inline-size;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 0.5rem 1.25rem 0.75rem;
  border-block: 1px solid var(--color-border);
}

.heirs-modal__foot {
  padding: 0 1.25rem 1rem;
}

.heirs-modal__foot .modal-actions {
  margin-block-start: 0.75rem;
}

.heirs-modal__error {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-danger);
}

/* ---------- Heirs inside the dialog ----------
   The whole tree is one grid: the top list sets the columns --
   relationship | name | deceased | date of death | [mother/father] |
   remove -- and shows the headings once; every row is a subgrid of it, nested heirs' rows too (the
   deceased heir's section and its list are subgrids in turn). So the
   headings line up over every level, and a nested level's indent only
   narrows its relationship column. A deceased heir's date note and their
   own heirs span the full width under their row. Below 50rem (a phone, or
   a narrow window) it falls back to wrapped rows with a label on every
   field (the container query at the end). */

.heirs-edit__list {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 1.5fr) max-content 9.5rem 2rem;
  column-gap: 0.625rem;
}

/* The mother/father column, only while some child row has the choice (the
   dialog sets data-parent-column). Top list only: nested lists are subgrids
   of it and follow. */
.heirs-modal__body[data-parent-column] > .heirs-edit__level > .heirs-edit__list {
  grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 1.5fr) max-content 9.5rem minmax(11rem, 1.5fr) 2rem;
}

.heirs-edit__head-parent {
  display: none;
}

.heirs-modal__body[data-parent-column] .heirs-edit__head-parent {
  display: block;
}

.heirs-edit__field--parent[hidden] {
  display: none;
}

.heirs-edit__head,
.heirs-edit__item,
.heirs-edit__row,
.heirs-edit__sub,
.heirs-edit__sub .heirs-edit__level,
.heirs-edit__sub .heirs-edit__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.heirs-edit__head {
  padding-block-end: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.heirs-edit__empty {
  grid-column: 1 / -1;
  margin: 0.5rem 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.heirs-edit__item {
  border-block-end: 1px solid var(--color-border);
}

.heirs-edit__item:last-child {
  border-block-end: 0;
}

.heirs-edit__row {
  align-items: start;
  padding-block: 0.3125rem;
}

.heirs-edit__field {
  min-width: 0;
  margin-block-end: 0;
  gap: 0.125rem;
}

.heirs-edit__field select,
.heirs-edit__field input {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

/* Each field's own label: what screen readers read, and what a narrow
   screen shows; on the grid the column headers say it once instead. */
.heirs-edit__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The checkbox and the remove button sit level with the inputs. */
.heirs-edit__deceased,
.heirs-edit__remove {
  min-block-size: 2.125rem;
}

.heirs-edit__deceased {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.heirs-edit__deceased input {
  accent-color: var(--color-node-deceased);
  cursor: pointer;
}

/* Delete: red, so it reads as destructive at a glance, with a faint red
   wash on hover. No confirmation -- a removal only touches the dialog's
   copy, and Cancel undoes it. */
.heirs-edit__remove {
  /* Always the last column, so a row without a mother/father field (or a
     grid without that column) still lines up. */
  grid-column: -2 / -1;
  justify-self: end;
  color: var(--color-danger);
}

.heirs-edit__remove:hover {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* Marked only after a Save that found something missing (dialog.js's
   markErrors()); clears as each field is filled in. The date selector
   out-ranks case-form.css's amber `.field input[type="date"]:invalid`. */
.heirs-edit__field [aria-invalid="true"],
.heirs-edit__field input[type="date"][aria-invalid="true"] {
  border-color: var(--color-danger);
}

.heirs-edit__error {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-danger);
}

.heirs-edit__error[hidden] {
  display: none;
}

.heirs-edit__concern {
  grid-column: 1 / -1;
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-node-incomplete-border);
}

/* Repository A's classification of the chosen relationship (gender,
   cause, possible Types of Heirs), quiet, under the row. */
.heirs-edit__classification {
  grid-column: 1 / -1;
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.heirs-edit__classification[hidden] {
  display: none;
}

/* A deceased heir's own heirs, indented under their row like the
   read-only list. */
.heirs-edit__sub {
  grid-column: 1 / -1;
  margin-block: 0 0.5rem;
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--color-node-deceased);
}

.heirs-edit__sub-label {
  grid-column: 1 / -1;
  margin: 0.125rem 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.heirs-edit__add {
  grid-column: 1 / -1;
  justify-self: start;
  margin-block-start: 0.5rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
}

/* ---------- Narrow screens: wrapped rows, each field labelled ---------- */

@container heirs (max-width: 50rem) {
  .heirs-edit__list {
    display: flex;
    flex-direction: column;
  }

  .heirs-edit__head {
    display: none;
  }

  .heirs-edit__item,
  .heirs-edit__sub,
  .heirs-edit__sub .heirs-edit__level {
    display: block;
  }

  .heirs-edit__sub .heirs-edit__list {
    display: flex;
    flex-direction: column;
  }

  .heirs-edit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .heirs-edit__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }

  .heirs-edit__field--relationship {
    flex: 3 1 12rem;
  }

  .heirs-edit__field--name {
    flex: 2 1 10rem;
  }

  .heirs-edit__field--parent {
    flex: 2 1 11rem;
  }

  span.heirs-edit__field--date {
    display: none;
  }

  .heirs-edit__remove {
    margin-inline-start: auto;
  }
}