/* ============================================================
   Mirath: Calculator + Family views
   Layout and components for #/calculator (.calcview) and
   #/family (.famview). Stacked ≤600px · 2-col results ≥900px ·
   the aside opens naturally at ≥1200px. All colors via
   css/tokens.css custom properties: no hardcoded hex.
   Owner: CALC-VIEWS agent.
   ============================================================ */

/* ============================================================
   Family view
   ============================================================ */

.famview {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.famview .progress-segments {
  margin-bottom: var(--space-2);
}

/* ---------- Testator panel ---------- */

.famview-testator-lede {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-5);
  max-width: 36rem;
}

.famview-testator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.famview-testator-grid .field + .field {
  margin-top: 0;
}

@media (min-width: 600px) {
  .famview-testator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

/* ---------- Intention passage (empty family record) ---------- */

/* The two-nights hadith framing the will as an act of care: a quiet
   threshold before the first name is written. Serif, unhurried. */
.famview-intention {
  padding: var(--space-5) var(--space-6);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.famview-intention p {
  font-family: var(--font-serif);
  font-size: var(--text-callout);
  line-height: 1.7;
  color: var(--color-text-primary);
  max-width: 44rem;
}

/* ---------- Banners + hints ---------- */

.famview-banners {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.famview-hint {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* ---------- Member list ---------- */

.famview-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.famview-members-head h2 {
  font-size: var(--text-h2);
}

.famview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.famview-row {
  align-items: flex-start;
}

.famview-row .heir-row-main {
  gap: var(--space-1);
}

/* A deceased member stays in the record with dignity: a quiet
   ash-toned rule, never strikethrough, never an alarm. */
.famview-row--deceased {
  border-inline-start: 3px solid var(--color-hajb);
}

.famview-row--deceased .heir-row-name {
  color: var(--color-text-secondary);
}

.famview-row-status {
  margin-top: var(--space-1);
}

.famview-row-note {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin-top: var(--space-1);
  max-width: 34rem;
}

.famview-grief {
  font-size: var(--text-subhead);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  max-width: 34rem;
}

/* ---------- Heir-status chips ---------- */

.famview-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: 1.5;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
}

.famview-chip--fard {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.famview-chip--asabah {
  border-color: var(--color-success);
  color: var(--color-success);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}

.famview-chip--dhawu {
  border-color: var(--color-scholar);
  color: var(--color-scholar);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-scholar) 8%, transparent);
}

.famview-chip--mahjub {
  border-color: var(--color-hajb);
  color: var(--color-hajb);
  font-style: italic;
}

.famview-chip--non,
.famview-chip--rest {
  color: var(--color-text-secondary);
}

/* ---------- Row actions ---------- */

.famview-row-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.famview-action {
  min-height: var(--tap-target-min);
  min-width: var(--tap-target-min);
  padding-inline: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .famview-action:hover {
    background: var(--color-surface-raised);
  }
}

.famview-action--remove {
  color: var(--color-error);
}

/* ---------- "Why excluded" disclosure ---------- */

.famview-why {
  margin-top: var(--space-1);
  max-width: 34rem;
}

.famview-why summary,
.famview-explain summary,
.calc-why summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  font-size: var(--text-footnote);
  color: var(--color-accent);
  cursor: pointer;
}

.famview-why p,
.famview-explain p {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding-block: var(--space-1) var(--space-2);
}

/* ---------- Add / edit sheet form ---------- */

.famview-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.famview-form .field + .field {
  margin-top: 0;
}

.famview-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.famview-fieldset legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

.famview-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.famview-radio-item,
.famview-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .famview-radio-item:hover,
  .famview-check:hover {
    background: var(--color-surface-raised);
  }
}

.famview-radio-item input,
.famview-check input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.famview-explain {
  margin-top: var(--space-2);
}

.famview-next {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   Calculator view
   ============================================================ */

.calcview {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.calc-section-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-4);
}

/* ---------- Quiet notes ---------- */

.calc-note {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 44rem;
}

.calc-note a {
  color: var(--color-accent);
}

.calc-note + .calc-note {
  margin-top: var(--space-2);
}

/* Awl / radd: the amber proportional-reduction register. */
.calc-note--awl {
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-inline-start: 3px solid var(--color-awl);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-awl) 8%, transparent);
}

.calc-note--switch {
  margin-top: var(--space-2);
  color: var(--color-text-primary);
}

/* ---------- Madhab segmented control ---------- */

.calc-madhab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.madhab-seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-width: 36rem;
}

.madhab-seg-btn {
  flex: 1 1 auto;
  min-height: var(--tap-target-min);
  min-width: 0;
  padding-inline: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .madhab-seg-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
  }
}

.madhab-seg-btn.is-selected {
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-surface-raised);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

/* ---------- Results grid ---------- */

.calcview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* The aside opens into columns only when its OWN width can hold them.
   It is keyed on available width (auto-fit), never the viewport: inside the
   constrained view-root the aside's 2fr track can be far narrower than
   a viewport breakpoint suggests, and a viewport-keyed split squeezed
   each card to ~160px at 1280px (one-word-per-line ledgers). */
.calcview-aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.calcview-aside .calc-notes {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .calcview-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
  }
}

/* ---------- Distribution rows ---------- */

.calc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc-row {
  align-items: flex-start;
}

.calc-row .share-chip {
  margin-top: var(--space-1);
  flex-shrink: 0;
}

.calc-row .heir-row-relation {
  line-height: 1.5;
}

.calc-why {
  margin-top: var(--space-1);
  max-width: 38rem;
}

.calc-why p {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding-block: var(--space-1) var(--space-2);
}

.calc-why-rationale {
  display: block;
  margin-top: var(--space-1);
  font-style: italic;
}

/* The governing-verse citation beside each share. */
.calc-why-basis {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-footnote);
  color: var(--color-accent);
}

/* ---------- Donut ---------- */

.calc-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.calc-donut {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.calc-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote);
  color: var(--color-text-primary);
}

.calc-swatch {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.calc-legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-legend-value {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ---------- Estate ledger ---------- */

.calc-estate-line {
  font-size: var(--text-callout);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.calc-estate-line a {
  color: var(--color-accent);
}

.calc-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc-ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--text-subhead);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-separator);
}

.calc-ledger li:last-child {
  border-bottom: none;
}

.calc-ledger-amt {
  font-family: var(--font-mono);
  font-size: var(--text-footnote);
  white-space: nowrap;
}

.calc-ledger-net {
  font-weight: 600;
}

.calc-ledger-net .calc-ledger-amt {
  color: var(--color-accent);
}

/* ---------- Notes on the calculation ---------- */

.calc-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-notes-list li {
  font-size: var(--text-footnote);
  line-height: 1.55;
  color: var(--color-text-secondary);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-separator);
}

/* ---------- Collapsed sections (trace · circumstances) ---------- */

.calc-fold {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding-inline: var(--space-5);
}

/* display: list-item (not flex) keeps mixed inline content (text with
   inline RTL Arabic terms) in one bidi flow that wraps normally. Flex
   split the summary into separate items: jumbled bidi order, per-word
   wrapping, and a min-content width that forced horizontal scroll at
   320px. The marker is suppressed to preserve the shipped look, and
   padding-block reproduces the 52px single-line row flex centering gave. */
.calc-fold > summary {
  display: list-item;
  list-style: none;
  min-height: 52px;
  padding-block: 11px;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  color: var(--color-text-primary);
  cursor: pointer;
}

.calc-fold > summary::-webkit-details-marker { display: none; }

.calc-fold[open] > summary {
  border-bottom: 1px solid var(--color-separator);
  margin-bottom: var(--space-4);
}

.calc-fold > *:last-child {
  padding-bottom: var(--space-5);
}

/* ---------- Trace ---------- */

.calc-trace {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc-trace-step strong {
  display: block;
  font-size: var(--text-subhead);
  color: var(--color-text-primary);
}

.calc-trace-step p {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-top: var(--space-1);
  max-width: 44rem;
}

.calc-trace-step cite {
  display: block;
  font-size: var(--text-caption);
  font-style: italic;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* ---------- Special circumstances ---------- */

.calc-circ-group {
  font-size: var(--text-h3);
  font-family: var(--font-sans);
  margin-block: var(--space-5) var(--space-2);
}

.calc-circ-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-circ-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-subhead);
  line-height: 1.45;
  color: var(--color-text-primary);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .calc-circ-label:hover {
    background: var(--color-surface-raised);
  }
}

.calc-circ-label input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.calc-circ-item--scoped {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

.calc-circ-item--scoped .field-label {
  font-weight: 400;
  font-size: var(--text-subhead);
}

.calc-circ-item--scoped .field-input {
  max-width: 34rem;
}

/* ---------- Worked example (in memory only) ---------- */

.calc-example-note {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.calc-example-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* A quiet, link-register button, for stepping back out of the example. */
.calc-quiet-btn {
  min-height: var(--tap-target-min);
  padding-inline: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .calc-quiet-btn:hover {
    background: var(--color-surface-raised);
  }
}

/* ---------- Scholar referral + situation summary ---------- */

.calc-referral {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc-referral-meaning {
  font-size: var(--text-callout);
  line-height: 1.55;
  color: var(--color-text-primary);
  max-width: 44rem;
}

.calc-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-summary-text {
  width: 100%;
  min-height: 200px;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-footnote);
  line-height: 1.55;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.calc-summary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ---------- Compact screens ---------- */

@media (max-width: 600px) {
  .famview-row,
  .calc-row {
    flex-wrap: wrap;
  }

  .famview-row-actions {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }

  .madhab-seg-btn {
    flex-basis: calc(50% - var(--space-1));
  }
}