/* Relationships (#/relationships, board B20) — family rules only. The «مِحْوَر» system (tokens, components, icons)
   is app/public/lifeos.css owned by W0; this file uses its tokens only, so light/dark follow .lo[data-theme] and
   LIGHT/DETAILED follows the root [data-mode] without changing font sizes, data or features. */
.rl-page { min-inline-size: 0; }
.rl-page [hidden] { display: none !important; }
.rl-message:empty, .rl-drafts:empty, .rl-editor-host:empty { display: none; }

/* A button's icon is drawn from the lifeos icon variable (.ic-<name> sets --i), so the label stays its only text. */
.rl-bi::before { content: ""; inline-size: 16px; block-size: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.btn:not(.btn-sm).rl-bi::before { inline-size: 18px; block-size: 18px; }
.chip.rl-bi::before { inline-size: 14px; block-size: 14px; }

/* Disclosure: «المزيد» in LIGHT, always open in DETAILED (progressive disclosure only). */
.rl-more { display: contents; }
.rl-more-b { display: none; }
.rl-more.is-open > .rl-more-b, [data-mode="detailed"] .rl-more > .rl-more-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
[data-mode="detailed"] .rl-more > .rl-more-t { display: none; }
.rl-more-t[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.rl-detail > .rl-more > .rl-more-t { align-self: flex-start; }
.rl-more-b > .rl-extra { flex: 1 1 100%; }

.rl-summary { display: flex; align-items: center; gap: 8px; min-block-size: 32px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rl-summary::-webkit-details-marker { display: none; }
.rl-summary::after { content: ""; margin-inline-start: auto; inline-size: 7px; block-size: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease); flex: none; }
details[open] > .rl-summary::after { transform: rotate(-135deg); }
details.rl-fold[open] > .rl-summary { margin-block-end: 6px; }
details.rl-fold > :not(summary) + :not(summary) { margin-block-start: 10px; }
.rl-original { white-space: pre-wrap; overflow-wrap: anywhere; }

/* People list (start column) + person detail; the list is read first on wide screens, the detail first on narrow ones. */
@media (min-width: 1024px) { .rl-split { grid-template-columns: 400px minmax(0, 1fr); } .rl-back { display: none; } }
@media (max-width: 1023px) { .rl-split > .rl-detail-col { order: -1; } }
.rl-list .rl-person { inline-size: 100%; padding-block: 12px; padding-inline: 4px; border-block-end: 1px solid var(--line); text-align: start; align-items: flex-start; color: inherit; }
.rl-list .rl-person:hover, .rl-list .rl-person.sel { padding-inline: 12px; }
.rl-list .rl-person.sel { border-block-end-color: transparent; }
.rl-person-b { display: flex; flex-direction: column; }
.rl-person-b > .t { display: block; }
.rl-ellip { max-inline-size: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-today-mark { display: inline-flex; color: var(--accent); padding-block-start: 2px; }
.rl-avatar-lg { inline-size: 48px; block-size: 48px; font-size: 18px; }
.rl-name { font-size: 30px; }
.rl-facts { grid-template-columns: 110px minmax(0, 1fr); }
.rl-facts dd { display: flex; flex-direction: column; gap: 2px; }

/* Rows: promises, occasions, logged contact */
.rl-item { align-items: flex-start; flex-wrap: wrap; }
.rl-item > .grow { flex: 1 1 240px; }
.rl-item .m + .m { margin-block-start: 6px; }
.rl-item .help, .rl-item .rl-source-links { margin-block-start: 6px; }
.rl-item-acts { flex-wrap: wrap; }
.rl-lead { display: inline-flex; color: var(--ink-3); padding-block-start: 3px; }
.rl-lead-warn { color: var(--warn); }
.rl-hist .h { grid-template-columns: 110px minmax(0, 1fr); }
.rl-compare th[scope="row"] { color: var(--ink-2); font-weight: 600; white-space: nowrap; }

/* Forms and save states */
.rl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.rl-form-grid > .rl-wide { grid-column: 1 / -1; }
.rl-bool { justify-content: center; }
.rl-participants { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-inline-size: 0; }
.rl-choice-list { display: flex; flex-direction: column; gap: 4px; max-block-size: 240px; overflow: auto; margin-block-start: 6px; }
.rl-check { display: flex; gap: 10px; align-items: center; min-block-size: 32px; cursor: pointer; }
.rl-check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); flex: none; }
.rl-errors:empty, .rl-error:empty { display: none; }
.rl-error { color: var(--danger-ink); }
.rl-error-list { display: flex; flex-direction: column; gap: 4px; }
.rl-editor-wrap > .rl-form { border-inline-start: 3px solid var(--accent); scroll-margin-block-start: 16px; }
.rl-feedback .state { white-space: normal; align-items: flex-start; line-height: 1.5; }
.rl-feedback .state .ic, .rl-feedback .state .spin { margin-block-start: 2px; }

/* Phone widths: 44px touch targets and 16px inputs (no zoom on focus). */
@media(max-width:650px) {
  .rl-page .btn, .rl-page .tabs button, .rl-page .chip-btn, .rl-page .rl-summary, .rl-page .rl-check { min-block-size: 44px; }
  .rl-page .input, .rl-page .select, .rl-page .textarea { min-block-size: 44px; font-size: 16px; }
  .rl-form-grid { grid-template-columns: minmax(0, 1fr); }
  .rl-name { font-size: 26px; }
  .rl-ellip { max-inline-size: 16ch; }
}