/* ════════════════════════════════════════════════════════════════ Regnum Wealth — Base accessibility & UX defaults Loaded on every HTML page (linked from ). Contains only universally-applicable rules: - Keyboard focus ring (focus-visible) - iOS Safari input-zoom prevention - Reduced-motion respect - Coarse-pointer touch-target minimums - Sensible image/svg/canvas defaults No page-specific shell CSS lives here (see rw-shell.css for that). ════════════════════════════════════════════════════════════════ */ /* ── Keyboard focus ring ─────────────────────────────────────────── Replace the inconsistent browser defaults with a single uniform 2px royal ring, shown only on keyboard navigation (focus-visible), not on mouse clicks. WCAG AA. */ :focus { outline: none; } :focus-visible { outline: 2px solid #1a3a8f; outline-offset: 2px; border-radius: 6px; } /* Rounded controls get a matching rounded ring */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline-offset: 2px; } /* Skip-to-content link (visible only on focus) */ .rw-skip { position: absolute; top: -100px; left: 16px; background: #1a3a8f; color: #fff; padding: 10px 16px; border-radius: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13.5px; text-decoration: none; z-index: 1000; transition: top 0.18s ease; } .rw-skip:focus, .rw-skip:focus-visible { top: 16px; outline: 2px solid #fff; outline-offset: 2px; } /* ── iOS Safari input-zoom prevention ────────────────────────────── iOS auto-zooms when an input's computed font-size is <16px. Forcing 16px on phones stops the viewport from zooming on focus, which also stops the layout shift that follows. */ @media (max-width: 768px) { input, textarea, select { font-size: 16px !important; } } /* ── Touch target minimums on coarse pointers ────────────────────── Apple HIG and Material both require 44×44 minimum. Apply only on touch devices so mouse-driven UIs keep their compact density. */ @media (hover: none) and (pointer: coarse) { .btn-tiny, .pg-btn, .tbl-page-btn, .tbl-action-btn, .modal-close, .icon-btn, .sb-logout, .chip-close, .close-x { min-width: 44px; min-height: 44px; } } /* ── Neutralise hover transforms on touch devices ───────────────── On touch screens, :hover fires on tap and persists until the next tap elsewhere. Decorative hover-up transforms (translateY, scale) leave the card in a permanently "raised" state — visually buggy. We override any :hover transform with none on hover-incapable pointers. Hover-state background/border changes still apply. */ @media (hover: none) { *:hover { transform: none !important; } } /* ── Reduced-motion respect ──────────────────────────────────────── When the OS-level "Reduce motion" toggle is on, neutralise every transition, animation and keyframe so nothing twitches. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Sensible defaults for media elements ────────────────────────── Prevent images/charts from forcing horizontal page scroll. */ img, svg, canvas, video { max-width: 100%; height: auto; } /* ── Prevent horizontal overflow portal-wide ────────────────────── When the sidebar is open, main content has less horizontal space. Grid/flex containers with fixed-column counts (repeat(5, 1fr)) can overflow because children won't shrink below their intrinsic content width. Two-pronged fix: 1. min-width: 0 on flex/grid children lets them shrink past content 2. overflow-x: hidden on body as a last-resort safety net Both are no-ops when the page already fits. */ html, body { overflow-x: hidden; } .stats-strip, .kpi-grid, .stat-tile, .kpi-card, .filter-row, .toolbar { min-width: 0; } .stats-strip > *, .kpi-grid > *, .filter-row > *, .toolbar > * { min-width: 0; } /* When a fixed-height chart container is used, honour its sizing */ .chart-container svg, .chart-container canvas { height: auto; }