/* ============================================================================ M1 DESIGN SYSTEM — BASE Reset, document defaults, RTL and Arabic handling. Everything here uses LOGICAL properties (inline-start/end, not left/right) so RTL is a dir attribute, not a second stylesheet. §8.1. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { /* No flash of the wrong theme: the theme attribute is set by an inline script in before first paint. See gallery/index.html. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-base); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); } /* Theme switching must NOT depend on a transition finishing. Everything else can afford to animate; the theme cannot — if the tick stalls for any reason, a half-run crossfade leaves the page in the wrong theme with correct tokens underneath, which is the worst of both. The toggle adds this class for one frame, so the swap is instant and every other transition in the system is untouched. */ .m1-theme-switching, .m1-theme-switching *, .m1-theme-switching *::before, .m1-theme-switching *::after { transition: none !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--text-primary); margin-block: 0 var(--space-3); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { margin-block: 0 var(--space-3); } a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; } small { font-size: var(--text-xs); color: var(--text-muted); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin-block: var(--space-6); } /* ----------------------------------------------------------------- HIDDEN `hidden` must win against layout. The attribute hides an element via the UA stylesheet's `[hidden] { display: none }`, which is specificity (0,1,0) — the same as a class — and author styles beat UA styles regardless. So ANY component that sets `display` defeats it silently: `.m1-overlay` sets `display: flex`, and the gallery's example dialog sat open over the page because of it. This was previously worked around per component (.m1-chart__tip[hidden], .m1-chart__tableview[hidden] in advanced.css) — the symptom treated twice instead of the cause once. Every new component that sets `display` would have inherited the trap. !important is deliberate, and is what normalize stylesheets have always done here: `hidden` says the element is not to be rendered, and no layout rule should out-argue it. An element that needs to be laid out while hidden is not hidden — use .m1-visually-hidden, which keeps it available to a screen reader. */ [hidden] { display: none !important; } /* ---------------------------------------------------------------- FOCUS One ring, everywhere, and only for keyboard users. §8.5 requires keyboard support on every component; making this global means no component can forget it. */ :focus { outline: none; } :focus-visible { outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* ---------------------------------------------------------------- RTL Directional icons (arrows, chevrons, back, next, undo) mirror. Non-directional ones (search, user, clock, check) must NOT — a mirrored magnifying glass or a mirrored clock looks broken to an Arabic reader. Opt in per icon with .m1-icon--directional. */ [dir='rtl'] .m1-icon--directional { transform: scaleX(-1); } /* Numerals stay Latin in data contexts even in Arabic UI: finance, POS totals, invoice numbers and phone numbers are read as Latin digits across the Gulf. */ [lang='ar'] { font-family: var(--font-arabic); line-height: var(--leading-arabic); } [lang='ar'] .m1-numeric, [lang='ar'] table td, [lang='ar'] .m1-money { font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- UTILITIES */ .m1-numeric { font-variant-numeric: tabular-nums; } /* columns of figures must not jiggle */ .m1-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m1-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .m1-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .m1-row { display: flex; align-items: center; gap: var(--space-3); } .m1-spacer { flex: 1 1 auto; }