/* Step 2.1 body: Munasakhat / layered-death calculation (see
   js/munasakhat.js). Action-row/status-line/error/note styling is all
   shared with Step 2's own (.faraid-calc__* in faraid-calc.css) --
   reused directly, not duplicated, since the two steps' action rows are
   meant to look and behave identically. Only the per-branch layout below
   is specific to this step. */

/* One collapsible <details> per death (see buildBranchSection() in
   js/munasakhat.js) -- an accordion of deaths, each opening and closing on
   its own. A card with the accent colour on its leading edge, so each
   death reads as its own section whether open or closed. */
.munasakhat__branch {
  margin-block-end: 0.75rem;
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* The summary row is the death's heading ("Kematian ke-N: ..."). */
.munasakhat__branch-heading {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  user-select: none;
  border-radius: var(--radius-md);
}

.munasakhat__branch-heading::-webkit-details-marker {
  display: none;
}

.munasakhat__branch-heading::marker {
  content: "";
}

/* Same chevron as the steps' own (case-form.css), so the two levels of
   collapsing read alike: down when open, right when closed. */
.munasakhat__branch-heading::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.625rem;
  border-inline-end: 2px solid var(--color-text-muted);
  border-block-end: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.munasakhat__branch:not([open]) .munasakhat__branch-heading::before {
  transform: rotate(-45deg);
}

.munasakhat__branch-heading:hover {
  background: var(--color-surface-alt);
}

.munasakhat__branch[open] .munasakhat__branch-heading {
  border-block-end: 1px solid var(--color-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.munasakhat__branch-body {
  padding: 0.75rem 0.875rem 0.875rem;
}

/* At the top of a death's body: where its estate came from, and what was added
   to (or left out of) its heirs -- read with the heading, so left-aligned
   rather than centred like the step's own notes. */
.munasakhat__detail {
  margin: 0 0 0.75rem;
  text-align: start;
}