/* ============================================
   Settlr — Settlement Detail screen layout
   Genuine screen-specific structure only, scoped under
   [data-view="settlement-detail"]. Mirrors the expense-detail hero + detail
   rows for a recorded settlement ("You paid X"). Component styling (detail-row,
   screen-footer, button, top-app-bar, avatar) lives in component CSS;
   typography is applied via text-* classes in markup.
   ============================================ */

[data-view="settlement-detail"] .view__content {
  --app-shell-content-pad: calc(var(--spacing-96) + var(--spacing-16));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* ── Settlement Hero Card ── */
[data-view="settlement-detail"] .settle-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-20);
  margin: var(--spacing-8) var(--spacing-16) 0;
  border-radius: var(--radius-16);
  background: var(--surface-card);
  border: var(--border-small) solid var(--border-subtle);
  text-align: center;
}
[data-view="settlement-detail"] .settle-hero__illus {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--btn-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-24);
}
/* amount — text style via .text-display-lg in markup */
[data-view="settlement-detail"] .settle-hero__amount { color: var(--text-primary); }
/* title — text style via .text-title-lg in markup */
[data-view="settlement-detail"] .settle-hero__title { color: var(--text-primary); }
/* date — text style via .text-body-sm in markup */
[data-view="settlement-detail"] .settle-hero__date { color: var(--contact-settled-fg); }

/* ── Detail Section wrapper ── */
[data-view="settlement-detail"] .detail-section {
  padding: 0 var(--spacing-16);
  display: flex;
  flex-direction: column;
}

/* ── Footer: Undo (destructive text on the shared secondary button) ── */
[data-view="settlement-detail"] .btn-undo { color: var(--expense-owe-fg); }