/* ============================================================================ UFUQ · أفق — base Reset, base typography, direction handling, layout primitives. Everything here is written with LOGICAL properties. Physical left/right appears in exactly two places in this codebase, both marked, both cases where direction is genuinely the meaning rather than the layout. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.018em; } h2 { font-size: var(--t-h2); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.014em; } h3 { font-size: var(--t-h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.008em; } h4 { font-size: var(--t-lg); line-height: 1.3; font-weight: 600; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } img, svg, video { max-inline-size: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } /* ── Direction & script ────────────────────────────────────────────────────── The whole UI flips from one attribute on . Arabic gets its own face and — critically — zero letter-spacing. Tracking Arabic breaks the joins between letters; it is not a stylistic choice, it is a spelling error. */ html[lang='ar'] { --font-ui: 'Plex Arabic', ui-sans-serif, system-ui, sans-serif; --font-display: 'Plex Arabic', ui-sans-serif, sans-serif; } html[lang='ar'] body, html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3, html[lang='ar'] h4 { letter-spacing: 0; } /* Arabic sets a touch larger: at the same px, Arabic reads smaller than Latin because the meaningful strokes sit below the baseline-to-x-height band. */ html[lang='ar'] body { font-size: calc(var(--t-body) + 0.5px); line-height: 1.55; } /* Numbers are always LTR runs, even inside an Arabic sentence, and always tabular so columns of money line up. */ .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; direction: ltr; unicode-bidi: isolate; } .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ── Focus ───────────────────────────────────────────────────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; border-radius: var(--r-xs); } .skip-link { position: absolute; inset-inline-start: var(--s-3); inset-block-start: -100px; z-index: var(--z-tooltip); padding: var(--s-2) var(--s-4); background: var(--brand); color: var(--brand-ink); border-radius: var(--r-sm); font-size: var(--t-dense); font-weight: 600; transition: inset-block-start var(--d-pop) var(--ease-out); } .skip-link:focus-visible { inset-block-start: var(--s-3); } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Layout primitives ───────────────────────────────────────────────────── */ .row { display: flex; align-items: center; gap: var(--s-3); } .row-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .col { display: flex; flex-direction: column; } .grow { flex: 1 1 auto; min-inline-size: 0; } .wrap { flex-wrap: wrap; } .stack > * + * { margin-block-start: var(--gap, var(--s-4)); } .muted { color: var(--ink-3); } .dim { color: var(--ink-2); } .t-meta { font-size: var(--t-meta); } .t-dense { font-size: var(--t-dense); } .t-micro { font-size: var(--t-micro); } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .center { text-align: center; } /* Truncation that works in both directions. */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } /* ── Money ─────────────────────────────────────────────────────────────────── Colour NEVER carries the sign on its own. `.money.in` and `.money.out` both render an explicit + or − via their data attribute, so a colourblind reader and a greyscale printout both still read correctly. */ .money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .money.in { color: var(--in); } .money.out { color: var(--out); } .money.zero{ color: var(--ink-3); } /* ── Reduced motion ────────────────────────────────────────────────────────── Not "no motion" — fewer and gentler. Opacity and colour transitions survive because they aid comprehension; anything that moves in space does not. */ @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; } .allow-fade { transition: opacity 160ms ease !important; } } /* Hover effects are gated: a touch device fires :hover on tap, which reads as a stuck state. */ @media (hover: hover) and (pointer: fine) { .hoverable:hover { background: var(--surface-2); } }