/* ============================================================ DC · SVG CHART TEXT ≥16px ON PHONES - prepared 18 Jul 2026, NOT deployed. Problem (verified live on /customer-profitability-analysis/ and /tdabc-vs-abc/ at 375px): inline-SVG charts (cnp-fig-restore.php, viewBox 760xH) and Fable diagrams (cnp-diagrams.js, viewBox 720/760x420) scale to ~0.35-0.40, so renders at 3.8-6.8px effective. Unreadable. Fix (viewBox/scale approach - font sizes are baked as SVG attributes, so a plain CSS floor cannot reach 16px effective): on <=480px the figure becomes a horizontal pan container and the SVG renders at its readable width (1100px => scale 1.45-1.53). Every text lands at >=17.4px effective (measured live). The two smallest baked tiers (10-11.5) are additionally floored to 12 units via attribute selectors so nothing stays behind. Verified live: 31 text nodes, zero new clipping vs baseline. Softer variant: change 1100px to 760px below => scale 1.0, smallest text ~12px effective, much shorter pan. Miguel's call. Deploy: coachfocus-child theme root + dc_svgtext-mobile-enqueue.php in mu-plugins (same pattern as aud-mobile-polish-enqueue.php). Does not touch aud-d_mobile-polish.css selectors (chips, kickers, captions-color) - no collision. Reversible: delete both files. ============================================================ */ @media (max-width: 480px){ /* 1 · figure becomes a pan container */ figure.fig, figure.cnp-diagram-fig, figure.cnp-fig{ overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* 2 · SVG renders at readable width (scale ~1.45 on the 760 viewBox) */ figure.fig > svg, figure.cnp-diagram-fig > svg.cnp-diagram, figure.cnp-fig > svg.cnp-diagram{ min-width: 1100px; } /* 3 · floor the two smallest baked tiers (10/10.5/11/11.5 -> 12 units; 12 units x 1.45 scale = 17.4px effective) */ figure.fig svg text[font-size="10"], figure.fig svg text[font-size="10.5"], figure.fig svg text[font-size="11"], figure.fig svg text[font-size="11.5"], figure.cnp-diagram-fig svg text[font-size="10"], figure.cnp-diagram-fig svg text[font-size="10.5"], figure.cnp-diagram-fig svg text[font-size="11"], figure.cnp-diagram-fig svg text[font-size="11.5"], figure.cnp-fig svg text[font-size="10"], figure.cnp-fig svg text[font-size="10.5"], figure.cnp-fig svg text[font-size="11"], figure.cnp-fig svg text[font-size="11.5"]{ font-size: 12px; /* SVG user units, pre-scale */ } /* 4 · caption stays put while the reader pans the chart */ figure.fig figcaption, figure.cnp-diagram-fig figcaption, figure.cnp-fig figcaption{ position: sticky; left: 0; max-width: calc(100vw - 64px); } /* 5 · quiet Instrument pan cue above the chart (CSS-only, sticky so it never drifts while panning). Hidden again on wider screens. */ figure.fig::before, figure.cnp-diagram-fig::before, figure.cnp-fig::before{ content: "drag to pan \2192"; display: block; position: sticky; left: 0; width: max-content; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6E6253; background: #F5EEE1; border: 1px solid #DED3BF; border-radius: 999px; padding: 4px 12px; margin: 0 0 10px; } /* 6 · cue text per language (site convention: lang by path, but WP sets , which CSS can reach) */ html[lang^="pt"] figure.fig::before, html[lang^="pt"] figure.cnp-diagram-fig::before, html[lang^="pt"] figure.cnp-fig::before{ content: "arraste para ver \2192"; } html[lang^="es"] figure.fig::before, html[lang^="es"] figure.cnp-diagram-fig::before, html[lang^="es"] figure.cnp-fig::before{ content: "desliza para ver \2192"; } html[lang^="fr"] figure.fig::before, html[lang^="fr"] figure.cnp-diagram-fig::before, html[lang^="fr"] figure.cnp-fig::before{ content: "faites glisser \2192"; } }