/* ── W5 · rent capacity (UI-AFF-004, CT-REVERSE-TABLE) ─────────────────────────────────────────────────────
   🔒 RELEASE: DECISION_REGISTER § 57 (15 Sep 2026) — this slice only.
   🔒 DESIGN: DESIGN_STATUS W5_RENT_CAPACITY_REFERENCE_VIEWS_2026_09_15 (1440 / 390 px) and
      W5_RENT_CAPACITY_REFERENCE_VIEWS_1000_375_360_2026_09_15 (1000 / 375 / 360 px).
   🔴 EVERY VALUE IS MEASURED FROM THE REGISTERED FRAMES in a browser (probe `measure_reference_frames.py`), ⛔ not chosen, and
      mapped BY VALUE onto tokens this palette already has: #e7e1f2 --line · #f0ecf7 --hair · #fff --surface · #17151d --ink ·
      #443f4e --ink-2 · #706d78 --ink-3 · #4a2bb0 --purple-deep. ⛔ No token is minted.
   ⛔ SCOPED: every selector sits under `.w5rc`, which only the rent-capacity answer renders; `styles.css` is untouched. */

.w5rc{display:block}
.w5rc h3,.w5rc dl,.w5rc dd,.w5rc p{margin:0}

/* a fact block — the reference `section.sf` */
.w5rc .w5rc-sf{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--lift-1)}
.w5rc .w5rc-basis{margin-top:10px}
.w5rc .w5rc-sfh{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.w5rc .w5rc-sfh h3{font-size:.92rem;font-weight:700;line-height:1.55;color:var(--ink)}
body[dir=rtl] .w5rc .w5rc-sfh h3{letter-spacing:normal}

/* the facts — the reference `.facts` / `.fact` */
.w5rc .w5rc-facts{display:flex;flex-direction:column}
.w5rc .w5rc-fact{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--hair)}
.w5rc .w5rc-fact:first-child{border-top:0;padding-top:0}
.w5rc .w5rc-fact dt{font-size:.81rem;font-weight:400;line-height:1.55;color:var(--ink-3)}
.w5rc .w5rc-fact dd{font-size:.87rem;font-weight:700;line-height:1.55;color:var(--ink);text-align:end;font-variant-numeric:tabular-nums}
/* the W5 value: the numeric run keeps its own direction inside an Arabic row (the render-time isolates carry the order) */
body[dir=rtl] .w5rc .w5rc-val{direction:ltr;unicode-bidi:isolate;text-align:end}

/* the approved "How this was calculated" disclosure — the registered `details.bd` pattern, collapsed by default.
   ⚠ `styles.css` styles EVERY `details` / `summary` (10px margin, .82rem, centred items); these rules restore the registered values. */
.w5rc .w5rc-stack{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.w5rc .w5rc-how{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.w5rc .w5rc-how>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;padding:10px 18px;font-size:.9rem;font-weight:800;line-height:1.55;color:var(--purple-deep)}
.w5rc .w5rc-how>summary::-webkit-details-marker{display:none}
.w5rc .w5rc-body{padding:2px 18px 16px}
.w5rc .w5rc-note{margin:8px 0 0;font-size:.84rem;line-height:1.55;color:var(--ink-2)}

/* G20 — the approved amount-and-currency keep-together rule, narrow mobile only (the reference's ≤420px band) */
@media (max-width:420px){
  .w5rc .w5rc-fact{flex-wrap:wrap;row-gap:2px}
  .w5rc .w5rc-fact>dd.w5rc-val{white-space:nowrap;margin-inline-start:auto}
}

/* 900px and up — the reference's desktop fact-block inset (VP2 1000 / VP1 1440) */
@media (min-width:900px){
  .w5rc .w5rc-sf{padding:16px}
}

/* 🔒 STACKED AT EVERY WIDTH — owner, 15 Sep 2026 (DECISION_REGISTER § 57.12): "stack both rent-capacity answer blocks vertically
   beneath the query at ALL widths, including desktop." Block 1 (equivalent monthly payment · financing · indicative price range),
   then block 2 (rate · term · the collapsed disclosure), inside the Dal message card, at the width of the conversation column.
   ⌛ SUPERSEDED for rent capacity only, removed here: the `@media (min-width:1108px)` side-by-side composition (a viewport-keyed
   50/50 grid that removed the card frame), which followed the browser width rather than the conversation column (§ 57.11).
   ⛔ No width cap is added; ⛔ the shell, `main.js` and `styles.css` are untouched. */