/* ====================================================================================================== * Relationship Popup Engine — shared styles (cross-pillar lego block) * Filename: assets/css/partials/relationship-popup.css * Version: v1.10.0 * Purpose: Styles the relationship-popup content (relationship-popup-engine.js) rendered inside an * SDXStage panel slot ([data-slot="relationship"]). Shared across Eco Guilds, Viridians and * MamaDEX — pillar identity is carried ONLY as a narrow accent via each relationship block's * [data-relationship] attribute, never as a large saturated fill. Component surface/text * tokens (--rpe-surface / --rpe-text / --rpe-muted / --rpe-border / --rpe-story-surface / * --rpe-shadow) are ISOLATED, fixed-light values — this component does NOT consume the * site's page-theme tokens (--card / --fg / --muted / --border / --surface-alt / * --card-shadow) and does NOT change with [data-theme] on . See v1.3.0 changelog. * License: © Buktika, 2026. All rights reserved. * * Changelog: * v1.10.0 — 2026-07-17 — LOWER-PANEL ACCENT KEY CORRECTION (caught live in the Viridians * fixture, not by the v1.9.0 static contract tests). The v1.9.0 rules below matched * .rpe-panel[data-relationship-panel=""] — but that attribute holds the * relationship's own KEY, not its accent, and Viridians' bound guild relationship has * key:"eco_guild" while accent:"eco". "eco_guild" never matched "eco", so --rpe-accent stayed * unset for that panel and .rpe-story__chev fell through to the generic violet default — the * exact reported defect, reproducible again through a different door. relationship-popup- * engine.js v2.3.0's relationshipPanelHtml() now also emits data-accent-panel="" * (data-relationship-panel is unchanged and still key-based, since * activateTopLevelBlock()'s show/hide toggle must keep matching by relationship identity). * The four rules below now key off data-accent-panel instead, plus a fifth ("viridians") * added for the same reason the block-level mapping above already has one — a story panel * could just as plausibly present a bound Viridians relationship from inside another * pillar's popup. * v1.9.0 — 2026-07-17 — ACTION ICONS AND HYPERLINK COLOUR STATES (owner instruction, "Correct * relationship-popup action icons and hyperlink colour states"). The lower story panel's own * chevron (.rpe-story__chev) previously hardcoded `background: var(--rpe-focus, #8b5cf6)` — * --rpe-focus is never actually declared as a custom property anywhere in this file (it only * ever resolves through its fallback), so every story chevron rendered the SAME violet * regardless of which pillar's story was showing, which is exactly why an ECO Conservation * story's action circle read as MamaDEX violet in the reported screenshot — a coincidence of * --sdx-color-mama-violet also being #8b5cf6, not an intentional MamaDEX association. FIXED: * new `.rpe-panel[data-relationship-panel="…"]` mapping (mirrors the existing * `.rpe-block[data-relationship="…"]` one above it exactly, same four keys) sets --rpe-accent * on the panel wrapper relationshipPanelHtml() already emits data-relationship-panel on, so a * routed block's own route-story panels (nested inside it) and every plain relationship's * Storybook-shaped panel inherit the correct pillar accent by cascade. `.rpe-story__chev` now * reads `var(--rpe-accent, var(--rpe-focus, #8b5cf6))` — the same two-tier fallback pattern * `.rpe-block` itself already uses — instead of jumping straight to the generic default. * Also added `:link/:visited/:hover/:focus-visible/:active` states for `.rpe-secondary__link` * (the one genuine inline text hyperlink this component renders) using two new isolated * tokens, --rpe-link/--rpe-link-visited, declared alongside the existing --rpe-* block on both * `.sdx-stage[data-stage-variant]` and `.rpe-root` (same placement rule as every other --rpe-* * token, per POINT 2's original placement note). Previously the link's only colour was * --rpe-muted with no distinct :visited treatment — visually closer to plain de-emphasised * text than a hyperlink. The action-circle icon itself never uses `:visited` styling (it isn't * real link text, and relationship-popup-engine.js's CHEVRON_SVG carries no colour of its own * beyond `currentColor`), so it can never pick up a browser-default visited-purple regardless * of the surrounding element's visited state. * v1.8.0 — 2026-07-17 — NO-MEDIA RENDERING CORRECTION (owner instruction, "Final pre-migration * correction — panel lifecycle, focus containment and no-media rendering", point 3 — * CSS half; see relationship-popup-engine.js v2.1.0 for the markup half). A published story * with no image (relationship-popup-engine.js's `hasMedia` check) no longer emits any * `.rpe-story__media`-family element at all — the dead `.rpe-story__media--empty` rule * (previously the empty-box placeholder this correction removes) is deleted. New * `.rpe-story.is-text-only { grid-template-columns: 1fr; }` collapses the two-column * media|prose grid to one column for exactly this case, so no empty gap remains where the * thumbnail column used to be — the same technique the mobile breakpoint below already uses * for a different reason (narrow viewport), now available above that breakpoint too, scoped * only to the text-only case. * v1.7.0 — 2026-07-16 — COMPLETE RELATIONSHIP-POPUP PARITY FOR VIRIDIANS AND MAMADEX (owner * instruction). Generalised the v1.6.0 "unified tablist" styling so it is no longer named after * ECO specifically (relationship-popup-engine.js v1.8.0 companion change): renamed * .rpe-block--eco -> .rpe-block--routed everywhere (the class now applies to ANY relationship * block that carries its own internal routes, not only Eco Guild's). Removed the now-dead * .rpe-block.is-actionable/.is-unavailable whole-card-link states and their hover/chevron- * transform sub-rules (legacyBlockHtml(), their only source, was deleted in engine v1.8.0 — every * relationship block is a selector now, styled via .rpe-tab/.rpe-tab.is-active/ * .rpe-tab[data-status] instead). Kept .rpe-block__chev (still used by a routed block's own * explore control) and .rpe-block__media/--icon (kept, and now also reachable from a PLAIN * block's own imagery, not only a routed one — see genericBlockInnerHtml() in the engine). * No new selectors needed for Viridians/MamaDEX specifically — their blocks reuse the exact same * .rpe-tab/.rpe-panel rules Eco Guild's MamaDEX/Reporters/EduTower blocks already used. * v1.6.0 — 2026-07-16 — CORRECT THE LAB INTERACTION AND VISITOR TERMINOLOGY (owner instruction). * relationship-popup-engine.js v1.7.0 turns the four top-level blocks into one ARIA tablist for * ecoRoutes-shaped contracts (Eco Guild) — added .rpe-tab (shared cursor/hover/focus-visible/ * .is-active treatment for all four blocks, including ECO) and * .rpe-tab[data-status="unavailable"] (honest muted-text state for a block with no published * relationship yet, WITHOUT disabling pointer/keyboard selection — distinct from the legacy * .is-unavailable rule below, which also sets cursor:default and is only ever used by * legacyBlockHtml()'s non-ecoRoutes whole-card links). Removed .rpe-block--eco's own * cursor:default — the ECO card is now itself a selectable tab like the other three, so it * needs the same pointer cursor .rpe-tab gives them. No new section, no layout change — the * 2×2 grid and the single shared lower panel are visually unchanged from v1.5.0; only which * elements are clickable and how the active one is indicated changed. * v1.5.0 — 2026-07-16 — RES/SGR MUST STAY INSIDE THE ECO BLOCK (owner correction, superseding * v1.4.0 below, rejected: "It breaks the approved four-block structure"). Removed * .rpe-eco-routes/__eyebrow/__selector/__tab/__panel entirely — no section after the grid. * Added .rpe-block--eco (the ECO card itself, always a plain div — cursor:default, not a * click target), .rpe-block__routes (tab row), .rpe-block__route-tab (pill button, reuses * --rpe-accent so it matches ECO's own green), .rpe-block__route-summary (compact in-card * summary line). The shared story pane below the grid keeps its original .rpe-story styling * completely unchanged — only relationship-popup-engine.js's new ecoBlockHtml()/ * ecoRouteStoryHtml() changed where the tab CONTROL lives, not how the story content looks. * v1.4.0 — 2026-07-16 — APPROVED FOUR-BLOCK ARCHITECTURE CORRECTION (owner instruction, later * superseded above). Added .rpe-eco-routes/__eyebrow/__selector/__tab/__panel — a separate * section after the grid. Rules retained in change history only; removed in v1.5.0. * v1.3.2 — 2026-07-15 — LIVE VERIFICATION FIX, part 2 (POINT 7): the v1.3.1 corner-inset fix was * not the whole story — a debug outline test proved the button's box was correctly sized and * positioned (not clipped by overflow at all); the real cause was .rpe-head's z-index:2 (needed * for its sticky positioning) painting its own opaque background straight over the close * button, which had no z-index of its own. Added z-index: 5 to the close button. Verified live: * full circle and X icon now render correctly. * v1.3.1 — 2026-07-15 — LIVE VERIFICATION FIX (POINT 7, caught in the real-browser screenshot * pass against the actual Eco Guild popup): the close button at top/right: 0.6rem sat closer * to the panel's corner than the panel's own border-radius (1.1rem), so the panel's * `overflow: hidden` clipped roughly half the circular button — confirmed live via a zoomed * screenshot. Repositioned to top/right: 1.1rem (matching the panel's own corner radius, which * fully clears the curved clip region) and widened .rpe-head's right padding from 2.5rem to * 4rem to keep clearing the relocated button. * v1.3.0 — 2026-07-15 — SHARED POPUP VISUAL PARITY — REAL DEFECT PASS (owner rejection, same-named * doc, 2026-07-15: "The map repair is accepted. The popup UI is not accepted."). * * POINT 1 — Explicit SDXStage variant. All width/position/surface/scrolling/close-control CSS * that used to be scoped via the fragile `.sdx-stage.is-anchored:has([data-slot="relationship"])` * / `.sdx-stage:has([data-slot="relationship"])` selectors is now scoped ONLY to the stable * `[data-stage-variant="relationship-popup"]` selector, set by relationship-popup-engine.js * passing `variant: 'relationship-popup'` to `SDXStage.open()` (sdx-stage.js now applies it as * `data-stage-variant` on the active panel/modal element and clears it on close — see sdx-stage.js * changelog). :has() is a live DOM query the browser must re-evaluate; a plain attribute selector * set explicitly by the caller is the "governed shared variant" the rejection asked for. No pillar * page (mamadex-locations.html, viridians-location-invitation.html, eco-guilds-farms.html) applies * its own stage skin — this file is the only place stage geometry for this variant is defined. * * POINT 2 — Isolated component tokens, root-cause audit. LIVE COMPUTED-STYLE AUDIT (via * document.querySelector + getComputedStyle against the actual MamaDEX popup, 2026-07-15) found * the exact inherited collision: this stylesheet's rules previously read var(--card) / var(--fg) / * var(--muted) / var(--border) / var(--surface-alt) / var(--card-shadow) directly — the SAME * global tokens themes.css flips between a light and a dark block on `[data-theme]` on for * ordinary page content. Meanwhile sdx-stage.css's OWN panel background * (var(--sdx-color-ui-popup-surface) = #123543, HARD RULE "always dark by design", never * theme-responsive — see sdx-stage.css header) sat directly behind this content with NO relation * to the page theme at all. Two consequences, both confirmed live: (a) when the page's stored/ * system theme resolved to dark, --card/--fg resolved to near-black-on-dark-card values rendered * on top of the panel's own permanently-dark #123543 shell — text and card boundaries lost nearly * all contrast against each other, reported as an "illegible dark shell"; (b) even in light theme, * the light --card content sat inset inside the panel's own dark padding margin (owned by * sdx-stage.css's shared .sdx-stage-inner padding, not by this file), leaving a visible dark seam * around the light card. NEITHER of these is a page-theme bug to fix with more theme-awareness — * the popup's surface was never supposed to be theme-coupled at all; it is a fixed-identity * component, like the panel shell itself, just light instead of dark. FIX: every rule below now * reads the new isolated --rpe-* custom properties (fixed light hex values, declared once, see the * token block just below this note) instead of the global --card/--fg/--muted/--border/ * --surface-alt/--card-shadow chain. No [data-theme="dark"] override was added anywhere in this * file — the component simply never varies. No `!important` was used anywhere in this fix (the * rejection explicitly forbids "random !important declarations" as a patch) — the collision is * resolved by NARROWING scope (the new [data-stage-variant] selector owns the panel-shell * background/border/box-shadow for this variant only, at the same specificity the base * sdx-stage.css panel rule already has, so it wins on cascade order + equal specificity without * needing !important) rather than by brute-forcing a higher-specificity/!important override on top * of the old selectors. * Token placement: the --rpe-* custom properties are declared on BOTH * `.sdx-stage[data-stage-variant="relationship-popup"]` (the true DOM boundary of this component — * SDXStage's own close-button lives as a sibling of .rpe-root inside the same stage element, not a * descendant of it, and CSS custom properties only inherit downward, so anchoring the tokens at * the shared stage-level ancestor is what lets the close-control read the identical isolated * values) AND on `.rpe-root` itself (redundant given the above, but keeps .rpe-root a * self-contained isolation boundary in its own right, matching the rejection's literal token * placement and guarding against a future reuse of this engine inside a different SDXStage * variant/mode). * * POINT 4 — Pillar colour independent of actionability. `.rpe-block.is-unavailable` previously set * `--rpe-accent: var(--border)`, which neutralised the pillar accent to grey whenever a * relationship was unavailable — directly contradicts "colour treatment must NOT depend on * actionability." Removed. The accent (now driven by the new `[data-relationship]` attribute — * relationship-popup-engine.js always emits this, `[data-accent]` kept as a compatibility alias * pointing at the same value) is now identical in the available and unavailable states; only * opacity/muted text treatment communicates the unavailable state, never a colour swap. * * v1.2.0 — 2026-07-15 — RUNTIME REGRESSION REPAIR. Width restored, scroll containment fixed, * unpublished Storybook media collapse fixed. (Full detail preserved from prior version — see * git history / prior file revision; superseded in structure, not intent, by v1.3.0 above.) * ====================================================================================================== */ /* ── Stage shell (relationship-popup variant only) ── Everything in this block replaces the former `.sdx-stage.is-anchored:has([data-slot="relationship"])` hack (POINT 1). Scoped purely to the explicit variant attribute SDXStage sets from relationship-popup-engine.js's `SDXStage.open({ variant: 'relationship-popup', ... })` call — no :has() re-evaluation, no page-specific stage skin anywhere else in the codebase. */ .sdx-stage[data-stage-variant="relationship-popup"] { /* Isolated component tokens (POINT 2) — declared here too so the panel CHROME (this rule, plus the close-control rules below, which are outside .rpe-root) reads the exact same fixed values as the engine's own content. Fixed hex, not a var() reference to --card/--fg/etc — this is the whole point: the popup never changes with [data-theme] on . Values match the site's existing LIGHT-theme card tokens (global.css primitives) exactly, so the popup keeps the site's established light-card language, it just never SWITCHES away from it. */ --rpe-surface: #f8f5f2; --rpe-text: #111827; --rpe-muted: #374151; --rpe-border: rgba(211, 196, 170, 0.55); --rpe-story-surface: hsl(60 20% 98%); --rpe-shadow: 0 14px 30px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); /* Hyperlink colour states (v1.9.0) — isolated tokens, same fixed-light-value rule as every other --rpe-* token: never sourced from the page's own [data-theme] link colours. Unvisited is a clear "this is a link" blue (distinct from body text and from any pillar accent); visited is a muted warm brown — deliberately NOT a purple, so it can never read as an unrelated MamaDEX association or the browser's own default visited-purple. */ --rpe-link: #2a4d8f; --rpe-link-visited: #6b4226; width: min(44rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - var(--header-height, 4.8125rem) - 3rem); display: flex; flex-direction: column; /* The base .sdx-stage rule (sdx-stage.css) sets overflow-y:auto directly on it, which would scroll the close button and header along with the body on any popup taller than max-height. Overriding to hidden here and moving the actual scroll to .sdx-stage-slot below keeps the header/close permanently in view and lets only the relationship grid + Storybook scroll. */ overflow: hidden; background: var(--rpe-surface); color: var(--rpe-text); border: 1px solid var(--rpe-border); border-radius: 1.1rem; box-shadow: var(--rpe-shadow); } /* .sdx-stage-inner wraps the close button + (hidden) title + .sdx-stage-slot. It must not add its own scrollbar — the slot below owns scrolling — but it does need to shrink correctly inside the now- bounded, flex-column panel above. */ .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* required for a flex child to actually respect its parent's height clamp */ overflow: hidden; } /* The relationship grid + Storybook now live in the ONLY scrolling region. The engine's own .rpe-head is the first element inside .rpe-root, itself the first (only) element inside this slot, so making it position:sticky (below) keeps it visually pinned to the top of this scrollport. */ .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-slot { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* The popup renders its own header (title + location), so hide the engine's generic title bar. */ .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-title { display: none; } /* Close control — scoped to the relationship-popup variant only (does not affect any other SDXStage consumer). >=44x44px hit area per the accessibility requirement. Positioned absolute against .sdx-stage-inner (which no longer scrolls as a whole — see above), so it stays fixed in the panel's top-right corner regardless of how far the grid/Storybook below has scrolled. Reads the same isolated --rpe-* tokens as the rest of the component (POINT 2) — never the page's --fg/--border/--surface-alt. */ .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-close { /* POINT 7 FIX (caught live, real-browser screenshot pass): the panel this button sits inside has border-radius: 1.1rem AND overflow: hidden (needed to contain scrolling to the body only — see the stage-shell rule above). Any child positioned closer to a corner than the corner's OWN radius gets partially clipped by that curve regardless of the child's own shape — verified live: at top/right: 0.6rem (well inside the 1.1rem curve) roughly half the circular close button was invisible, clipped by the panel's own rounded corner. Insetting by the SAME amount as the panel's border-radius (1.1rem) fully clears the curved region — the button's bounding box then starts exactly where the straight edges resume. */ top: 1.1rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; background: var(--rpe-story-surface); border: 1px solid var(--rpe-border); /* POINT 7 FIX, part 2 (caught live — the corner-inset fix alone was not enough): .rpe-head is position:sticky with z-index:2 (needed so it stays above the scrolling grid/Storybook content beneath it). This close button has position:absolute with no z-index of its own (stacks at the default "auto" level), which is BELOW any positive-z-index box in the same stacking context — .rpe-head's own opaque background was painting straight over the button, since .rpe-head's border-box (no horizontal inset at the container level, only internal padding) spans the full panel width and overlaps the button's position entirely. Verified live: forcing z-index above 2 made the previously half-invisible button (and its X icon) render fully and correctly. z-index: 5 keeps a clear margin above .rpe-head's 2 without being a "magic number" collision risk against any other z-index in this component (nothing else here sets one above 2). */ z-index: 5; } .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-close::before, .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-close::after { background: var(--rpe-text); } .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-close:hover { background: var(--rpe-border); } .sdx-stage[data-stage-variant="relationship-popup"] .sdx-stage-close:focus-visible { outline: 2px solid var(--rpe-focus, #8b5cf6); outline-offset: 2px; } .sdx-stage[data-stage-variant="relationship-popup"] [data-slot="relationship"] { padding-bottom: 0.5rem; } /* ── .rpe-root — component isolation boundary (POINT 2) ── Every element the engine renders lives inside this wrapper (relationship-popup-engine.js v1.4.0 wraps buildHtml()'s output in
). Tokens redeclared here (same fixed values as the stage-level declaration above) so .rpe-root is a self-contained isolation boundary in its own right, not solely reliant on the ancestor stage rule. */ .rpe-root { --rpe-surface: #f8f5f2; --rpe-text: #111827; --rpe-muted: #374151; --rpe-border: rgba(211, 196, 170, 0.55); --rpe-story-surface: hsl(60 20% 98%); --rpe-shadow: 0 14px 30px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); /* Hyperlink colour states (v1.9.0) — isolated tokens, same fixed-light-value rule as every other --rpe-* token: never sourced from the page's own [data-theme] link colours. Unvisited is a clear "this is a link" blue (distinct from body text and from any pillar accent); visited is a muted warm brown — deliberately NOT a purple, so it can never read as an unrelated MamaDEX association or the browser's own default visited-purple. */ --rpe-link: #2a4d8f; --rpe-link-visited: #6b4226; background: var(--rpe-surface); color: var(--rpe-text); } /* ── Header: mark + eyebrow/title/location, thin shared pillar-accent divider ── position:sticky — this is the FIRST element inside the slot's own scrollport, so sticky top:0 pins it there as the grid/Storybook below it scroll underneath; background must be opaque so that scrolling content doesn't show through. */ .sdx-stage [data-slot="relationship"] .rpe-head { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; margin: 0 0 1rem; padding: 0 4rem 0.85rem 0; /* right padding clears the corner close button — widened alongside the POINT 7 close-button reposition above (1.1rem inset + 2.75rem button = 3.85rem minimum) */ background: var(--rpe-surface); border-bottom: 2px solid var(--rpe-focus, #8b5cf6); } /* Entity-pillar divider colour (§E-equivalent) — a SEPARATE mapping from the per-relationship-block [data-relationship] one below: this colours the header's OWN divider from the entity's own home pillar (relationship-popup-engine.js sets [data-pillar] from entity.pillar), never from a sidecar-supplied colour. Same 5 shared tokens the relationship blocks use, plus 'viridians' (a Viridians location IS an entity that can own a popup, even though 'viridians' is never one of the four universal relationship-block keys). Unset/unrecognised pillar keeps the engine's neutral default (--rpe-focus) set above. Scoped identically to the base .rpe-head rule (same specificity) — see the v1.2.0 changelog note preserved in git history for why this scoping matters. VISUAL PARITY (2026-07-15): verified this mapping renders identically on eco / mamadex / reporters / edutower in BOTH the available and unavailable relationship states — this rule only ever colours the HEADER divider (the entity's own pillar), which never had an actionability-dependent code path. */ .sdx-stage [data-slot="relationship"] .rpe-head[data-pillar="eco"] { border-bottom-color: var(--sdx-color-green-deep, #2e5d3a); } .sdx-stage [data-slot="relationship"] .rpe-head[data-pillar="mamadex"] { border-bottom-color: var(--sdx-color-mama-violet, #8b5cf6); } .sdx-stage [data-slot="relationship"] .rpe-head[data-pillar="reporters"] { border-bottom-color: var(--sdx-color-mama-amber, #f5b014); } .sdx-stage [data-slot="relationship"] .rpe-head[data-pillar="edutower"] { border-bottom-color: var(--sdx-color-edutower-blue, #56747b); } .sdx-stage [data-slot="relationship"] .rpe-head[data-pillar="viridians"] { border-bottom-color: var(--sdx-color-viridians-card-mid, #4b4261); } /* Entity-mark slot — fixed ~4.25rem (68px, inside the accepted 64-72px range) tile, never collapses. Sits flush with the top of the header, left of the eyebrow/title column, identical position across every pillar. */ .rpe-head__mark { flex: 0 0 auto; width: 4.25rem; height: 4.25rem; border-radius: 0.65rem; overflow: hidden; background: var(--rpe-story-surface); border: 1px solid var(--rpe-border); display: flex; align-items: center; justify-content: center; } .rpe-head__mark[data-kind="portrait"] { border-radius: 50%; } .rpe-head__mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .rpe-head__mark[data-kind="logo"] img, .rpe-head__mark[data-kind="emblem"] img { object-fit: contain; padding: 0.4rem; } /* No real asset resolved yet — engine-owned generic fallback (never an empty box, never a broken image): a monogram tile tinted with whichever pillar colour the header divider above is using. */ .rpe-head__mark--fallback { background: color-mix(in srgb, var(--rpe-focus, #8b5cf6) 14%, var(--rpe-story-surface)); } .rpe-head[data-pillar="eco"] .rpe-head__mark--fallback { background: color-mix(in srgb, var(--sdx-color-green-deep, #2e5d3a) 16%, var(--rpe-story-surface)); } .rpe-head[data-pillar="mamadex"] .rpe-head__mark--fallback { background: color-mix(in srgb, var(--sdx-color-mama-violet, #8b5cf6) 16%, var(--rpe-story-surface)); } .rpe-head[data-pillar="reporters"] .rpe-head__mark--fallback { background: color-mix(in srgb, var(--sdx-color-mama-amber, #f5b014) 16%, var(--rpe-story-surface)); } .rpe-head[data-pillar="edutower"] .rpe-head__mark--fallback { background: color-mix(in srgb, var(--sdx-color-edutower-blue, #56747b) 16%, var(--rpe-story-surface)); } .rpe-head[data-pillar="viridians"] .rpe-head__mark--fallback { background: color-mix(in srgb, var(--sdx-color-viridians-card-mid, #4b4261) 16%, var(--rpe-story-surface)); } .rpe-head__mark-initial { font-size: 1.5rem; font-weight: 700; color: var(--rpe-text); line-height: 1; } /* Canonical pillar-mark fallback tier (POINT 3) — an intermediate tier between a real sidecar-resolved asset and the last-resort monogram: a fixed, always-available pillar glyph, used when the sidecar has no entity-specific asset AND when a resolved fails to load at runtime (relationship-popup-engine.js wires the img's onerror to swap data-kind to "pillar-fallback" and re-render this tier rather than leaving a broken image icon). */ .rpe-head__mark[data-kind="pillar-fallback"] { display: flex; align-items: center; justify-content: center; } .rpe-head__mark[data-kind="pillar-fallback"] .rpe-head__mark-glyph { width: 60%; height: 60%; border-radius: 0.35rem; background: currentColor; opacity: 0.85; } /* Pillar-fallback glyph colour — same 5 shared tokens as the header divider / monogram tint above. Default (unset/unrecognised pillar) inherits .rpe-root's --rpe-text so the glyph is always visible even without a matched pillar. */ .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--rpe-text); } .rpe-head[data-pillar="eco"] .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--sdx-color-green-deep, #2e5d3a); } .rpe-head[data-pillar="mamadex"] .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--sdx-color-mama-violet, #8b5cf6); } .rpe-head[data-pillar="reporters"] .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--sdx-color-mama-amber, #f5b014); } .rpe-head[data-pillar="edutower"] .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--sdx-color-edutower-blue, #56747b); } .rpe-head[data-pillar="viridians"] .rpe-head__mark[data-kind="pillar-fallback"] { color: var(--sdx-color-viridians-card-mid, #4b4261); } .rpe-head__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 auto; } .rpe-head__eyebrow { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rpe-muted); font-weight: 700; } .rpe-head__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.9rem; } .rpe-head__title { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--rpe-text); font-weight: 700; letter-spacing: -0.01em; font-size: 1.35rem; line-height: 1.16; } .rpe-head__loc { flex: 0 1 auto; color: var(--rpe-muted); font-size: 0.86rem; } /* Mobile (one shared breakpoint, not per-pillar): the mark shrinks slightly rather than disappearing, so it still reads as a stable slot at any width. */ @media (max-width: 26rem) { .rpe-head__mark { width: 3.25rem; height: 3.25rem; } .rpe-head__mark-initial { font-size: 1.15rem; } } /* ── 2x2 relationship grid ── Interactive blocks are real elements (free keyboard support); unavailable blocks are plain
s — no pointer cursor, no hover lift, no chevron. */ .rpe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; } .rpe-block { --rpe-accent: var(--rpe-focus, #8b5cf6); --rpe-tint: color-mix(in srgb, var(--rpe-accent) 8%, transparent); position: relative; display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; text-decoration: none; color: inherit; background: var(--rpe-tint); border: 1px solid var(--rpe-border); border-left: 0.28rem solid var(--rpe-accent); border-radius: 0.65rem; padding: 0.7rem 0.85rem 0.75rem 0.85rem; min-height: 44px; /* Reset for the .rpe-block[type="button"] case (same-page action blocks, e.g. Eco Guild's map fly-to) so a