/* Step 2 body: the distribution calculation (see js/faraid-calc.js). */

/* Top padding matches the rhythm of a sub-step heading's own margin-block-
   start (see .faraid-calc__substep-heading below) -- this row reads as
   its own section following the last table, not glued to it. Bottom
   padding stays small on purpose: .faraid-calc__status-line and
   .faraid-calc__error collapse to zero height via :empty (below) whenever
   they have nothing to say, which is true most of the time (only "Mengira
   ...” or an error message ever populate them), so this alone -- plus
   .case-form__step-body's own 1rem -- is enough space at rest; a bigger
   bottom padding here would just widen the gap between the buttons and
   Step 2's own bottom edge again. */
.faraid-calc__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1.25rem 0.5rem;
}

/* Calculate Distribution + the Clear/Next pair, at the bottom of Step 2's
   body. Full width so .faraid-calc__action-row-right's own
   margin-inline-start:auto (below) has a whole row's worth of space to
   push against, not just this row's own shrink-to-fit width. */
.faraid-calc__action-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
}

/* Clear + (if present) case-form.js's own Next button, grouped and pushed
   to the row's far end together -- this group's own auto margin owns that
   push, not Next's .case-form__next-step margin-inline-start:auto (see
   case-form.css), so Clear ends up flush against Next's left instead of
   each button pushing itself independently and leaving a gap between
   them. */
.faraid-calc__action-row-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-start: auto;
}

/* Neutralizes .case-form__next-step's own margin-inline-start:auto (see
   case-form.css) specifically inside this group -- that rule is what
   pushes Step 1's own Next button to the end of *its* row, but here the
   group above already owns that job; without this override, Next would
   try to push itself again inside an already-pushed group and open a gap
   between it and Clear. */
.faraid-calc__action-row-right > .case-form__next-step {
  margin-inline-start: 0;
}

.faraid-calc__calculate:disabled,
.faraid-calc__clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.faraid-calc__status-line {
  margin: 0;
  min-height: 1.25em;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.faraid-calc__error {
  color: var(--color-danger);
  text-align: center;
  margin: 0;
}

/* Both lines are empty almost all the time -- .faraid-calc__status-line
   only ever holds text mid-run ("Mengira: ..."), .faraid-calc__error only
   after a failed run -- so collapsing them out of the layout entirely
   while empty (rather than reserving their min-height/margin at rest)
   is what keeps the space below the action row proportionate instead of
   permanently padded out for text that isn't there most of the time. */
.faraid-calc__status-line:empty,
.faraid-calc__error:empty {
  display: none;
}

/* Same look as family-tree.js's stale banner (see
   .family-tree__stale-banner in family-tree.css) -- same meaning, "this
   output no longer matches the current input", so it should read as the
   same signal wherever it shows up. */
.faraid-calc__stale-banner {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-node-incomplete-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.8125rem;
}

.faraid-calc__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* 'Awl/unassigned-remainder notes (see buildDistributionTable() in
   faraid-calc.js) -- same amber as the needs-review/not-implemented
   status badges below, for the same "worth a second look, not a pass/
   fail verdict" reason. */
.faraid-calc__note--warning {
  color: var(--color-node-incomplete-border);
}

/* One heading per sub-step's own results section (see SUBSTEPS in
   faraid-calc.js) -- each sub-step's table stays visible on its own,
   never replaced by the next one, so each needs its own label to stay
   readable once more than one table is on screen at once. Accent color
   plus a matching inline-start border (not a filled background, so it
   stays readable at this small/uppercase size) marks it as a heading
   rather than body text; the leading number in the label itself (see
   buildDistributionSection()) is what tells the sub-steps apart from
   each other -- every heading shares the same accent on purpose. */
.faraid-calc__substep-heading {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: 0.5rem;
}

.faraid-calc__substep-heading:first-of-type {
  margin-block-start: 0;
}

/* ---------- Eligibility results table ---------- */

/* Scrolls internally when the Catatan column runs wide (see
   buildResultsTable() in faraid-calc.js) instead of overflowing past the
   input column's fixed width or forcing the page to scroll sideways. */
.faraid-eligibility__scroll {
  overflow-x: auto;
}

.faraid-eligibility {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.faraid-eligibility th,
.faraid-eligibility td {
  text-align: start;
  padding: 0.5rem 0.625rem;
  border-block-end: 1px solid var(--color-border);
  vertical-align: top;
}

.faraid-eligibility th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 700;
}

/* Inline flag inside a Bahagian cell (see buildDistributionTable() in
   faraid-calc.js) when that heir has their own Step 2.1: Munasakhat
   branch -- overrides the cell's own white-space: nowrap (see
   .faraid-eligibility__share) so this note can wrap onto its own line
   instead of forcing the whole cell wide. Same amber as the needs-review/
   not-implemented badges: not a pass/fail verdict, a "read this together
   with another table" pointer. */
.faraid-eligibility__redistributed-note {
  display: block;
  white-space: normal;
  font-family: var(--font-body, inherit);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-node-incomplete-border);
}

.faraid-eligibility__status {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.faraid-eligibility__status--eligible {
  color: var(--color-accent-2);
  border-color: var(--color-accent-2);
  background: var(--color-surface-alt);
}

.faraid-eligibility__status--blocked {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-surface-alt);
}

/* Amber, not red/green -- this isn't a pass/fail verdict, it's "this app
   can't yet determine it" (see faraid_calc.py's ASABAH_REVIEW_RULES
   docstring). --color-node-incomplete-border is the same amber the family
   tree already uses for its own "incomplete" node state, so the two
   "we don't fully know yet" signals in this app read the same. */
.faraid-eligibility__status--needs-review {
  color: var(--color-node-incomplete-border);
  border-color: var(--color-node-incomplete-border);
  background: var(--color-surface-alt);
}

.faraid-eligibility__status--incomplete {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}

.faraid-eligibility__reasons {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  max-width: 18rem;
}

/* Steps 7-9 (Asal Masalah, 'Awl, Tashih) above the Tashih table. */
.faraid-calc__masalah {
  margin-block: 0 0.5rem;
  padding-inline-start: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Step 17's special case (Akdariyyah, Musytarikah, ...) under a distribution table. */
.faraid-calc__special-case p {
  margin-block: 0.25rem 0;
}

/* Repository E: Baitulmal's line, set apart from the heirs above it. */
.faraid-eligibility__baitulmal td {
  border-block-start: 1px dashed var(--color-border);
  font-style: italic;
}

/* Mahjub Nuqsan (Repository B: partial blocking) on a share: its own line
   under the basis, in the amber of "worth noticing", not the red of
   "blocked" -- the heir still inherits, just a reduced share. */
.faraid-eligibility__nuqsan {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-node-incomplete-border);
  font-weight: 600;
}

/* The fraction itself (see buildDistributionTable() in faraid-calc.js) --
   monospace so "1/6" vs "1/12" line up in a column instead of jittering
   with proportional-font digit widths, and never wraps mid-fraction. */
.faraid-eligibility__share {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  white-space: nowrap;
  font-weight: 600;
}

/* ---------- Tanazul (Steps 13-15): "5. Tanazul" (js/tanazul.js) ----------
   The question as a Yes / No toggle, then a card per heir giving up a share:
   title + remove, the heir, how it is given up (two option cards), the
   scenario 2 details, and the confirmation. The result is the next step
   (js/tanazul-result.js). Colours from tokens only. */

/* The question on the left, Yes / No on the right; they stack only when the
   column is too narrow for both. (A <legend> can't be a flex item, so the
   question text is laid out with float + the toggle pushed to the end.) */
.tanazul__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.tanazul__question-text {
  float: inline-start;
  flex: 1 1 16rem;
  max-inline-size: 36rem;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.tanazul__toggle {
  margin-inline-start: auto;
  flex: none;
}

/* Yes / No: two segments of one control. */
.tanazul__toggle {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
}

.tanazul__toggle-option {
  position: relative;
  cursor: pointer;
}

.tanazul__toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tanazul__toggle-option span {
  display: block;
  min-inline-size: 4.5rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tanazul__toggle-option input:checked + span {
  background: var(--color-accent);
  color: var(--color-on-primary);
}

.tanazul__toggle-option input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tanazul__arrangements {
  display: grid;
  gap: 0.875rem;
  margin-block-end: 0.75rem;
}

.tanazul__arrangement {
  display: grid;
  gap: 0.875rem;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.tanazul__arrangement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: -0.25rem -0.375rem;
}

.tanazul__arrangement-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tanazul__icon-remove {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-text-muted);
}

.tanazul__icon-remove:hover {
  color: var(--color-danger);
}

.tanazul__field {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.tanazul__label {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tanazul__hint {
  margin: -0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.tanazul select,
.tanazul__percent {
  min-inline-size: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
}

.tanazul select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* How the share is given up: two option cards. */
.tanazul__scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.tanazul__scenarios > legend {
  margin-block-end: 0.375rem;
}

.tanazul__scenario {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  cursor: pointer;
}

.tanazul__scenario:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.tanazul__scenario input {
  margin-block-start: 0.1875rem;
  accent-color: var(--color-accent);
}

.tanazul__scenario-text {
  display: grid;
  gap: 0.125rem;
}

.tanazul__scenario-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.tanazul__scenario-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Scenario 2: the portion and the recipients, set off by an accent edge. */
.tanazul__details {
  display: grid;
  gap: 0.5rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--color-accent);
}

.tanazul__field--portion {
  max-inline-size: 12rem;
}

/* "%" inside the field's border, so the pair reads as one input. */
.tanazul__percent {
  display: flex;
  align-items: center;
  padding: 0;
}

.tanazul__percent:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.tanazul__percent input {
  flex: 1;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0.5rem 0 0.5rem 0.625rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.tanazul__percent input:focus-visible {
  outline: none; /* the wrapper's ring shows it */
}

.tanazul__percent-sign {
  padding-inline: 0.375rem 0.625rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.tanazul__recipients {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tanazul__recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 2rem;
  gap: 0.5rem;
  align-items: center;
}

.tanazul__add-recipient {
  justify-self: start;
}

.tanazul__confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.tanazul__confirm input {
  margin-block-start: 0.1875rem;
  accent-color: var(--color-accent);
}

.tanazul__add {
  margin-block-end: 0.5rem;
}