/* ══ W5 · the neighbourhood-ranking answer (yield · annual growth · total return) ══════════════════════════════
   🔒 DESIGN: the W5 Rev 12 final package, frames F01–F10 / S01–S08 (pinned 18 Sep 2026). A PORT, NOT A
   RECONSTRUCTION: every declaration below is the frames' own rule (`.lv-rank`, `.rk*`, `.dt*`, `.pr-flag`, `.lv-prose`,
   `.mh`, `.md*`, `.sec-head`, `.asset-chip`, `.lv-rail`), copied value for value.
   ⛔ EVERY RULE IS SCOPED TO `.w5a` — the root the W5 renderer draws — so nothing here reaches the landing rail
   (`.rail`), the hero card (`.hc-*`), the comparison, the workspace or any other answer. The product's own tokens are
   used where the frame's share the name AND value (--line, --hair, --ink, --ink-2, --ink-3, --tint, --tint-2, --purple,
   --purple-deep, --purple-hover, --focus, --warn, --warn-bg, --warn-line, --r-s, --r-m, --r-l, --lift-1, --lift-2);
   `--line-accent` is not a product token, so its frame value #d9cff0 is written as a scoped alias.
   ⛔ THE CARD IS NOT STYLED HERE. The canonical D-08 card rules live in `comparison.css` under
   `:is(.cmp-journey, .q9-rail, .w5-rail)`; this file only lays out the rail HOST (the frame's `.lv-rail` scroller).
   ⚠ RECORDED DIFFERENCES from the frames, each forced by a higher authority:
     1. the frame's `.dmsg{padding:22px}` is NOT applied — the message card is the shared shell's (18px at ≥900px);
     2. the neighbourhood name is NOT a control (no hover underline, no pointer): the frame's map-zoom button (MZ-1)
        has no governed row identity and no production handler yet, so it is drawn as text in the same typography;
     3. the frame's card rules (`.cx-*`) are replaced by the canonical card's (precedence: implemented canonical card).
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.w5a{--line-accent:#d9cff0}
.w5a.ans{display:flex;flex-direction:column;gap:28px}
.w5a .lv{min-width:0}
.w5a .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.w5a .num{font-variant-numeric:tabular-nums;white-space:nowrap}

.w5a .sec-head{display:flex;flex-direction:column;gap:3px;margin:0 0 14px}
.w5a .sec-head h3{margin:0;font-size:1.08rem;line-height:1.35;font-weight:700;letter-spacing:-.014em;color:var(--ink)}
body[dir=rtl] .w5a .sec-head h3{letter-spacing:normal;line-height:1.55}
.w5a .asset-chip{display:inline-block;margin-inline-start:6px;padding:1px 9px;border-radius:999px;background:var(--tint);
  border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--ink-2);vertical-align:middle}
.w5a .asset-chip.ac-proxy{background:#4a2bb0;border-color:#4a2bb0;color:#fff}
.w5a .rk-basis{margin:0;font-size:.78rem;line-height:1.5;color:var(--ink-3)}

/* ── highlight cards (the frames' `.lv-cards` / `.hc`) ── */
.w5a .lv-cards{display:flex;flex-direction:column;gap:12px;container:cards / inline-size}
.w5a .lv-cards .sec-head{margin-bottom:2px}
.w5a .hc{position:relative;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(180deg,#f7f4fd 0,#fcfbfe 58px,var(--surface) 58px);box-shadow:var(--lift-1),var(--lift-2)}
.w5a .hc-top{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;
  min-height:58px;padding:12px 20px;border-bottom:1px solid var(--hair)}
.w5a .hc-id{display:flex;flex-direction:column;min-width:0}
.w5a .hc-name{font-size:1.08rem;line-height:1.3;font-weight:700;letter-spacing:-.016em;color:var(--ink);overflow-wrap:anywhere}
body[dir=rtl] .w5a .hc-name{letter-spacing:normal;line-height:1.5}
.w5a .hc-q{font-size:.8rem;line-height:1.4;color:var(--ink-3)}
.w5a .hc-rank{flex:none;font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.w5a .hc-rank bdi{margin-inline-start:2px;font-weight:700;color:var(--ink-2)}
.w5a .hc-ms{display:grid;grid-template-columns:minmax(0,1fr)}
.w5a .hc-m{padding:16px 20px 18px;min-width:0}
@container cards (min-width:600px){ .w5a .hc .hc-m{max-width:640px} }
.w5a .hc-mh{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.w5a .hc-lbl{font-size:.8rem;line-height:1.4;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--ink-3)}
.w5a .hc-val{font-size:1.62rem;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
body[dir=rtl] .w5a .hc-val{letter-spacing:normal}
.w5a .hc-ex{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.w5a .hc-src{margin:10px 0 0;padding-inline-start:10px;border-inline-start:2px solid var(--line-accent);
  font-size:.8rem;line-height:1.55;color:var(--ink-3);max-width:62ch}
@container cards (max-width:420px){
  .w5a .hc-top{padding:11px 16px}
  .w5a .hc-m{padding:14px 16px 16px}
  .w5a .hc-val{font-size:1.44rem}
}

/* ── the band notice inside the board (the frames' `.nt`) ── */
.w5a .nt{margin:0 0 14px;padding:12px 16px;border-radius:var(--r-m);background:var(--tint);border-inline-start:3px solid var(--line-accent);
  display:flex;flex-direction:column;gap:10px}
.w5a .nt p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-2);max-width:78ch}
body[dir=rtl] .w5a .nt p{line-height:1.85}

/* ── the board ── */
.w5a .lv-rank{container:rank / inline-size}
.w5a .sec-head-rank{margin-bottom:12px}
.w5a .rk-wrap{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--lift-1);overflow:hidden}
.w5a .rk{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:inherit}
/* the shell's global `th,td` padding / border and `table{font-size:.86rem}` are neutralised inside the scope */
.w5a .rk th,.w5a .rk td{padding:0;text-align:start;vertical-align:top;border-bottom:0}
.w5a .rk thead th{padding:11px 12px 10px;background:var(--tint-2);border-bottom:1px solid var(--line);
  font-size:.8rem;line-height:1.35;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--ink-3);vertical-align:bottom}
.w5a .rk thead th.rk-n{padding-inline-start:18px;width:3.25rem}
body[dir=rtl] .w5a .rk thead th.rk-n{width:4.75rem}
.w5a .rk thead th.rk-y{width:21%}
.w5a .rk thead th.rk-p{width:23%}
.w5a .rk thead th.rk-c{width:4.25rem}
.w5a .nosec .rk thead th.rk-y{width:30%}
.w5a .rk .rk-y,.w5a .rk .rk-p{text-align:end}
.w5a .rk thead th.rk-p{padding-inline-end:20px}
.w5a .rk-r>*{border-top:1px solid var(--hair);padding-top:8px;padding-bottom:6px}
.w5a .rk tbody tr.rk-r:first-child>*{border-top:0}
.w5a .rk-r>td.rk-n{padding-inline-start:18px}
.w5a .rk-n{font-size:.8rem;line-height:44px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.w5a .rk-nm{padding-inline:12px 8px;font-weight:400;min-width:0}
.w5a .rk-r>td.rk-y{padding-inline-end:12px;font-size:1.04rem;line-height:44px;font-weight:700;color:var(--purple-deep)}
.w5a .rk-r>td.rk-p{padding-inline-end:20px;font-size:.9rem;line-height:44px;font-weight:700;color:var(--ink-2)}
.w5a .rk-q{display:block;margin:-6px 0 2px;font-size:.8rem;line-height:1.4;color:var(--ink-3)}
/* a RANGE row's primary cell: the range, then the endpoint the ranking uses on its own line (the frames' `.rng-t`) */
.w5a .rk-r>td.rk-y:has(.rng){line-height:1.3;padding-top:10px;padding-bottom:8px}
.w5a .rng-t{display:block;font-size:.8rem;font-weight:400;color:var(--ink-3)}
/* the name keeps the frame's typography; ⛔ not a control (recorded difference 2) */
.w5a .rk-name{display:inline-flex;align-items:center;min-height:44px;min-width:44px;max-width:100%;margin:0;
  margin-inline-start:-6px;padding:0 6px;border-radius:var(--r-s);font-size:.96rem;line-height:1.35;font-weight:700;color:var(--ink);
  text-align:start;overflow-wrap:anywhere;justify-content:flex-start}
.w5a .rk-t{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;margin-inline-start:auto;padding:0;
  border:0;border-radius:var(--r-s);background:transparent;color:var(--purple-deep);cursor:pointer}
.w5a .chev-well{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--lift-1);transition:background .15s ease,border-color .15s ease,color .15s ease}
/* the frame's inline chevron `<svg viewBox="0 0 16 16"><path d="M4 6.25 8 10.25 12 6.25" stroke-width="1.8" round/></svg>`,
   drawn as a MASK (OWNER RULING W-3 — the client emits no icon element; `comparison.css` "THE APPROVED GLYPHS, AS CSS
   MASKS" is the precedent). Same geometry, same 16px box, painted with `currentColor`. */
.w5a .chev{display:block;width:16px;height:16px;background-color:currentColor;transition:transform .18s ease;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 6.25 8 10.25 12 6.25" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 6.25 8 10.25 12 6.25" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.w5a .rk-t:hover .chev-well{background:var(--tint);border-color:var(--line-accent)}
.w5a .rk-t:focus-visible{outline:none}
.w5a .rk-t:focus-visible .chev-well{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--purple-deep),0 0 0 7px var(--focus)}
.w5a .rk-t[aria-expanded="true"] .chev-well{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
.w5a .rk-t[aria-expanded="true"] .chev{transform:rotate(180deg)}
.w5a .rk-t[aria-expanded="true"]:hover .chev-well{background:var(--purple-hover);border-color:var(--purple-hover)}
@media (prefers-reduced-motion:reduce){.w5a .chev,.w5a .chev-well{transition:none}}
.w5a .var-B .rk-r>.rk-c{padding-inline-end:10px;text-align:end}
.w5a .var-B .rk-r>td.rk-p{padding-inline-end:8px}
.w5a .var-B thead th.rk-p{padding-inline-end:8px}
.w5a .rk-r.open>*{background:var(--tint-2)}
.w5a .rk-d>td{padding:0 20px 16px;background:var(--tint-2)}
.w5a .dt{margin-inline-start:calc(3.25rem - 8px);border-radius:var(--r-m);background:var(--tint);
  box-shadow:inset 0 1px 2px rgba(23,21,29,.05);padding:14px 18px}
.w5a .dt-l{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 28px}
.w5a .dt-i{display:flex;flex-direction:column;gap:3px;min-width:0}
.w5a .dt-i dt{font-size:.8rem;line-height:1.4;color:var(--ink-3)}
.w5a .dt-i dd{margin:0;font-size:1rem;line-height:1.3;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;white-space:normal}
.w5a .dt-i.only-narrow{display:none}
.w5a .rk-foot{margin-top:10px;padding-inline:4px}
.w5a .rk-foot p{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-3)}
@container rank (max-width:559px){
  .w5a .rk thead{display:none}
  .w5a .rk,.w5a .rk tbody{display:block}
  .w5a .rk-r{display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;column-gap:6px;align-items:start;border-top:1px solid var(--hair)}
  .w5a .var-B .rk-r{grid-template-columns:2.1rem minmax(0,1fr) auto 44px}
  .w5a .var-B.nodetail .rk-r{grid-template-columns:2.1rem minmax(0,1fr) auto}
  .w5a .rk tbody tr.rk-r:first-child{border-top:0}
  .w5a .rk-r>*{border-top:0!important;padding:6px 0 4px!important}
  .w5a .rk-r>td.rk-n{padding-inline-start:14px!important}
  .w5a .rk-r>td.rk-y{padding-inline-end:14px!important}
  .w5a .var-B .rk-r>td.rk-y{padding-inline-end:2px!important}
  .w5a .var-B .rk-r>.rk-c{padding-inline-end:6px!important}
  .w5a .rk-r>.rk-p{display:none}
  .w5a .rk-r.open{background:var(--tint-2)}
  .w5a .rk-r.open>*{background:transparent}
  .w5a .rk-d{display:block}
  .w5a .rk-d[hidden]{display:none}
  .w5a .rk-d>td{display:block;padding:0 12px 12px}
  .w5a .dt{margin-inline-start:0;padding:4px 14px}
  .w5a .dt-l{grid-template-columns:minmax(0,1fr);gap:0}
  .w5a .dt-i{flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 12px;padding:9px 0;
    border-top:1px solid rgba(109,71,225,.08)}
  .w5a .dt-i:first-child{border-top:0}
  .w5a .dt-i.only-narrow{display:flex}
  .w5a .dt-i dd{margin-inline-start:auto;font-size:.95rem;text-align:end}
}

/* ── the served narrative, and the governed historical warning strip ── */
.w5a .lv-prose{display:flex;flex-direction:column;gap:10px}
.w5a .lv-prose p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-2);max-width:68ch}
body[dir=rtl] .w5a .lv-prose p{line-height:1.85}
.w5a .lv-prose h2,.w5a .lv-prose h3,.w5a .lv-prose h4{margin:6px 0 0;font-size:1.08rem;line-height:1.35;font-weight:700;
  letter-spacing:-.014em;color:var(--ink)}
body[dir=rtl] .w5a .lv-prose h2,body[dir=rtl] .w5a .lv-prose h3,body[dir=rtl] .w5a .lv-prose h4{letter-spacing:normal}
.w5a .lv-prose ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.w5a .lv-prose li{font-size:.93rem;line-height:1.7;color:var(--ink-2);max-width:68ch}
.w5a p.pr-flag{margin:0;padding:10px 14px;border-radius:var(--r-m);background:var(--warn-bg);border:1px solid var(--warn-line);
  font-size:.8rem;line-height:1.55;color:var(--ink-2);max-width:none}
.w5a .pr-flag strong{color:var(--warn)}

/* ── "How this was calculated" (#120 levels 1–2) ── */
.w5a .mh{margin:0}
.w5a .md-brief{margin:0 0 8px;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:74ch}
/* the shell's global `details{margin-top:10px}` and `details>summary{…}` are neutralised inside the scope */
.w5a details.md{margin:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--lift-1);overflow:hidden}
.w5a .md>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 10px;
  padding-inline-start:20px;font-size:.92rem;font-weight:700;color:var(--ink)}
.w5a .md>summary::-webkit-details-marker{display:none}
.w5a .md>summary .md-l{flex:1;min-width:0}
.w5a .md>summary .chev-well{flex:none;margin:7px}
.w5a .md>summary:hover{background:var(--tint-2)}
.w5a .md>summary:hover .chev-well{background:var(--tint);border-color:var(--line-accent)}
.w5a .md>summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--purple-deep),inset 0 0 0 5px var(--focus);border-radius:var(--r-l)}
.w5a .md[open]>summary{border-bottom:1px solid var(--hair)}
.w5a .md[open]>summary .chev{transform:rotate(180deg)}
.w5a .md[open]>summary .chev-well{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
.w5a .md-b{padding:4px 20px 18px;background:var(--tint-2)}
.w5a .md-b ul{margin:10px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;font-size:inherit}
.w5a .md-b li{font-size:.86rem;line-height:1.6;color:var(--ink-2);max-width:74ch}
/* the COMPONENT a bullet speaks about (§ 66.16.19 item 2): the registered growth label before the mid-rate sentence
   on a total-return board. ⚠ Weight only — ⛔ no colour of its own, so it reads as part of the sentence it scopes */
.w5a .md-b li .md-sc{font-weight:700;color:var(--ink-1)}
.w5a .md-evl{margin:12px 0 0;font-size:.8rem;font-weight:700;color:var(--ink-3)}
/* #120 level 3 — a SEPARATE action (the frames' `.md-act` / `.md-open`); ⚠ the frame's `color:var(--acc)` names a token
   the frame never defines, so it computes to the inherited ink — written here as `inherit`, the computed value */
.w5a .md-act{margin:8px 0 0}
.w5a .md-open{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:inherit;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.w5a .md-open:focus-visible{outline:2px solid var(--purple-deep);outline-offset:2px}
/* the shared #120 dialog keeps its OWN `.wsbody`-scoped rules; this wrapper draws no box of its own */
.w5a .wsbody.w5-mdl{display:contents}
/* the prose paragraphs (the frames' `.pr-p`) */
.w5a .lv-prose p.pr-p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-2);max-width:68ch}

/* ── the project rail HOST (the frame's `.lv-rail`, OD-W5D-01 horizontal scroller) ──
   ⚠ `inline-size:100%` is required on an inline-size container (the Q9 host's measured lesson, § 51.7). */
.w5a .lv-rail{container:w5rail / inline-size;inline-size:100%}
/* ⌛ 19 Sep 2026 — the CARD's type context. The accepted Q9 host gives the canonical card `color:var(--body);
   font-size:15px; line-height:1.6` (`.q9-rail .d08`, comparison.css, § 51.2). This host set none, so the card
   inherited the answer's colour (#443f4e) and line-height (1.55): every region ~3% shorter than the accepted card
   (measured: card_variants/measurements.json § B). The same three values are declared here.
   ⌛ 19 Sep 2026 — OWNER DIRECTION, DECISION_REGISTER § 66.16.7 item 5: "Use the accepted canonical responsive card
   sizing in W5, with content-driven height—not a W5-specific redesign derived from Claude's frames." The host now
   takes the accepted Q9 host box (`.q9-rail .d08`: white panel, padding 18px 16px — comparison.css, § 51.2), so the
   card widths RESULT from the same inner width as Q9 (mobile 390 → 296 px; 4 / 2 / 1 per view at the § 51.7(2)
   container thresholds; the § 51.8 286 px split cap at the logical start). ⛔ The OD-W5D-01 horizontal scroller is
   kept (an owner decision, not re-opened here).
   ⌛ Superseded, preserved: `.w5a .w5-rail .d08{padding:0;background:none;…}` — "the rail's own placement stays the
   Rev 12 `.lv-rail` layout (no host padding or panel)", a W5-specific layout taken from the Rev 12 frames. */
.w5a .w5-rail .d08{padding:18px 16px;background:#fff;color:var(--body);font-size:15px;line-height:1.6}
.w5a .w5-rail .cx-rail{display:flex;gap:12px;width:100%;max-width:1180px;margin-inline:auto;
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin;align-items:stretch}
.w5a .w5-rail .cx-rail:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px;border-radius:var(--r-m)}
.w5a .w5-rail .cx-rail>.cx-card{flex:0 0 calc((100% - 36px) / 4);scroll-snap-align:start}
@container w5rail (max-width:1107px){.w5a .w5-rail .cx-rail>.cx-card{flex-basis:calc((100% - 12px) / 2)}}
@container w5rail (max-width:719px){.w5a .w5-rail .cx-rail>.cx-card{flex-basis:100%}}
/* IC-07 / § 51.8 Option A — in the desktop 50/50 split the origin column's rail cards are capped at 286px, at the
   rail's LOGICAL start (a flex row starts there: left in English, right in Arabic) */
.wsroot .origin .w5a .w5-rail .cx-rail>.cx-card{max-inline-size:286px}
/* the card's internal column (media, then body) — unchanged */
.w5a .w5-rail .cx-rail>.cx-card{display:flex;flex-direction:column}
.w5a .w5-rail .cx-rail>.cx-card>.cx-media{flex:0 0 auto}
.w5a .w5-rail .cx-rail>.cx-card>.cx-body{flex:1 1 auto}
.w5a .w5-rail .cx-rail>.cx-card>.cx-body>:nth-last-child(2){margin-block-end:auto}
/* 🔒 19 Sep 2026 — OWNER DECISION D3 (DECISION_REGISTER § 66.16.9): "View project buttons must align at the bottom
   across side-by-side cards. Content may vary; use flexible space rather than truncating, inventing content or imposing
   a fixed pixel height. Single-card mobile layouts retain natural content height. Preserve the horizontal rail."
   · Multi-card views (desktop, tablet, the desktop split): the scroller STRETCHES its cards (`align-items:stretch`,
     above) and the flexible space sits immediately above the action (`:nth-last-child(2){margin-block-end:auto}`) —
     the 7 Sep 2026 W3A multi-card action baseline. ⛔ No height is declared anywhere.
   · One card per view (≤ 719 px container, mobile): natural content height (`flex-start`, below) — a lone card is
     never stretched to an off-screen neighbour.
   · The desktop split is a ≤ 719 px container with TWO 286 px cards in view, so it keeps the baseline (last rule).
   ⌛ Superseded, preserved: § 66.16.8 item 3 — "content-driven height at every width" (`align-items:flex-start` on the
   scroller at all widths), which dropped the side-by-side baseline (owner decision D3 reverses that consequence). */
@container w5rail (max-width:719px){.w5a .w5-rail .cx-rail{align-items:flex-start}}
.wsroot .origin .w5a .w5-rail .cx-rail{align-items:stretch}

/* ⌛ 19 Sep 2026 (DECISION_REGISTER § 66.16.15) — the two-component PROXY board (Rev 12 F07 / F08 / F09 `tworef`): each
   row's figure cell lists each component under its own label. The frames' own declarations, copied. ⛔ No new token. */
.w5a .rf{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;line-height:1.7;white-space:nowrap}
.w5a .rf-l,.w5a .rf-u{font-size:.8rem;font-weight:400;color:var(--ink-3)}
/* ⚠ The frames declare `space-between`, which reads compact there only because their figure column is narrow; the live
   table column is wide, so the RENDERED frame (label · figure · unit together, at the end) is reproduced with `flex-end`. */
.w5a .tworef .rf{justify-content:flex-end}