/** * The Wicked — Reveal List (tw-reveal-list). * A master list of rows plus a linked detail pane, from design-reference/studio-v04.html * (the belief list L483-501 and the proof list L575-598 — one abstraction, two payloads). * * ── TWO BEHAVIOURS THAT ARE CORRECT, NOT DEFECTS ────────────────────────────── * 1. THE PANE BOX IS AS TALL AS ITS TALLEST PANEL. Every panel is rendered * server-side into ONE grid cell (`grid-area:1/1`) and cross-faded on opacity. * That is the point: the page does not jump when the reader changes rows, at * any width, with no JS height pinning. Do not `display:none` an inactive * panel — it would collapse the shared cell and reintroduce the jump. * 2. ON A PHONE A TAP SCROLLS NOTHING BY ITSELF, because the pane sits below the * list once stacked. Mitigated only by the narrow scrollIntoView nudge in * widget-reveal-list.js, which fires on a pointer activation, only when the * list is actually stacked, and only when the pane is fully off-screen. * * ── THREE OWNERS OF `grid-template-columns`, ONE BAND EACH ──────────────────── * Desktop `list_ratio` — the control's own declaration, (0,4,0), un-mediated. * 768-1024 `stack_at` at the Tablet tab — (0,5,0) via `.tw-rl.tw-rl`, inside * Elementor's `@media(max-width:1024px)`. No default at any breakpoint. * <=767 THIS FILE, by setting `--tw-rl-tracks` — see the block at the end. * A stylesheet rule can never OUT-RANK a control's declaration; it can always * change what that declaration READS. That is why the composed track list lives * inside `var(--tw-rl-tracks, …)` and why the fallback below must stay in sync * with `list_ratio`'s default (0.82fr). PROJECT-NOTES §6a. * * ── TWO PROPERTIES THIS FILE SHARES WITH A CONTROL (0.4.3) ──────────────────── * `order` — NOTHING here declares it, at any width. `pane_first` owns it * outright, and that is deliberate: putting the pane above the * list at <=767 must NOT become a fourth owner of * `grid-template-columns` (see the three above). * `row-gap` — this file's `row-gap:48px` on .tw-rl owns desktop and tablet. * `stack_gap` (no default at any breakpoint) writes the same * property at (0,4,0) only on instances that set it, and the * page sets it at Mobile only. `row-gap`, never the `gap` * shorthand: that would flatten the column gap's clamp(). * * ── A NOTE ON THE DUPLICATED DEFAULTS IN THIS FILE ──────────────────────────── * Several declarations here repeat a control's default value (the panel fade * duration, the statement/body max-widths, the media aspect ratio). Those are * graceful-degradation fallbacks, not live rules — the control compiles at * (0,4,0) and wins. They are safe ONLY because no media query in this file tries * to change the same property. Where one would have (the active dash width at * <=767), the property is owned by the control at both breakpoints instead and * there is no rule here at all. Never add a media query for a property a control * already writes without re-reading PROJECT-NOTES §6a first. */ .tw-rl { display: grid; /* Fallback MUST match list_ratio's default. */ grid-template-columns: var(--tw-rl-tracks, minmax(0, .82fr) minmax(0, 1fr)); column-gap: clamp(48px, 6vw, 96px); /* DESIGN-GUIDELINES §4, the recurring grid */ row-gap: 48px; /* only observed once stacked */ align-items: start; width: 100%; } .tw-rl__list { min-width: 0; } /* Longhands, never the `border` shorthand: a shorthand built from a var that fails to resolve computes to `none` and vanishes silently (PROJECT-NOTES §6b). */ .tw-rl__rows { border-top-width: 1px; border-top-style: solid; border-top-color: var(--e-global-color-cdc1318, rgba(255, 255, 255, .09)); } /* --- one row -------------------------------------------------------------- The TRACK LIST is a static stylesheet var driven by the root modifier classes. No control writes `grid-template-columns` on .tw-rl__row, so the stylesheet owns this property outright — unlike .tw-rl, where list_ratio does. Do not add a control for it without re-reading PROJECT-NOTES §6a. Rows are real