/* @agur/ui · base — איפוס, RTL, ונגישות שאינה אופציונלית (§8).
 * 🔴 focus-visible כאן ולא ברכיב: בדן הוא היה ב-10 קבצים מתוך 52. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-head);
  font-weight: 600;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; }

/* ⭐ מאפיינים לוגיים בכל מקום — margin-inline ולא margin-left.
 * זה מה שמאפשר ל-dir="rtl" לעבוד בלי גיליון מראה. */
ul, ol { margin: 0; padding-inline-start: 1.2em; }

a { color: var(--brand-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ── אייקונים ────────────────────────────────────────────────────────
 * 🔴 svg inline בלי מידה מפורשת מקבל 300×150 (ברירת המחדל של ה-CSS)
 * ונראה ענק. נמדד כאן במסך הראשון שצויר. */
svg { width: 20px; height: 20px; flex-shrink: 0; }
.shell__mark svg { width: 32px; height: 32px; }

/* 🔴 [hidden] מול display של רכיב — נמדד 18.09.
 * `.rows` הוא `display:flex`, וזה גובר על `[hidden]{display:none}` של הדפדפן
 * ⟹ `hidden` מפסיק להסתיר, בשקט. נתפס ב-"קודמות" שהציג 8 שורות מתוך 8 לפני
 * הלחיצה. ⚠️ וזה נכשל **פונקציונלית ולא בנגישות** — axe וניווט המקלדת רואים
 * אלמנט שבאמת נראה, ולכן אינם מתלוננים. הכלל הזה הוא מה שמגן.
 * ⭐ `!important` כאן הוא הצורה הנכונה: `hidden` הוא הצהרה של ה-HTML,
 * ורכיב לא אמור לגבור עליה. */
[hidden] { display: none !important; }

/* ── מיקוד · 🔴 §8: "focus-visible בכל רכיב" ───────────────────────── */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* ⚠️ מסירים את הטבעת רק ממי שקיבל focus-visible משלו — לעולם לא outline:none גורף */
:focus:not(:focus-visible) { outline: none; }

/* ── קורא מסך בלבד ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* קישור דילוג — נראה רק במיקוד מקלדת */
.skip {
  position: absolute; inset-inline-start: var(--s4); top: -100px;
  z-index: 100; background: var(--surface); color: var(--brand-ink);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  box-shadow: var(--shadow); font-weight: 500;
}
.skip:focus { top: var(--s4); }

/* ── מספרים בתוך טקסט עברי ─────────────────────────────────────────
 * 🔴 "12–14" בעברית מתהפך ל-"14–12". העטיפה הזו היא מה שמחזיק טווח,
 * שעה וסכום במקום. בדן זה נעשה ב-U+202A/202C ידנית, פר-מחרוזת. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── תנועה ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}