/* Unified Person page (admin) - /admin/leads/:id. Hebrew RTL island. One person, three tabs (Lead / Open Day / Enrollment), one docked WhatsApp transcript and one comments footer that never narrows. ══════════════════════════════════════════════════════════════════════════ SIX CONTRACTS THIS FILE LIVES UNDER ══════════════════════════════════════════════════════════════════════════ 1. BORROWED KITS ARE NEVER REDEFINED BARE. This is the LAST stylesheet in index.html's admin block, so a bare `.ld-x { }` here wins on /admin/enrollments/:id too, and a bare `.reg-x { }` wins on five list screens at once (admin.css carries 226 distinct `.reg-*` classes across 360 rule blocks, read by six other stylesheets). The page renders, as MARKUP and nothing more: `.ld-*` the card kit, the transcript, the marketing/channel/journey family, the seats, the ledger, the contracts (admin-lead-detail.css) `.edt-*` `.edt-progress--negative` + `.edt-progress-negative`, the hatched negative-ledger track (admin-enrollment-detail.css) `.reg-*` the chips, the attendance control, the answer tables (admin.css) `.llc-*` the lifecycle map, rendered indirectly by LeadFlowChart `.lal-*` LeadActivityLog, inside the comments footer `.wa-*` WaActionGroup's segmented control (admin-wa-actions.css) `.btn`, `.btn-sm`, `.btn-primary`, `.btn-icon`, `.form-*`, `.modal*`, `.empty-state`, `.toast`, `.filter-label` (admin.css) Every divergence below is scoped `.per-page X { }` or lives on a `.per-*` class applied ALONGSIDE the borrowed one. Same rule `admin-enrollment-detail.css` states for itself, one file further down the chain. `tests/adminPersonRtlMirrors.spec.ts` fails the build if it slips. `.lal-*` and `.lct-*` are the exception INSIDE the exception: do not mirror them at all. LeadActivityLog is RTL BY DEFAULT (its rail sits on the right, its timestamp is pushed with `margin-right: auto`), so a mirror here would double-flip a component that is already correct - and it has three other hosts. 2. RTL: this root declares its own direction and joins NEITHER shared group at the end of admin.css. It follows `.edt-page` / `.enr-page`, not `.ld-page`. Two consequences, both deliberate: - No root-level horizontal scroller. Quoting the sale page's own header, which learned it first: "a root-level scroller on a page made of collapsible panels grows and vanishes as panels toggle". This page is nothing BUT collapsible panels, across three tabs, so every wide thing scrolls inside its own box - the ledger in `.ld-pay-scroll`, the evidence lists via `overflow-wrap: anywhere`. - It is also what keeps the sticky header working. An ancestor with a non-visible overflow becomes the scrollport for every `position: sticky` inside it, and `.per-page` never scrolls vertically - so joining that group would silently stop BOTH sticky rows from sticking, at every viewport. `admin-leads.css` opens its file with that scar (`.leads-page { overflow: visible }`). The `.ld-page`-scoped mirrors at the end of admin-lead-detail.css do not reach `.per-page`, so every physically positioned bit of the borrowed kits is restated below under our own root. 3. LOGICAL PROPERTIES THROUGHOUT. `inset-inline-*`, `margin-inline-*`, `padding-block-*`, `border-inline-*`, `text-align: start | end`. That is what drops the mirror bill for anything this page OWNS to zero; only the borrowed kits cost anything, and that cost is finite and paid below. The one property with no logical form is `transform: translateX()` - CSS has no `translate-inline` - so its sign is reasoned out in a comment at every use, exactly as admin-whatsapp.css does for `.wai-lead`. 4. EXACTLY FOUR MEDIA QUERIES, and no others: @media (max-width: 1024px) tablet and below @media (max-width: 767px) phone @media (min-width: 768px) and (max-width: 1024px) the tablet band @media (max-height: 480px) landscape phone The clone test pins the width set AND asserts exactly one `max-height` query exists, so the landscape guard cannot be silently dropped. A fifth breakpoint is a decision, not a tweak. One threshold that looks like it wants a query and deliberately does NOT get one here: - 1025px, the desktop sidebar rail. It lives in `admin.css`'s own `@media (min-width: 1025px)` block, because it styles the SHELL (`.admin-sidebar`, `.admin-nav-link`, `.admin-rail-toggle`) and the shell is not this file's to restyle. `admin.css` keeps its own widths; they are pre-existing and are not ours to change either. A SECOND one used to be listed here and is gone as of 2026-08-09: 1280px, the WhatsApp dock's auto-collapse. It was stylesheet-invisible (it decided whether the panel STARTS open, not how it looks), and the owner removed it outright - decision D8. Whether the dock starts open is now the stored per-admin preference at every docked width, answered by `PersonWaPanel.vue` off `useAdminBreakpoints()`, and there is no 1280 anywhere in this page any more. Do not reinstate it as a query. 5. NOTHING HERE MAY BECOME A CONTAINING BLOCK FOR A FIXED DESCENDANT. No `transform`, `filter`, `backdrop-filter`, `perspective`, `contain` or `container-type` on `.per-page`, on `.per-header__row--b`, on `.per-panes` or on `.per-panel`. Any of them makes that element the containing block for `position: fixed` descendants, and the action bar opens `AdminSheet`, which is fixed: it would drop into the middle of the page instead of covering the viewport. The repo has been bitten and worked around this twice already - `admin.css`'s `.reg-table-scroll` pushes its `container-type` DOWN off the page root ("a `container-type` there would trap them in the page box instead of the viewport"), and `.adm-sheet` refuses a blur outright ("a filter makes this box the containing block for `position:fixed` DESCENDANTS"). The sticky rows here use a flat opaque fill for the same reason, which does the same visual job with none of the trap. It was `rgba(255,255,255,0.97)` until 2026-08-10, and 3% was not a rounding error: screenshotted at 1440 and at 390, the page's own dark text read straight through all three stuck bars - an ad pill through the identity row, a section heading through the tab strip. A bar you can read the page through is not a bar. Do not reintroduce the alpha; if the stuck header ever needs to feel lighter, change the COLOUR, not the opacity. 6. THE GRADIENT NEVER TOUCHES WEIGHT 500 OR ABOVE, numerals included. Money on this page is solid ink at 600. `--adm-grad-v` is used exactly once in the whole shell (the active nav accent bar) and this file does not touch it. ══════════════════════════════════════════════════════════════════════════ `.wai-page` MUST NEVER APPEAR IN THIS PAGE'S DOM ══════════════════════════════════════════════════════════════════════════ admin-whatsapp.css carries `.admin-main:has(.wai-page) { padding: 0; overflow: hidden }`, and `.admin-main` is the panel's GLOBAL scroller. One stray `.wai-page` anywhere below `.per-page` - on the dock, on a wrapper, on a modal - stops the whole page scrolling at every viewport and drops its padding. Nothing errors; the page just clips at the fold. The docked panel's root class is `.per-wa`, which is listed on admin-whatsapp.css's own palette selectors so it gets the tokens without the behaviour. Shell tokens (`--adm-*`) are defined on `.admin-layout`, an ancestor of every selector here - never on `:root`. #8E8F9E (tertiary ink) has no token and is written out, as it is in the two neighbouring files. */ /* ══════════════════════════════════════════════════════════════════════════ 1. THE ISLAND ══════════════════════════════════════════════════════════════════════════ */ .per-page { direction: rtl; /* `start`, not `right`. The property name is what the mirror spec looks for; the logical value is what stops a side being baked in. */ text-align: start; /* The sticky budget, published once and consumed in two places. Row B's height and the tab strip's offset MUST be the same number: let row B grow with its content and the strip lands on top of it. 56 + 48 = the 104px of chrome a phone reader pays. */ --per-rowb: 56px; --per-tabs: 48px; /* THE DETAIL BAND'S HEIGHT, AND THE ONE TOKEN ON THIS PAGE THAT IS WRITTEN FROM JAVASCRIPT. Row B and the tab strip are constants because their contents are pinned to one line each. The band between them is not: it holds seven compact cells that sit on one line at 1440px, two lines at 1024px and two on a phone, and it animates continuously between that and zero every time the reader scrolls past it. There is no breakpoint expression that is true for all of those, so `usePersonDetailBand` measures the element and publishes the number here. `0px` is the value while the band is folded AND the value before the composable's first measurement, which is the safe direction to be wrong in: everything downstream is ` + var(--per-band)`, so an unset token degrades to exactly the geometry this page had before the band existed. WHAT MAY NEVER BE DERIVED FROM IT: `--per-rowb`. `.per-yield` and `.per-id .ld-nav` both use `--per-rowb` as a `row-gap` chosen to be LARGER than their own clip, which is what pushes a wrapped line out of sight entirely instead of drawing half of it. Tie that number to a thing that shrinks and half-drawn badges and half-drawn money come back (invariant C). Row B's 56px is not part of this arithmetic and must stay a constant. */ --per-band: 0px; /* ══════════════════════════════════════════════════════════════════════ ROW B'S YIELD LADDER - the row's INLINE budget, and who pays it ══════════════════════════════════════════════════════════════════════ Row B is a hard 56px holding, in one nowrap flex line: the worklist arrows, the person's name, the lead-status control, an intent glyph, two provenance pills, the enrollment line and the action cluster. THE SUM OF WHAT MUST BE THERE EXCEEDS THE ROW AT NARROW DESKTOP WIDTHS - measured, not feared: at 1025px with the sidebar expanded the row has 697px of content box and the action cluster alone measures 546.3px for a full-permission viewer. Something has to give at that width, and the only question a stylesheet can answer is WHICH THING. Four rebalances of this row (2026-08-08 and -09) each answered that question by accident: whoever had just been reported invisible was given a floor, and the deficit moved onto whoever had no floor yet. The money cell paid for the pills, the arrows paid for the money cell, and the STATUS CONTROL - which never appeared in anybody's list - paid for the arrows by being clipped to zero width while staying in the tab order. So the order is written down here, once, and every rule in section 6, section 17 and section 19 that touches this row cites the rung it implements. RUNG 1 the two PROVENANCE PILLS vanish, whole, one at a time RUNG 2 the INTENT GLYPH vanishes, whole RUNG 3 the ENROLLMENT (money) CELL vanishes, WHOLE - never cut RUNG 4 the ACTION CLUSTER'S LABELS ellipsise; the buttons stay RUNG 5 NOTHING ELSE YIELDS. The status control, the person's name and BOTH worklist arrows hold the floors below at every width and in both sidebar states. WHY THAT ORDER. Rungs 1 and 3 have a fuller second home that is on screen anyway - the pills repeat verbatim in the general detail panel under this header (on all three tabs), and the money has a whole band on the Enrollment tab. Rung 2 has NO second home, which is why it outranks the pills rather than trailing them, and it is two DOM positions earlier than it used to be for exactly that reason (see `.per-id__intent`). Rung 4 is the cluster's LABELS and never its buttons: every one of them keeps a 44px hit target and its `aria-label`, so what is lost is a word beside a glyph that already carries the meaning. Rung 5 is owner items 4, 5 and 13 - the page's only identity, its only worklist control, and the only status control on two of the three tabs. THREE INVARIANTS THE LADDER EXISTS TO KEEP, all measured in Chromium by `tests/personRowBGeometry.spec.ts` over 22 widths x 2 sidebar states x five viewer/person compositions: A. NOTHING INTERACTIVE IS EVER CLIPPED TO INVISIBILITY WHILE STAYING FOCUSABLE. Clipping is an honest failure for TEXT. For a CONTROL it is not: a keyboard user tabbed onto the invisible status `` (0.7rem here, 16px under the touch block), and a `ch` would mean three different numbers for one reservation. ALL FOUR ARE RESTATED PER BAND, in the ≤1024px and ≤767px blocks, and that is the second half of the fix. Every term in the desktop sum is a different size lower down - the arrows take the 44px touch floor on a phone, the worklist counter is hidden, the name's floor drops to 7ch and the gaps narrow - so the desktop number is not merely too big there, it is about a control that has different dimensions. The old code expressed that by handing the floor back to ZERO below 1025px, which is why the forward arrow was cut off by the nav's own clip at every phone width. A floor that is re-derived per band is a floor that can stay switched on. */ --per-nav-floor: calc(2 * 34px + 3 * 8px + 12.6ch); /* The name's own floor, and since 2026-08-09 also its flex BASIS - the two have to be the same number and the reason is the worklist counter. Line assignment inside `.ld-nav` happens before any flexible length is resolved and reads each item's hypothetical size, so with a basis of `auto` the untruncated name (measured 168.3px) claimed the whole line and pushed the "next lead" arrow off it. Pinning the basis to the floor makes the hypothetical line exactly what `--per-nav-floor` reserves - two arrows, three gaps and a 12ch name - and the name then GROWS into whatever the line has left. It is written on the name's own box, which runs at 1.05rem, which is why the nav floor above says 12.6ch for the same 12 characters. */ --per-name-floor: 12ch; --per-status-floor: 72px; --per-id-gap: 0.45rem; /* UNCHANGED by the 2026-08-10 band, and that is the point of where its fold control ended up. A 40px chevron in this row plus its gap took 47px out of the 74px of slack the row had at 1280px railed, and `.per-yield` - which is `flex: 1 0 0`, so it lives entirely on slack and never shrinks - went to zero: the money line and all three badges wrapped onto a line the row clips away, each still holding a real box and zero hit-testable pixels. The chevron is at the end of the TAB STRIP instead, which is sticky, is 48px tall, and costs this row nothing. */ --per-id-floor: calc(var(--per-nav-floor) + var(--per-id-gap) + var(--per-status-floor)); /* Row B's own gap, published because `.per-yield` has to cancel it exactly. A zero-basis item that draws nothing still costs the row one gap, and this row has no 12px to spare at 320px - so `.per-yield` carries a negative start margin of exactly this value and re-spends it as its own internal column gap. An empty yield zone then costs the row nothing at all, and a full one puts the money exactly one row gap from the name, which is where the badges used to sit. Written once, consumed by two rules. */ --per-rowb-gap: 0.75rem; /* The full-bleed reach of the two sticky rows and the tab strip. It is EXACTLY `.admin-main`'s inline padding at each width - one pixel more and the LTR scroller grows a horizontal scrollbar an RTL island can never reach, because RTL overflow runs leftward. Re-stated at each breakpoint below, and nowhere else. */ --per-bleed: 2rem; } /* ══════════════════════════════════════════════════════════════════════════ 2. RTL MIRRORS FOR THE BORROWED KITS ══════════════════════════════════════════════════════════════════════════ Every rule in this section cancels a PHYSICAL declaration from a kit that was authored left-to-right, then re-issues it logically. The `margin-left: 0` and `left: auto` halves look redundant next to the logical half. They are not: a logical property does not OVERRIDE a physical one, it coexists with it. In RTL, `margin-inline-start` resolves to `margin-right`, which never touches the base `margin-left: auto` at all - so the block ends up auto-margined on both sides and centres itself. Both halves, every time. */ /* The grey hint that trails a field label inside the modals. admin.css spaces it with `margin-left: 0.35rem`, which under RTL lays the gap down on the far side of the hint and butts the two strings together. Scoped, never smuggled into admin.css's shared group: that group is read by five other screens. */ .per-page .form-label-hint { margin-left: 0; margin-inline-start: 0.35rem; } /* Auto-margin rails. The kit pushes each of these to the physical LEFT, which is the START edge under RTL - the opposite of what they are for. */ .per-page .ld-wa-inbound { margin-left: 0; margin-inline-start: auto; } .per-page .ld-journey-ts { margin-left: 0; margin-inline-start: auto; } .per-page .ld-enroll-date { margin-left: 0; margin-inline-start: auto; } .per-page .ld-progress-over { margin-left: 0; margin-inline-start: auto; } /* Partner-journey rail: the vertical line, the dots and the step indent all sit on the physical left in the kit, which is where the list STARTS in LTR. Under RTL the start edge is the right one, so the logical half of each pair is `inset-inline-START` - not `-end`, which would park the rail on the left with the indent still on the right and the dots floating clear of both. */ .per-page .ld-journey::before { left: auto; inset-inline-start: 7px; } .per-page .ld-journey-step { padding: 0.35rem 0; padding-inline-start: 1.6rem; } .per-page .ld-journey-step::before { left: auto; inset-inline-start: 3px; } /* Payments ledger: the kit left-aligns its headers and right-aligns the row actions. Both are backwards here. */ .per-page .ld-pay-table th { text-align: start; } .per-page .ld-pay-actions { text-align: end; } /* NOT a mirror, and it will not be caught by the RTL spec (nothing physical in it). The base `.reg-enroll-status--*` set in admin.css ships `active` and `dropped` only; the `cancelled` variant exists nowhere but under `.ld-page`, and BOTH the sale picker and the sale head render it. Without this the pill on a cancelled sale renders unstyled - white text on white. */ .per-page .reg-enroll-status--cancelled { color: #6b7280; background: rgba(107, 114, 128, 0.1); border-color: rgba(107, 114, 128, 0.3); } /* Also not a mirror: the current node's ring, its drop shadow and the recommended dashed outline all paint OUTSIDE the pill, and `.llc-canvas` clips vertically. Copied verbatim from the lead card's own copy. */ .per-page .llc-canvas { padding-top: 8px; } /* The evidence and caveat lists carry landing URLs and click ids at dir="ltr". `.ld-ch-list`'s own `text-align: left` is DELIBERATE and is not mirrored (the items are English machine strings) - but with no page-level scroller to catch it, one unbreakable token would push the whole body sideways. */ .per-page .ld-ch-list { overflow-wrap: anywhere; } /* `.btn` (admin.css) never clears the UA underline, because every other consumer of it is a