/* ============================================================================= matching-section-im.css — IndianMarriage adaptation layer for the shared, SHARED_PORTAL-ported matching-section.css component styles. matching-section.css is kept ADDITIVE + TOKEN-ONLY and forbids a local :root, so IM-specific overrides that it can't host live here instead. Loaded ONLY by the sibling matching pages that render the shared .mx-* layer (daily-picks, my-matches-hub, saved-profiles), immediately AFTER matching-section.css. Two fixes, both scoped so they can only touch those pages (no global tokens.css change, no fleet regression): 1. TOKEN BRIDGE — dark-mode legibility of .mx-* text/borders. 2. EMBEDDED DRAWER — keep the slide-over an overlay inside the dashboard iframe. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. TOKEN BRIDGE (SHARED_PORTAL vocabulary -> IM canonical). matching-section.css resolves colour through portal-vocabulary custom properties that IM's design system does NOT define — --text-primary, --text-secondary, --text-muted, --border-color, --color-error. Unmapped, every reference falls through to its hard-coded LIGHT fallback and never flips in dark mode, so on dark surfaces the .mx-* card / chip / drawer copy and 1px borders paint dark-on-dark (invisible). Light mode looked correct -> latent bug. Bind each portal alias to IM's canonical --color-* token (main.css / tokens.css). Those already flip under @media (prefers-color-scheme: dark) and the html.dark / [data-theme="dark"] toggles (applied on ), so text + borders now track the (already-flipping) surfaces in BOTH modes. ADDITIVE + COLOUR-NEUTRAL: no new colour values — the resolved LIGHT values equal the old hard-coded fallbacks to within an imperceptible shade, so light mode is unchanged. :root scope suffices because dark mode is toggled on (documentElement). (--text-muted is bridged for completeness; matching-section.css does not use it.) ----------------------------------------------------------------------------- */ :root { --text-primary: var(--color-text-primary, #1f2937); --text-secondary: var(--color-text-secondary, #6b7280); --text-muted: var(--color-text-muted, #9ca3af); --border-color: var(--color-border, #e5e7eb); --color-error: var(--color-danger, #dc2626); } /* ----------------------------------------------------------------------------- 2. EMBEDDED DRAWER OVERLAY. matching-section.css:418-426 forces `html.page-mode-embedded .mx-drawer { position: static }` "so nothing floats over content inside the dashboard iframe". But position:fixed is resolved against the IFRAME's own viewport, so a fixed drawer is clipped to — and correctly overlays — just the embedded workspace; it cannot escape into the parent dashboard chrome. The static rule instead drops the "why this match" / saved-searches slide-over in-flow BELOW the results grid (often below the fold), so opening it reads as a no-op. Re-assert the position:fixed right-side slide-over when embedded (mobile: full width). Same specificity as the matching-section.css embedded rule, and this file loads AFTER it, so these win by source order; .is-open is +1 class so the open-state transform beats the base. Scoped to html.page-mode-embedded, which only these pages ever stamp on . ----------------------------------------------------------------------------- */ html.page-mode-embedded .mx-drawer-backdrop { position: fixed; background: rgba(15, 23, 42, 0.45); } html.page-mode-embedded .mx-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(28rem, 92vw); transform: translateX(100%); box-shadow: var(--shadow-5, 0 25px 50px -12px rgba(0, 0, 0, 0.25)); border-top: 0; } html.page-mode-embedded .mx-drawer.is-open { transform: translateX(0); } @media (max-width: 44rem) { html.page-mode-embedded .mx-drawer { width: 100%; } }