/* ==========================================================================
   Base — reset, typography, links, focus, RTL-safe defaults.
   Colors/fonts come ONLY from tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* `hidden` always wins over a component's display rule */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + var(--s-4));
  scrollbar-color: var(--line-strong) transparent;
}

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-base) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { flex: 1; }

/* While a non-English dictionary loads, hide text for a moment (no flash of English).
   i18n.js removes the class; a 1.5s CSS fail-safe shows the page anyway. */
.i18n-pending body { animation: i18n-failsafe 0s linear 1.5s forwards; visibility: hidden; }
@keyframes i18n-failsafe { to { visibility: visible; } }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--track-tight); text-wrap: balance; }
:root[lang="ar"] :is(h1, h2, h3, h4) { font-family: var(--font-ar-display); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }

a { color: inherit; text-decoration: none; }
.prose a, a.text-link { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, a.text-link:hover { text-decoration-thickness: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* code, versions, package names ONLY */
.mono, code { font-family: var(--font-mono); font-size: 0.8125em; letter-spacing: 0; overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link: hidden until focused */
.skip-link {
  position: fixed; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: 100;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 500;
  transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Mirror directional icons in Arabic */
[dir="rtl"] .flip { transform: scaleX(-1); }