/* ── פלטה ─────────────────────────────────────────────────────────────
   איריס ואקווה, על נייר חם.

   הכיוון הסגול נשאר, אבל הוא זז למקום משלנו. שלוש הבחנות מכוונות מול
   ליברי, כדי שהדמיון יהיה בז'אנר ולא בזהות:

     1. הסגול עמוק יותר ופחות ממתק. #5D3FD3 במקום #9966FF - אותו
        משפחה, רוויה וכהות אחרות לגמרי.
     2. מבטא משני של אקווה (#0FA3A3) במקום כחול מלכותי. ליברי מונוכרום
        סגול; שני הגוונים כאן הם החתימה שלנו, והאקווה גם נקרא מדעי.
     3. הנייר חם (#F7F4EE) ולא אפור קריר. זה גם מה שמגשר אל 113 המצגות
        שנשארות בקרם.

   גם הצורה שונה: כפתורים ברדיוס מתון ולא גלולות מלאות. גלולה שמורה
   כאן לתגיות בלבד.

   התפקידים, ואין צבע דקורטיבי:
     iris     פעולה. כפתור, לשונית פעילה, הדבר שכדאי ללחוץ עליו.
     aqua     ידע. תאוריה, הסבר, רמז.
     lilac    הקשר. תגיות, שיוך, "משלב".
     ink      רצינות. פתיח, כותרת תחתונה, מדורים מובילים.

   אין אדום ואין צהוב. שני החריגים הם משוב על תשובה - ירוק לנכון,
   ורוד-שזיף ללא נכון - ושם הצבע הוא מידע ולא קישוט.
   ──────────────────────────────────────────────────────────────────── */

/* ‏`hidden` הוא display:none של הדפדפן, וכל מחלקה שמגדירה display
   דורסת אותו. כפתור "הקודם" בסוף רשימה קיבל hidden ובכל זאת נשאר על
   המסך כחץ ריק, כי `.btn` מגדיר inline-flex. */
[hidden] { display: none !important; }

/* ── הסתרה חזותית שאינה הסתרה מקורא מסך ────────────────────────────────
   ‏`display: none` מוציא טקסט **גם** מעץ הנגישות, ולכן כפתור שהכיתוב
   שלו הוסתר בשאילתת מדיה נשאר בלי שם. זה קרה לסרגל הכלים של עמוד
   התרגיל בטלפון: ה-SVG הוא `aria-hidden`, הכיתוב הוסתר, ולקורא מסך
   נשאר כפתור בלי שם.

   ‏`position: absolute` מוציא את הטקסט מהזרימה, ולכן הוא גם אינו פריט
   flex - ‏`gap` של הכפתור אינו מוסיף עליו רווח, והמראה אינו זז.

   **מי שמסתיר טקסט שקורא מסך צריך, משתמש בזה ולא ב-`display: none`.** */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── "דלג לתוכן" ──────────────────────────────────────────────────────
   ‏WCAG 2.4.1. הכותרת היא כארבעים קישורים, ומקלדת עוברת את כולם בכל
   עמוד לפני שהיא מגיעה לשאלה. הקישור מוסתר עד שהוא מקבל מיקוד, ואז
   הוא נפתח בראש העמוד מעל הכותרת הדביקה.

   הגוונים קיימים בפלטה ולפי התפקיד: ‏`--iris` הוא פעולה. */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 12px;
  z-index: 200;
  padding: 10px 18px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--iris-deep);
  background: var(--surface);
  border: 2px solid var(--iris);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-lift);
}

.skip-link:focus {
  inset-block-start: 12px;
}

:root {
  /* ── אגפי הספרייה (חבילת העיצוב, הבעלים 2026-09-26) ──
     אותם תפקידים, ערכים חדשים: הפעולה (--iris) חום #785334, הידע (--aqua)
     מרווה #4E6749, ההקשר (--lilac) נשאר לילך - הסגול של ניוטי בסימון קטן.
     הנייר #F5F1E8 והמשטח שנהב #FFFCF5. השמות לא השתנו, כדי שכל רכיב ימשיך
     לקרוא את התפקיד שלו; הלוגו קורא ערכים קבועים ולא את הטוקנים שזזו.
     מצב הדיו למטה ממשיך את אותה פלטת הספרייה. */
  --focus: #6B4C2F;         /* טבעת המיקוד: 3px ומרווח 2px */
  --bg: #F5F1E8;
  --surface: #FFFCF5;
  --border: #DDD3C2;
  --border-strong: #CBBDA6;
  --text: #352D24;
  --text-heading: #2B241D;
  --text-muted: #6C6254;
  --text-calm: #514638;     /* גוף שקט: קישורי הפוטר והכותרת (calm-home/guidelines.md) */
  --line-calm: #E6DDCD;     /* קו שיער על הנייר */

  /* הגוון הראשי - הפעולה */
  --iris: #785334;
  --iris-deep: #5C3F26;
  --iris-soft: #EDE5D6;
  --iris-pale: #C9B49A;
  /* מסגרת הפקדים (אפשרות ב', הבעלים 2026-09-12): איריס בינוני, 3.42 על
     הנייר. רק מה שלוחצים עליו או כותבים בו נושא אותה; כרטיסים ומדורים
     נשארים בקווים החמים. */
  --ctl-border: #9C7B5C;

  /* המבטא המשני - הידע. זה הצבע שמבדיל אותנו. */
  --aqua: #4E6749;
  --aqua-deep: #3B5037;
  --aqua-soft: #E3EADF;
  /* אקווה כטקסט על רקע בהיר, וכרקע שנושא טקסט לבן. אותו גוון, בהיר פחות. */
  --aqua-text: #46603F;

  /* הקשר ושיוך */
  --lilac: #E6E0F9;
  --lilac-deep: #574A80;

  /* ידע על דיו: תוויות, עקומה, מסגרת הנוסחאון. חי במצב הדיו בלבד;
     כאן הוא מוגדר כדי שקוד יוכל לקרוא אותו, ואינו טקסט על נייר. */
  --aqua-ink: #9DBB93;     /* מרווה בהיר: ידע על --ink בנייר (8.06); בדיו #8EDAD7 */
  /* טקסט על פעולה: לבן על איריס בנייר, דיו על איריס-בהיר בלילה. כל
     `color: #fff` על רקע איריס, אקווה, ירוק או שזיף קורא את הטוקן הזה. */
  --on-accent: #FFFDF7;
  /* מסגרות עדינות של הודעות המשוב והרמז, בני הלוויה של --ok-soft וחבריו */
  --ok-line: #C7E3D5;
  --no-line: #EBD3E0;
  --aqua-line: #C9D6C3;

  /* הלוגו (ניוטון תחת העץ): גוונים לפי המצב, ובדיו הפלטה הבהירה */
  --logo-bark: #4A3768;
  --logo-leaf: #0FA3A3;
  --logo-leaf-hi: #17BEBC;
  --logo-figure: #40289C;
  --logo-apple: #9B3F6E;
  --logo-bulb: #0FA3A3;
  --logo-ground: #D2C7B5;

  /* ניוטי בדיו: קו מתאר לילך סביב הדמות, בלי לצבוע אותה מחדש (newty.css) */
  --newty-outline: transparent;

  /* ‏צבעי סימון נתונים על שרטוט גאומטרי. חמישה גוונים נבדלים זה מזה,
     כולם מתוך הפלטה ואף אחד מהם אינו אדום או צהוב. הם **אינם** נושאים
     משמעות של נכון או שגוי - הם רק מפרידים בין נתון לנתון. */
  --mark1: #5D3FD3;
  --mark2: #0FA3A3;
  --mark3: #2E7D5B;
  --mark4: #574A80;
  --mark5: #8A5A2B;

  --header-h: 72px;
  --tabbar-h: 0px;
  --rail-w: 0px;

  /* משוב על תשובה. מידע, לא קישוט. */
  --ok: #2B7757;
  /* הובהר מ-#E2F2EA (2026-09-24): ירוק המשוב כטקסט עליו נתן 4.31, ועכשיו 4.57 */
  --ok-soft: #EAF6EF;
  --no: #9B4A72;
  --no-soft: #F7E9F0;
  /* אותו ורוד-שזיף על מדור כהה. --no עצמו נותן 3.05 על --ink,
     ו---no-soft נותן 15.06 אבל נקרא כלבן ומאבד את המידע שבצבע.
     זה אותו גוון בדיוק (‏h=330°), מובהר עד 4.84. */
  --no-on-ink: #BA6E93;
  /* תרגיל מחוץ לתוכנית השנה. חריג מכוון לכלל "אין אדום": הבעלים ביקש
     תחתית אדומה במפורש (כרטיס דיווח, 2026-09-21) - סימן שתלמיד מזהה
     בלי לקרוא. טוקן משלו ולא --no, כי זה אינו משוב על תשובה. */
  --out-scope: #C62828;

  /* סולם דרגות הקושי - מדרג של האיריס, מבהיר לכהה */
  --lv1: #F3EEE5;      --lv1-ink: #6C5B47;
  --lv2: #EDE5D6;      --lv2-ink: #5E4A33;
  --lv3: #E1D3BD;      --lv3-ink: #533C25;
  --lv4: #C9B49A;      --lv4-ink: #3A2716;

  /* שמות ותיקים, כדי שקוד קיים לא יישבר */
  --accent: var(--iris);
  --accent-hover: var(--iris-deep);
  --accent-soft: var(--iris-soft);
  --info: var(--aqua);
  --info-text: var(--aqua-text);
  --info-soft: var(--aqua-soft);
  --success: var(--ok);
  --success-soft: var(--ok-soft);
  --warn: var(--lilac-deep);
  --warn-soft: var(--lilac);
  --violet: var(--iris);
  --violet-deep: var(--iris-deep);
  --violet-soft: var(--iris-soft);
  --violet-pale: var(--iris-pale);
  --blue: var(--aqua);
  --blue-deep: var(--aqua-deep);
  --blue-soft: var(--aqua-soft);
  --clay: var(--iris-pale);
  --clay-soft: var(--iris-soft);

  /* הכהה - אינדיגו-שזיף */
  --ink: #221B15;
  --ink-2: #3D332A;
  --ink-3: #5C3F26;
  --text-strong: #5C3F26; /* ערכים מודגשים בלשון השאלה; בדיו #ECE7FB */
  --frame-strong: #5C3F26; /* מסגרת לשון השאלון; בדיו #B9A6F5 */
  --ink-line: rgba(255, 253, 250, .14);
  --on-ink: #F5EFE4;
  --on-ink-muted: #C6BAA7;  /* 5.01 על --ink-3 (הספירה לבגרות); #BDB09C נתן 4.49 */

  /* רדיוס מתון לכפתורים ולכרטיסים. הגלולה שמורה לתגיות. */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-btn: 8px;
  --shadow: 0 1px 2px rgba(53, 45, 36, .05), 0 6px 20px rgba(53, 45, 36, .06);
  --shadow-lift: 0 4px 10px rgba(53, 45, 36, .09), 0 16px 38px rgba(53, 45, 36, .12);
  --shadow-ink: 0 16px 40px rgba(53, 45, 36, .32);
  --max: 1180px;
  /* רשת השרטוט שבאיור התרגיל (guidelines.md, "שכבת השרטוט"): 3 קווים
     אופקיים ו-3 אנכיים, לילך על נייר; בדיו הקו הדק של הדיו */
  --grid-line: #ECE4D6;
}

/* ── מצב הדיו ──────────────────────────────────────────────────────────
   `<html data-theme="ink">`: אותם תפקידים, ערכים מהטבלה "טוקני מצב הדיו"
   ב-docs/redesign/guidelines.md. הרכיבים קוראים טוקן ולא hex, ולכן המעבר
   הוא החלפת הבלוק הזה בלבד. הסקריפט ב-<head> (build_nav.py) קובע את
   data-theme לפני ה-CSS, והמתג בכותרת מחליף. `@media not print`: הדפסה
   היא תמיד נייר, גם כשהמסך בדיו. הבודק: verify_theme.py. */
@media not print {
  :root[data-theme="ink"] {
    --bg: #211C17;
    /* אותו חדר גם בלילה: עץ כהה, נייר חם ומרווה, באותם תפקידי צבע. */
    --ink: #211C17;
    --ink-2: #302820;
    --ink-3: #40352B;
    --on-ink: #F5EFE5;
    --on-ink-muted: #C7BBAA;
    --aqua-ink: #AEC7A4;
    --focus: var(--iris);
    --text-strong: #F5EFE5;
    --frame-strong: #C8AC89;
    --surface: #302820;
    --border: rgba(255, 253, 250, .14);
    --border-strong: rgba(255, 253, 250, .14);
    --grid-line: rgba(255, 253, 250, .14);
    --text: #F5EFE5;
    --text-heading: #FFFCF5;
    --text-muted: #C7BBAA;
    --text-calm: #E4D9C9;
    --line-calm: rgba(255, 253, 250, .14);

    --iris: #D2B492;
    --iris-deep: #E6CBAA;
    --iris-soft: rgba(210, 180, 146, .14);
    --iris-pale: #D2B492;
    --ctl-border: #C8AC89;
    --on-accent: #211C17;

    --aqua: #AEC7A4;
    --aqua-deep: #C3D7BB;
    --aqua-soft: rgba(174, 199, 164, .12);
    --aqua-text: #AEC7A4;

    --lilac: rgba(230, 224, 249, .12);
    --lilac-deep: #B9A6F5;

    --mark1: #B9A6F5;
    --mark2: #8EDAD7;
    --mark3: #6CC69A;
    --mark4: #E6E0F9;
    --mark5: #CDAE85;

    --ok: #6CC69A;
    --ok-soft: rgba(46, 125, 91, .3);
    --no: #D48DB2;
    --no-soft: rgba(155, 74, 114, .24);
    --ok-line: rgba(108, 198, 154, .4);
    --no-line: rgba(212, 141, 178, .4);
    --aqua-line: rgba(174, 199, 164, .4);

    --lv1: rgba(210, 180, 146, .10);  --lv1-ink: #DEC8AB;
    --lv2: rgba(210, 180, 146, .20);  --lv2-ink: #EAD8C0;
    --lv3: rgba(210, 180, 146, .30);  --lv3-ink: #FBEDDA;
    --lv4: #D2B492;                   --lv4-ink: #211C17;

    --logo-bark: #A08CDC;
    --logo-leaf: #3FD2CF;
    --logo-leaf-hi: #5CE3E0;
    --logo-figure: #C6B4FC;
    --logo-apple: #DE87B0;
    --logo-bulb: #3FD2CF;
    --logo-ground: rgba(255, 255, 255, .25);
    --newty-outline: #B9A6F5;

    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 20px rgba(0, 0, 0, .3);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, .35), 0 16px 38px rgba(0, 0, 0, .4);
  }
}

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

/* טבעת המיקוד של החבילה: 3px ומרווח 2px, לכל מה שמקבל מקלדת. ‏:where
   שומר על משקל אפס, כך שכל כלל מיקוד מקומי שכבר קיים גובר עליה. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus, var(--accent));
  outline-offset: 2px;
}

/* הרקע והטקסט על השורש ולא על body: מעבר נייר-דיו של 200ms רץ על השורש
   בלבד (guidelines: "תנועה"), ו-body יורש אותו. תחת prefers-reduced-motion
   הכלל הגורף `* { transition: none }` מבטל גם אותו. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  transition: background-color 200ms, color 200ms;
}

body {
  margin: 0;
  background: transparent;
  color: inherit;
  font-family: "Segoe UI", "Assistant", "Rubik", system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hover); }

h1, h2, h3 { color: var(--text-heading); line-height: 1.25; margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ── כותרת עליונה ────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  /* ‏גובה הכותרת יושב בטוקן אחד, כי הפתיח הכהה נמשך מעליה בדיוק
     בגובה הזה. שני מספרים נפרדים נפרדו בפועל, ונשאר פס בהיר מעל
     הלוגו בכניסה לאתר. */
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  /* השם גדל ומוקטן יחד עם הסימן, כדי ששניהם ייקראו כיחידה אחת
     ולא כסימן גדול עם כיתוב קטן לידו. */
  font-size: 1.59rem;
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
}

/* ── הלוגו ──────────────────────────────────────────────────────────────
   ניוטון יושב תחת העץ, תפוח נופל על ראשו, ונדלקת נורה ליד היד המורמת
   (הבעלים החזיר אותו, 2026-09-25). ‏SVG ב-build_nav (BRAND_MARK), וכאן
   הצבע והתנועה.

   שלושה דברים מחזיקים את השרטוט: הגוף עבה, הגפיים דקות והראש מנותק
   בפער, אחרת הדמות נמרחת לכתם ב-40 פיקסל; התפוח תלוי מתחת לשולי הצמרת,
   אחרת לא רואים אותו נופל; והצבעים טוקנים, כי בדיו הם מתהפכים לבהירים.

   מחזור של 4.4 שניות הוא נפילה אחת. ההשהיה השלילית פותחת כל עמוד ברגע
   הרעיון - נורה דולקת, יד למעלה - וזה גם סגנון הבסיס, כלומר המנוחה.
   ‏nav.js עוצר אחרי שש נפילות (‎.lg-off), בדיוק כשהמחזור עומד על המנוחה;
   המחזור השביעי ב-CSS הוא רשת ביטחון לדפדפן בלי סקריפט. */
.brand-mark {
  width: 63px;
  height: 63px;
  flex: none;
  display: block;
}

.lg-tree { display: block; width: 100%; height: 100%; }

.lg-tree .lg-ground  { stroke: var(--logo-ground); stroke-width: 2.4; stroke-linecap: round; }
.lg-tree .lg-trunk   { fill: none; stroke: var(--logo-bark); stroke-width: 9; stroke-linecap: round; }
.lg-tree .lg-leaf    { fill: var(--logo-leaf); }
.lg-tree .lg-leaf-hi { fill: var(--logo-leaf-hi); }
.lg-tree .lg-limb    { fill: none; stroke: var(--logo-figure);
                       stroke-linecap: round; stroke-linejoin: round; }
.lg-tree .lg-torso   { stroke-width: 9; }
.lg-tree .lg-legs    { stroke-width: 4.8; }
.lg-tree .lg-upper   { stroke-width: 4.4; }
.lg-tree .lg-head-c,
.lg-tree .lg-hand    { fill: var(--logo-figure); }
.lg-tree .lg-fruit   { fill: var(--logo-apple); }
.lg-tree .lg-stem    { fill: none; stroke: var(--logo-bark); stroke-width: 1.8; stroke-linecap: round; }
.lg-tree .lg-glass   { fill: var(--logo-bulb); }
.lg-tree .lg-glow    { fill: var(--logo-bulb); opacity: .5; }
.lg-tree .lg-cap     { fill: none; stroke: var(--logo-bark); stroke-width: 2.1; stroke-linecap: round; }
.lg-tree .lg-ray     { stroke: var(--logo-bulb); stroke-width: 2.6; stroke-linecap: round; }

/* המנוחה: התפוח כבר ירד, הנורה דולקת והיד למעלה */
.lg-tree .lg-apple { opacity: 0; }

.lg-tree :is(.lg-canopy, .lg-head, .lg-arm, .lg-bulb, .lg-rays, .lg-glow, .lg-apple) {
  transform-box: view-box;
  animation-duration: 4.4s;
  animation-iteration-count: 7;
  animation-delay: -3.05s;
}

/* עצירה והפעלה מחדש: הסרת המחלקה מריצה שוב מאותו פריים של המנוחה */
.lg-tree.lg-off :is(.lg-canopy, .lg-head, .lg-arm, .lg-bulb, .lg-rays, .lg-glow, .lg-apple) {
  animation: none;
}

.lg-tree .lg-canopy { transform-origin: 65px 90px;     animation-name: lg-shake; }
.lg-tree .lg-head   { transform-origin: 36px 62px;     animation-name: lg-bob; }
.lg-tree .lg-arm    { transform-origin: 32.5px 73.5px; animation-name: lg-raise; }
.lg-tree .lg-apple  { transform-origin: 36px 35px;     animation-name: lg-fall; }
.lg-tree .lg-bulb   { transform-origin: 19px 46px;     animation-name: lg-light; }
.lg-tree .lg-rays   { transform-origin: 19px 42px;     animation-name: lg-burst; }
.lg-tree .lg-glow   { animation-name: lg-pulse; }

@keyframes lg-fall {
  0%,  10% { transform: translate(0, 0); opacity: 1;
             animation-timing-function: cubic-bezier(.36, 0, .86, .42); }
  24%      { transform: translate(0, 16px);
             animation-timing-function: cubic-bezier(.2, .72, .4, 1); }
  29%      { transform: translate(3.5px, 10px);
             animation-timing-function: cubic-bezier(.5, 0, .9, .62); }
  38%      { transform: translate(19px, 50px); opacity: 1; }
  44%      { transform: translate(20px, 50px); opacity: 0; }
  92%      { transform: translate(20px, 50px); opacity: 0; }
  93%      { transform: translate(0, 0); opacity: 0; }
  99%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes lg-bob {
  0%, 23%   { transform: translate(0, 0); }
  25.5%     { transform: translate(0, 2.2px); }
  28.5%     { transform: translate(0, -0.7px); }
  32%, 100% { transform: translate(0, 0); }
}

@keyframes lg-shake {
  0%, 8%    { transform: rotate(0deg); }
  11%       { transform: rotate(-1.4deg); }
  15%       { transform: rotate(1.1deg); }
  19%       { transform: rotate(-0.5deg); }
  23%, 100% { transform: rotate(0deg); }
}

@keyframes lg-raise {
  0%, 26%   { transform: rotate(-92deg); }
  38%       { transform: rotate(6deg); }
  43%, 84%  { transform: rotate(0deg); }
  94%, 100% { transform: rotate(-92deg); }
}

@keyframes lg-light {
  0%, 26%   { opacity: 0; transform: scale(.32); }
  31%       { opacity: 1; transform: scale(1.14); }
  35%, 84%  { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(.85); }
}

@keyframes lg-burst {
  0%, 27%   { opacity: 0; transform: scale(.45); }
  33%       { opacity: 1; transform: scale(1.18); }
  37%, 84%  { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes lg-pulse {
  0%, 28%   { opacity: 0; }
  33%       { opacity: .62; }
  46%       { opacity: .3; }
  59%       { opacity: .58; }
  72%       { opacity: .34; }
  84%       { opacity: .52; }
  90%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-tree :is(.lg-canopy, .lg-head, .lg-arm, .lg-bulb, .lg-rays, .lg-glow, .lg-apple) {
    animation: none;
  }
}

/* ── ניוטי השקט (newty.js) ────────────────────────────────────────────────
   כאן רק הכפתור. הציור, המצבים (‎.nt.m-*), מצב הדיו, התנומה ו-reduced-motion
   ב-newty.css, שנגזר מ-scripts/newty_art.py. מיכל של 104×115 עם הבמה (viewBox
   ‏0 -24 240 264), ויש מקום לתפוח שנופל, לכדורים ולהולה הופ. היה 56×62, והבעלים
   (‏2026-09-26): "הוא לא מורגש מרוב שהוא קטן". הבודק: verify_newty.js. */
.newty {
  display: block;
  flex: none;
  width: 104px;
  height: 115px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: pointer;
}
.newty:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brand-word { letter-spacing: -.01em; }

/* ── מתג נייר/דיו ──────────────────────────────────────────────────────
   כפתור אחד בקצה סרגל הכותרת של עמודי הלימוד (build_nav: THEME_PAGES).
   גלולה 46×26 (40×24 בטלפון) עם כפתור מחליק ובתוכו ירח; בדיו שמש. בלי
   מילה: השם ב-aria-label בלבד ("מצב לילה" / "מצב יום"), מתחלף ב-nav.js.
   בטלפון הוא יושב בשורת המותג, לא בשורה משלו. */
.theme-toggle {
  flex: none;
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ctl-border);
  border-radius: 999px;
  background: var(--iris-soft);
  color: var(--iris-deep);
  cursor: pointer;
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: transform 200ms;
}
.tt-knob svg { width: 14px; height: 14px; display: block; }
.tt-sun { display: none; }
:root[data-theme="ink"] .theme-toggle { background: var(--iris); border-color: var(--iris); }
:root[data-theme="ink"] .tt-knob { transform: translateX(-20px); background: var(--bg); color: var(--iris); }
:root[data-theme="ink"] .tt-moon { display: none; }
:root[data-theme="ink"] .tt-sun { display: block; }
@media (max-width: 620px) {
  .theme-toggle { width: 40px; height: 24px; }
  .tt-knob { width: 18px; height: 18px; }
  :root[data-theme="ink"] .tt-knob { transform: translateX(-18px); }
}

/* ── פתיח ──────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--ink-line);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #7FE3DC;
}

/* שורת הפתיחה יושבת על הנייר בכל העמודים (בגרויות, כיתה, עיון); הצבע
   --on-ink-muted שהיה כאן נשאר מהפתיח הכהה שירד, ונתן כ-2 על הנייר.
   על דיו (‏.track-hero-text) יש לה כלל משלה. */
.lead {
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0;
  font-size: 1.08rem;
}
/* הספירה לבגרות (‏countdown.js): שורה אחת מתחת ל-lead. פריט לא נשבר
   באמצע, ולכן בטלפון היא נשברת בין הפריטים לשתי שורות. הנקודה לפני
   כל מקצוע היא אקווה - ידע ולא פעולה; "טיוטת משרד החינוך" היא הקשר,
   ולכן לילך בגלולה. בלי אדום ובלי צהוב (‏verify_exam_countdown.js). */
.exam-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 18px 0 0;
  font-size: .92rem;
  color: var(--on-ink-muted);
}
.exam-countdown .cd-lead { color: var(--on-ink); font-weight: 700; }
.exam-countdown .cd-item { white-space: nowrap; }
.exam-countdown .cd-item::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--aqua);
  vertical-align: middle;
}
.exam-countdown b,
.exam-countdown .cd-n { color: var(--on-ink); font-weight: 700; }
.exam-countdown .cd-draft {
  padding: 1px 9px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: .76rem;
  color: var(--lilac);
  white-space: nowrap;
}

/* שני התחומים, מודגשים כבר בפתיח */

.stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.stat b {
  display: block;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .85rem; color: var(--on-ink-muted); }

/* ── במת האנימציה המתחלפת ───────────────────────────────────────────── */
.hero-stage {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-ink);
  padding: 16px 16px 12px;
  backdrop-filter: blur(2px);
}

.hero-stage-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 22px;
  flex-wrap: wrap;
}
.hero-motion {
  margin-inline-start: auto; width: 36px; min-height: 36px; border-radius: 50%;
  border: 1px solid var(--ink-line); background: transparent; color: var(--on-ink);
  cursor: pointer; font: inherit;
}
.hero-motion:hover { background: rgba(255,255,255,.1); }
.hero-motion:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; }
.hero-stage-head b { color: #fff; font-size: .98rem; }
.hero-stage-head span { color: var(--on-ink-muted); font-size: .84rem; }

.hero-canvas {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 10;
}

.hero-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s ease;
}
.hero-canvas svg.is-out { opacity: 0; }

.hero-dots { display: flex; flex-wrap: wrap; gap: 0 6px; justify-content: center; margin-top: 11px; }
.hero-dot {
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0 3px, transparent 4px);
  cursor: pointer;
}
.hero-dot[aria-current="true"] { color: var(--ink); background: var(--on-ink); border: 9px solid var(--ink); }
.hero-dot:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .hero-canvas * { animation: none !important; }
}

/* ── מדורים בעמוד הבית ──────────────────────────────────────────────── */
.band {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding: 52px 0;
  margin: 20px 0;
}

/* עוגן לא נוחת מתחת לכותרת הדביקה. ערך אחד לכל האתר, על המסמך ולא על
   היעד: scroll-padding חל על כל קפיצה לעוגן ועל כל scrollIntoView, גם על
   div ועל כותרת ולא רק על section[id]. scroll-margin על יעד מתווסף אליו,
   ולכן אין באתר אחד כזה בראש היעד. הגובה הוא של הכותרת בפועל ועוד 12:
   מ-2026-09-25 שורה אחת בכל רוחב (52 בטלפון, 64 מעליו), ובטלפון גם
   הסרגל התחתון (‏--tabbar-h), כדי שיעד לא ינחת מתחתיו (WCAG 2.4.11).
   ‏verify_home_anchors.js בודק ב-390 וב-1280. */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: calc(var(--tabbar-h) + 12px);
}

.section-head { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 10px; }

.wrap > .section-head { margin-top: 0; }
main > section.wrap { padding-top: 46px; padding-bottom: 10px; }

.prose { max-width: 66ch; }
.prose p { margin: 0 0 15px; }
.prose p:last-child { margin-bottom: 0; }

/* ── חיפוש ───────────────────────────────────────────────────────────── */
.search {
  position: relative;
  margin: 0 0 8px;
}

.search input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
}

.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── לשוניות נושא / שנה ──────────────────────────────────────────────── */
.tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  margin: 30px 0 20px;
}

.tabs button {
  font: inherit;
  font-size: .95rem;
  padding: 8px 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tabs button:hover { color: var(--text-heading); }

.tabs button[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* ── כותרת קבוצה (מכניקה / חשמל) ────────────────────────────────────── */
.group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.12rem;
  margin: 30px 0 14px;
}

.group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.group-title .count {
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 2px 11px;
}

/* ── רשת כרטיסים ─────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
}

.grid.years { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.card h3 { font-size: 1.06rem; margin-bottom: 5px; }
.card .meta { font-size: .85rem; color: var(--text-muted); }

.card.year {
  text-align: center;
  padding: 20px 14px;
}

.card.year h3 { font-size: 1.55rem; font-variant-numeric: tabular-nums; }

.section-note {
  font-size: .85rem;
  color: var(--text-muted);
  margin: -8px 0 14px;
}

/* ── רשימת שאלות ─────────────────────────────────────────────────────── */
.q-list { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }

.q-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.q-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.q-num {
  flex: none;
  width: 54px;
  text-align: center;
  border-inline-end: 1px solid var(--border);
  padding-inline-end: 14px;
  align-self: stretch;
}

.q-num b {
  display: block;
  font-size: 1.35rem;
  color: var(--accent-hover);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.q-num span { font-size: .76rem; color: var(--text-muted); }

.q-body { flex: 1; min-width: 0; }
.q-body h3 { font-size: 1.04rem; margin-bottom: 6px; }

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-muted);
}

.tag {
  background: var(--accent-soft);
  color: var(--text-heading);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .78rem;
  white-space: nowrap;
}

.tag.topic { background: var(--info-soft); color: var(--aqua-text); }
/* מאיזו בגרות השורה: טקסט שקט ולא תגית, כי זה מידע על המקור ולא סיווג. */
.q-src { color: var(--text-muted); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.video { background: var(--success-soft); color: var(--success); }

/* ── סימוני מיקוד ────────────────────────────────────────────────────
   מה שלא נדרש בבחינה של השנה מסומן, ולא נעלם. תלמיד בגרות רואה שאפשר
   לדלג; תלמיד מכינה, שצריך את החומר במלואו, מוצא את השאלה במקומה.

   בלי אדום ובלי צהוב: זה לא אזהרה אלא מידע, ושני הצבעים האלה היו
   קוראים לזה "שגיאה". הסימון נשען על הגוון השקט של הפלטה. */
.tag.scope { cursor: help; }
.tag.scope-reduced { background: var(--lilac); color: var(--lilac-deep); }
.tag.scope-out {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

/* הכרטיס עצמו נרגע. עדיין קריא, כבר לא מושך את העין ראשון. */
.q-card.is-out { background: var(--bg); }
.q-card.is-out h3 { color: var(--text-muted); }

.scope-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 12px 0 0;
  padding: 11px 15px;
  border-radius: var(--radius-btn);
  background: var(--lilac);
  color: var(--lilac-deep);
  font-size: .9rem;
}
.scope-note.is-out {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}
.scope-note b { font-weight: 700; }
.scope-note span { flex: 1 1 22ch; opacity: .92; }
.scope-note a { color: inherit; font-weight: 600; }

/* ── פירורי לחם ──────────────────────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-muted);
  padding: 22px 0 0;
}

.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-hover); text-decoration: underline; }
.crumbs .sep { opacity: .5; }

.page-title { padding: 12px 0 22px; }
.page-title h1 { font-size: clamp(1.45rem, 3.6vw, 2rem); }
.page-title p { color: var(--text-muted); margin: 8px 0 0; }
/* שורת המקור בעמוד השאלה: השאלון, המועד ומספר השאלה, עם קישור לשאלון
   המקורי (iris - פעולה). */
.page-title .q-source { margin-top: 4px; font-size: .9rem; }
.q-source a { color: var(--iris); font-weight: 600; }
.q-source a:hover, .q-source a:focus-visible { color: var(--accent-hover); }

/* ── עמוד שאלה ───────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: .95rem;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ctl-border);
  background: var(--iris-soft);
  color: var(--iris-deep);
  text-decoration: none;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease;
}

.btn:hover { background: var(--surface); border-color: var(--accent); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* היחס קובע את הגובה מתוך הרוחב. בלי min-height - הוא היה מרחיב את
   המסגרת מעבר לרוחב המסך בטלפון.

   המצגות עצמן בגוון קרם חם, והאתר סגול. מסגרת בגוון ביניים ניטרלי
   מרככת את המעבר, במקום להעמיד סגול רווי צמוד לקרם. */
.deck-frame {
  position: relative;
  width: 100%;
  background: #F7F5F1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* ‏clip ולא hidden: אותו חיתוך בפינות, אבל המסגרת אינה מיכל גלילה, ולכן
     כפתור המסך המלא נדבק לתחתית החלון ולא לתחתית המסגרת (‏D4, למטה) */
  overflow: clip;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.deck-frame iframe { border-radius: 14px; }

.deck-frame iframe {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 0;
  display: block;
  background: #FDFBF7;
}

.deck-hint {
  font-size: .84rem;
  color: var(--text-muted);
  margin: 10px 0 0;
  text-align: center;
}

.deck-hint a { white-space: nowrap; }

/* מסך מלא מתוך המצגת (כרטיס 5jav): מעל ה-iframe, 44×44, בפינה השמאלית
   התחתונה - בעליונה הוא כיסה את מספר השאלה של המצגת, ובתחתונה הימנית
   יושבים רמזי המקלדת שלה */
/* ‏**הכפתור נראה כבר במסך הראשון** (‏D4, ‏2026-10-01). במחשב המסגרת ברוחב
   מלא, ותחתיתה ב-1,060 עד 1,100 - הכפתור ישב מתחת לקפל של 900. עכשיו הוא
   sticky בתחתית המסגרת: כשהיא כולה בחלון הוא בפינה כמו קודם, וכשתחתיתה מתחת
   לקפל הוא עולה עם תחתית החלון, ולעולם אינו יוצא מהמסגרת (כרטיס 5jav).
   המיקום בזרימה: המסגרת flex בעמודה, והכפתור בסופה, בצד שמאל (flex-end). */
.deck-full {
  position: sticky;
  bottom: 14px;
  align-self: flex-end;
  margin: 0 8px 8px;
  flex: none;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: .85;
  cursor: pointer;
}
.deck-full:hover, .deck-full:focus-visible, .deck-full.is-on { opacity: 1; }
.deck-full svg { width: 22px; height: 22px; }
/* מסך מלא בלי Fullscreen API (‏iPhone, כרטיס r53b; app.js): המסגרת ממלאת את
   החלון מעל הכותרת, הסרגל והכפתורים הצפים, כמו מסך מלא אמיתי */
.deck-frame.is-fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}
html.deck-fs, html.deck-fs body { overflow: hidden; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 30px 0 0;
}

.info-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.info-cell dt { font-size: .78rem; color: var(--text-muted); margin-bottom: 5px; }
.info-cell dd { margin: 0; font-size: .97rem; color: var(--text-heading); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 34px 0 0;
}

.pager .btn { max-width: 46%; }
.pager .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* אותו pager בראש עמוד הפתרון, ליד הכותרת: חצים קטנים בלבד, והכותרת
   של השאלה בתווית לקורא מסך (הבעלים, d4vm 2026-09-12). */
.pager-top { margin: 0 0 6px; gap: 6px; justify-content: flex-end; }
.pager-top .btn { max-width: none; padding: 5px 11px; font-size: 1.05rem; line-height: 1; min-height: 34px; }

/* ── הודעות ופוטר ────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 50px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.note {
  background: var(--info-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: .9rem;
  color: var(--aqua-text);
  margin: 20px 0 0;
}

/* ── הפוטר השקט ── (docs/redesign/calm-home/guidelines.md, "פוטר")
   על הנייר ולא על הדיו: קו עליון, שורת קישורים, הקרדיט של העמוד, ושורת
   הזכויות עם הרשתות. build_nav כותב את השורה הראשונה והאחרונה בכל עמוד.
   88px בתחתית: בסוף הגלילה הכפתורים הצפים (דיווח, לראש הדף) לא יושבים
   על שורת הזכויות. */
.site-footer {
  margin-top: 70px;
  background: var(--bg);
  border-top: 1px solid var(--line-calm);
  color: var(--text-muted);
  padding: 32px 0 88px;
  font-size: 14px;
  line-height: 1.6;
}
/* עד שהדפדפן סיים לפענח את העמוד (#fm-parsed, האחרון ב-body, ‏build_nav)
   הפוטר סמוי: אחרת הוא נצבע מתחת ל-main ריק ונדחף כשהתוכן נכתב (מהירות, 2026-09-30).
   רק ב-body[data-fm-wait], שהוא ההצהרה של build_nav שהסימן אכן יגיע. */
body[data-fm-wait]:not(:has(> #fm-parsed)) > .site-footer { visibility: hidden; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.footer-links a,
.footer-social a { color: var(--text-calm); text-decoration: none; }
.footer-links a:hover,
.footer-social a:hover { color: var(--iris-deep); text-decoration: underline; }
.footer-fine { margin: 0; max-width: 78ch; }
/* שורת הזכויות. נכתבת בכל עמוד על ידי build_nav.py, ולכן היא אף פעם
   לא חסרה בעמוד חדש ולא נכתבת פעמיים באותו עמוד. */
.footer-legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 16px; }
@media (max-width: 620px) {
  .site-footer { padding: 28px 0 88px; font-size: 13px; }
  .footer-links { gap: 10px 18px; font-size: 14px; }
  .footer-legal { flex-direction: column-reverse; }
}

main { padding-bottom: 20px; }

/* ── מפת האתר ────────────────────────────────────────────────────────── */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}

.map-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.map-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.map-card .step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ink);
  color: #7FE3DC;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.map-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.map-card p { margin: 0 0 12px; font-size: .92rem; color: var(--text-muted); }

.map-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: .87rem;
  color: var(--text-muted);
}
.map-card li::before { content: "› "; color: var(--accent); }

.map-card .go {
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-hover);
  text-decoration: none;
}

/* ── מדורי הצעה כהים ─────────────────────────────────────────────────── */

/* ── רמות התלמידים ───────────────────────────────────────────────────── */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.level {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.band .level { background: var(--bg); }
.level b { display: block; color: var(--text-heading); margin-bottom: 5px; }
.level span { font-size: .9rem; color: var(--text-muted); }

/* ── האזור הלימודי ───────────────────────────────────────────────────── */
.lesson-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.lesson-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.lesson-card:hover { border-color: var(--accent); transform: translateX(-3px); }

.lesson-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 700;
}

.lesson-card .lesson-body { flex: 1; min-width: 0; }

/* סרטונים לפני מצגות: הכרטיס מוביל להקלטה, והמצגת בקישור צר לצדו */
.lesson-row { display: flex; align-items: stretch; gap: 10px; }
.lesson-row .lesson-card { flex: 1; min-width: 0; }
.lesson-alt {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--accent-hover);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .15s ease;
}
.lesson-alt:hover { border-color: var(--accent); }
.lesson-card h3 { font-size: 1.02rem; margin-bottom: 3px; }
.lesson-card p { margin: 0; font-size: .86rem; color: var(--text-muted); }

/* ── תגית שילוב ──────────────────────────────────────────────────────── */
/* השאלה יושבת בנושא אחד בלבד. אם היא משלבת נושא נוסף היא אומרת זאת כאן,
   וזו גם הדלת לרשימה של אותו נושא כולל שילובים. */
.tag.combines {
  background: var(--surface);
  color: var(--lilac-deep);
  border: 1px dashed var(--violet-pale);
}

.q-card .tag.combines::before { content: "משלב "; opacity: .75; }

.combine-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--violet-soft);
  border: 1px solid var(--violet-pale);
  color: var(--violet-deep);
  font-size: .92rem;
}
.combine-note .btn { background: var(--surface); font-size: .86rem; padding: 7px 13px; }

/* ── מסכים קטנים ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-stage { order: -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .band { padding: 38px 0; }
  main > section.wrap { padding-top: 34px; }
  .stats { gap: 18px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .deck-frame { aspect-ratio: 4 / 3; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }

  .brand { font-size: .97rem; }

  /* במסך צר הסימן יורד יחד עם הכיתוב, אחרת נוצר סימן גדול עם שם
     קטן לידו - ושניהם אמורים להיקרא כיחידה אחת. */
  .brand-mark { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── מרכז התרגול: מקצוע ‹ נושא ────────────────────────────────────────
   עמוד אחד ולא שניים. האזור הלימודי היה עמוד נפרד, והתלמיד היה צריך
   לזכור לעבור אליו כדי להבין ואז לחזור כדי לתרגל. עכשיו התאוריה
   והתרגול של אותו נושא יושבים באותה לשונית. */
.subject-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.subject-bar a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  background: var(--surface);
  border: 1px solid var(--ctl-border);
  color: var(--text-heading);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}

.subject-bar a:hover { border-color: var(--violet); background: var(--violet-soft); }
.subject-bar a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.subject-bar a[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  border-style: dashed;
}
.subject-bar a i { font-style: normal; font-weight: 400; font-size: .78rem; opacity: .7; }

.topic-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--border);
  margin: 22px 0 0;
}
.topic-tabs::-webkit-scrollbar { display: none; }

.topic-tabs button {
  flex: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
}

.topic-tabs button:hover { color: var(--text-heading); background: var(--violet-soft); }

.topic-tabs button[aria-selected="true"] {
  color: var(--violet-deep);
  border-bottom-color: var(--violet);
}

.topic-tabs button em {
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--lilac-deep);
  vertical-align: 1px;
}

/* ── בלוקים בתוך לשונית נושא ─────────────────────────────────────────── */
.hub-block { margin: 32px 0 0; }

.hub-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hub-head h2 { font-size: 1.2rem; }

.hub-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 999px;
}
.hub-kicker.k-theory { background: var(--blue-soft); color: var(--blue-deep); }
.hub-kicker.k-exam { background: var(--ink-2); color: #fff; }

.hub-note {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: .92rem;
  max-width: 70ch;
}


.hub-exit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

/* "בחן אותי" בסוף עמוד המקצוע: על הנייר ולא בפס דיו באמצע העמוד
   (calm-home/guidelines.md, "עיצוב האתר"); האיריס מסמן את הפעולה. */
.exit-card {
  display: block;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-calm);
  text-decoration: none;
  border: 1px solid var(--iris-pale);
}
.exit-card:hover { background: var(--iris-soft); border-color: var(--iris); }
.exit-card b { display: block; color: var(--iris-deep); font-weight: 600; margin-bottom: 3px; }
.exit-card span { font-size: .87rem; color: var(--text-muted); }

.hub-soon {
  padding: 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .93rem;
}

/* ── רשימת הנושאים של מקצוע ──────────────────────────────────────────
   העמוד הראשי של מכניקה או חשמל. שורה לכל נושא, אחת מתחת לשנייה, בסדר
   שבו הם מופיעים בשאלון.

   קודם זו הייתה רשת של כרטיסים ובכל כרטיס תיאור, תגיות ורשימת קישורים.
   העין נאלצה לסרוק עשרות מילים כדי למצוא נושא אחד, והשפע נראה כמו רעש.
   שורה מציגה שם ומד התקדמות - וזה כל מה שצריך כדי לבחור. הספירות
   (מצגות, תרגילים, שאלות) ירדו: הבעלים ביקש קישור נקי (2026-09-21). */
.trows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: trow;
}

.trow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.trow:hover {
  border-color: var(--accent);
  transform: translateX(-3px);
}
.trow.is-soon { background: var(--bg); box-shadow: none; }
.trow.is-soon .trow-name { color: var(--text-muted); }

/* המספר הוא מספר השאלה המשוער בשאלון, ולכן הוא מידע ולא קישוט */
.trow-num {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--violet-soft);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.trow.is-soon .trow-num { background: var(--border); color: var(--text-muted); }

.trow-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trow-name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-heading);
}

.trow-facts {
  font-size: .83rem;
  color: var(--text-muted);
}

.trow-bar {
  flex: none;
  width: 70px;
  height: 6px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.trow-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

.trow-go {
  flex: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
}
.trow:hover .trow-go { color: var(--accent); }

/* "בכתיבה": פריט שהפריסה מבטיחה ואין לו עדיין תוכן - שורה, לא קישור */
.trow.is-pending { cursor: default; }
.trow.is-pending:hover { transform: none; border-color: var(--border); }

@media (max-width: 520px) {
  .trow { gap: 10px; padding: 11px 12px; }
  .trow-bar { display: none; }
  .trow-facts { font-size: .78rem; }
}

/* ── תת נושא בתוך התרגול ─────────────────────────────────────────────
   הכותרת בולטת, כי זו הדרך שבה התלמיד מחפש: לפי מה שהוא לא מבין. */
.hub-sub-block { margin-top: 34px; }
.hub-sub-block:first-of-type { margin-top: 10px; }

/* ‏שם תת הנושא הוא מה שהתלמיד סורק כדי למצוא איפה הוא נמצא, ולכן
   הוא גדול. הבעלים ביקש להגדיל אותו במפורש. */
.hub-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--violet-soft);
  font-size: 1.42rem;
}

.hub-sub-name { color: var(--text-heading); font-weight: 700; }

.hub-sub-meta {
  flex: none;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hub-sub-blurb {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: .87rem;
}

/* שורת העובדות בפתיח של נושא */
.hero-facts {
  margin: 6px 0 12px;
  font-size: .85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* תגית "מתאים לכיתה י׳", אותה תגית שמופיעה גם בפריסה */

.grade-chip {
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  white-space: nowrap;
}

.track-hero .grade-chip {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  margin-inline-start: 10px;
  vertical-align: 4px;
}

.hero-back { color: var(--on-ink-muted); text-decoration: none; }
.hero-back:hover { color: #fff; }

/* ── פתיח נושא / כיתה ────────────────────────────────────────────────
   טקסט מצד אחד ואנימציה מצד שני. האנימציה מסוננת לפי התחום של הכיתה,
   ולכן עמוד מתמטיקה מציג פרבולה ומעגל יחידה, ולא זריקה בזווית. */
.track-hero {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 42%);
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 58%, var(--ink-3) 100%);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  margin: 8px 0 30px;
  box-shadow: var(--shadow-ink);
}

.track-hero-text .eyebrow { color: var(--iris-pale); }
.track-hero-text h2 { color: #fff; font-size: clamp(1.4rem, 3.2vw, 1.95rem); margin: 6px 0 10px; }
.track-hero-text .lead { color: var(--on-ink); opacity: .88; max-width: 46ch; margin: 0; }
/* ‏**טקסט על הפתיח הכהה בגווני הכהה** (‏W2-48, ‏D3, ‏2026-10-01). שורת הכיתה,
   העובדות והפירור קיבלו את גווני הנייר (‏--text-muted, ‏--aqua-deep), ועל החום
   יצאו 1.3 עד 1.9 - "כיתה י"א" ירוק כהה על חום. הקישור לכיתה האחרת בגוון
   הנייר עם קו מרווה: המרווה נשאר סימן הקישור, והטקסט עצמו נקרא. נמדד ביום
   ובלילה מול הגוון של המדרג במקום הטקסט (‏verify_d3_layout.py, ‏ink). */
.track-hero :is(.hero-back, .hero-main) { color: var(--on-ink); }
.track-hero .hero-back:hover { color: #fff; }
.track-hero :is(.grade-line, .grade-note, .hero-facts) { color: var(--on-ink-muted); }
.track-hero .grade-others a {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: var(--aqua-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.track-hero .grade-others a:hover { color: #fff; }

.track-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 20px 0 0;
}
.track-facts div { margin: 0; }
.track-facts dt {
  color: var(--on-ink-muted);
  font-size: .78rem;
  letter-spacing: .02em;
  margin: 0 0 2px;
}
.track-facts dd { color: #fff; font-weight: 600; font-size: .95rem; margin: 0; }

.track-hero-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--iris-pale);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.track-hero-link:hover { color: #fff; text-decoration: underline; }

/* גרסה נמוכה, לשימוש מעל לשונית נושא בתרגול. שם הפתיח הוא כותרת
   ולא במה, ולכן הוא לא לוקח חצי מסך. */
.track-hero.is-compact { padding: 20px 22px 18px; margin-bottom: 22px; }
.track-hero.is-compact .hero-canvas { aspect-ratio: 16 / 9; }
.track-hero.is-compact .track-hero-text h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

@media (max-width: 860px) {
  .track-hero { grid-template-columns: 1fr; padding: 22px 18px 20px; }
  .track-hero .hero-stage { order: -1; }
}

/* ── נגן ההקלטה ──────────────────────────────────────────────────────
   יחס 16:9 נשמר דרך aspect-ratio ולא דרך padding-top, כדי שהקופסה
   תשמור על גובה נכון גם לפני שה-iframe נכנס אליה. */
.video-block { margin-top: 34px; }
.video-block.is-first { margin-top: 0; margin-bottom: 26px; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--ink);
}

/* הודעה מתחת לנגן, כשההטמעה נדחתה. אין כאן אדום: הצבע במערכת הוא
   מידע, ומצב "לא מתנגן מכאן" הוא הקשר ולא שגיאת תשובה. */
.video-note {
  margin: 10px 2px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--lilac);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--lilac-deep);
}

.video-note a { color: var(--iris); }

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* חזית הנגן לפני הלחיצה. כפתור ולא div, כדי שהמקלדת תגיע אליו. */
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--on-ink-muted, #C9CCE0);
  cursor: pointer;
  border: 0;
  background: var(--ink);
}

.video-play:hover { color: #fff; }

.video-play-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--iris);
  color: #fff;
  transition: transform .15s ease, background .15s ease;
}

.video-play-mark svg { width: 30px; height: 30px; margin-inline-start: 3px; }
.video-play:hover .video-play-mark { background: var(--iris-deep); transform: scale(1.06); }
.video-play:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; }

/* ── המלצות ─────────────────────────────────────────────────────────
   סרט נע. ההמלצות עצמן נערכות ב-data/voices.js, ואין כאן המצאות:
   כשהרשימה ריקה מוצגים כרטיסים שכתוב עליהם שהם ממתינים להמלצה. */
.voices {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scroll-snap-type: x proximity;
}

.voices.is-running {
  overflow: hidden;
  animation: voices-roll 46s linear infinite;
}

.voices.is-running:hover,
.voices.is-running:focus-within { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .voices.is-running { animation: none; overflow-x: auto; }
}

@keyframes voices-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.voice {
  flex: 0 0 clamp(240px, 30vw, 320px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
}

.voice-text { margin: 0 0 10px; }
.voice-who { margin: 0; font-size: .84rem; color: var(--text-muted); }
.voice.is-empty { border-style: dashed; }
.voice.is-empty .voice-text { color: var(--text-muted); }

.voice-form {
  margin-top: 26px;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}

.voice-form h3 { margin: 0 0 4px; font-size: 1.02rem; }
.voice-note { margin: 0 0 14px; font-size: .86rem; color: var(--text-muted); }
.voice-form label { display: block; margin-bottom: 12px; font-size: .88rem; }
.voice-form input,
.voice-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
}
.voice-sent { margin: 10px 0 0; font-size: .88rem; color: var(--ok); }

/* ── שאלוני הבגרות, חינם ────────────────────────────────────────────── */
.papers-note { color: var(--text-muted); font-size: .9rem; margin: 0 0 18px; }

.paper-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 18px;
}

.paper-group + .paper-group { margin-top: 18px; }
.paper-group h3 { margin: 0 0 14px; font-size: 1.08rem; }
.paper-group h3 i { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: .84rem; }

/* פיזיקה: גוש אחד למכניקה וגוש אחד לחשמל, ובכל גוש שורה לכל שאלון.
   הגוש רחב על פני כל השורה, כדי ששני הקודים של אותו מקצוע ייקראו כרצף. */
.paper-row { padding: 12px 0 4px; border-top: 1px dashed var(--border); }
.paper-row:first-of-type { border-top: 0; padding-top: 0; }
.paper-row h4 { margin: 0 0 8px; font-size: .92rem; font-weight: 600; color: var(--text-heading); }
.paper-row h4 i { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: .8rem; }

/* ── טופס ופתרון, בכרטיס אחד ────────────────────────────────────────────
   קודם אלה היו שני כפתורים דבוקים בשורה של עשרים ושניים כפתורים, ולא
   היה ברור איזה "פתרון" שייך לאיזו שנה. עכשיו כל טופס הוא כרטיס עם
   השנה, הקוד שעליו, ושני הקישורים מתויגים בתוכו. */
.paper-forms {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* ‏**קופסה אחת סגורה, ובתוכה קווי הפרדה.** הבעלים: "שכל שנה והפתרון
   שלה יהיו בצורה סגורה אחת עם קו הפרדה בין השאלון לבין הפתרון".
   לכן לקישורים אין מסגרת משלהם: הם שורות בתוך הכרטיס, והקו ביניהן
   הוא מה שאומר ששניהם של אותה שנה. */
.paper-form {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.paper-form-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 13px 8px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
}
.paper-form-head b {
  font-size: 1.12rem; font-weight: 700; color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.paper-form-head i {
  font-style: normal; font-size: .78rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* ‏**המועד, בשורה משלו.** במתמטיקה יש שלושה טפסים לאותה שנה ואותו
   קוד - קיץ, מועד ב׳ וחורף - והמועד הוא הדבר היחיד שמבדיל ביניהם.
   לחיצה על "טופס הבחינה" הלא נכון היא בדיוק מה שהוא מונע. ‏`lilac`
   כי זה הקשר, כמו בתגיות. */
.paper-form-head { flex-wrap: wrap; }
.paper-form-moed {
  flex-basis: 100%;
  font-style: normal; font-size: .78rem; color: var(--lilac-deep);
}

.paper-form-link {
  display: block; padding: 9px 13px;
  font-size: .86rem;
  color: var(--text-heading); text-decoration: none;
}
.paper-form-link + .paper-form-link { border-top: 1px solid var(--border); }
.paper-form-link:hover { background: var(--iris-soft); color: var(--accent); }
.paper-form-link.is-sol { color: var(--aqua-deep); font-weight: 600; }
.paper-form-link.is-sol:hover { background: var(--aqua-soft); }
/* אין פתרון רשמי - נאמר, ולא מושמט. שורה חסרה נקראת כתקלה בטעינה. */
.paper-form-link.is-none {
  color: var(--text-muted); font-size: .8rem;
}
/* לפתור באתר עם ניוטי - פעולה, ולכן איריס. */
.paper-form-link.is-solve { color: var(--iris-deep); font-weight: 600; }

/* ‏"תוכנית ישנה": הטפסים של הקוד הישן, מאחורי כפתור אחד בסוף הרשימה
   (הבעלים, 2026-09-12). סגור כברירת מחדל; הקוד הישן כתוב על הכפתור. */
.paper-old { margin: 12px 0 0; }
.paper-old-toggle { font-size: .9rem; padding: 8px 16px; }
.paper-old-toggle i { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: .8rem; }
.paper-old-toggle[aria-expanded="true"] { background: var(--surface); border-color: var(--accent); }
.paper-old-forms { margin-top: 12px; }

/* שורה לכל טופס: השנה, ומתחתיה שורת המקור - הסמל והמועד - כקישור
   לשאלון המקורי (iris, פעולה), או כטקסט כשהטופס אינו ידוע. כך ליד כל
   ריבוע רשום מאיזו בגרות הוא (הבעלים, 2026-09-22). */
.paper-solve-y b { display: block; font-weight: 600; }
.paper-src {
  display: block; font-style: normal; font-weight: 500; font-size: .74rem;
  white-space: nowrap; color: var(--text-muted);
}
a.paper-src { color: var(--iris); text-decoration: none; }
a.paper-src:hover, a.paper-src:focus-visible { text-decoration: underline; color: var(--accent-hover); }

/* השאלות שאפשר לפתור, בתוך כרטיס השאלון. הן מובחנות מרשימת השנים
   (שהיא קישור החוצה, ל-PDF של משרד החינוך) בקו מפריד ובכותרת. */
.paper-solve { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.paper-solve h4 {
  margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: var(--text-heading);
}
.paper-solve h4 i {
  font-style: normal; font-weight: 400; color: var(--text-muted); font-size: .8rem;
}
.paper-solve-y {
  flex: 0 0 auto; min-width: 3.2em; padding-top: 6px;
  font-size: .84rem; font-weight: 600; color: var(--text-muted);
}

/* כרטיס שאלון ברשימת תשעת השאלונים. */
.paper-cards {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.paper-card {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 14px 16px 15px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
  text-decoration: none; color: inherit;
}
/* הקודים שעל גבי הטופס. שני קודים חיים במקביל לאותו שאלון. */
.paper-card-codes { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 4px; }
.paper-card-codes i {
  font-style: normal; font-size: .76rem; font-variant-numeric: tabular-nums;
  color: var(--iris); background: var(--iris-soft);
  border-radius: 999px; padding: 1px 8px;
}
.paper-card-solved { color: var(--aqua-deep); font-weight: 600; }
.paper-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.paper-card b { font-size: 1rem; color: var(--text-heading); }
.paper-card-meta { font-size: .8rem; color: var(--text-muted); }
/* ‏"שאלות לפתירה בכתיבה" - הערת הקשר על הכרטיס, ולכן הגוון נשאר
   לילך. ‏--lilac עצמו הוא 1.17 על המשטח והוא נועד לרקע של תגית;
   ‏--lilac-deep הוא אותו תפקיד בגוון שנקרא, 7.09. */
.paper-soon { color: var(--lilac-deep); font-weight: 600; }
.paper-soon-box {
  margin: 0; padding: 10px 12px; font-size: .88rem; color: var(--text-muted);
  border: 1px dashed var(--lilac); border-radius: var(--radius-btn);
}
.papers-back { margin: 0 0 14px; font-size: .88rem; }
.paper-single { padding: 20px 22px 22px; }
.paper-single h4 { margin: 18px 0 12px; font-size: .92rem; color: var(--text-heading); }
.paper-single h4:first-of-type { margin-top: 0; }
.paper-single h4 i {
  font-style: normal; font-weight: 400; color: var(--text-muted); font-size: .8rem;
}
/* ההמלצות יושבות בתחתית העמוד, אחרי הקטלוג. הקטלוג הוא כבר `.band`,
   ושני פסים רצופים מתמזגים לגוש אחד - ולכן כאן נייר ולא פס. */
.voices-section { padding: 46px 0 8px; }

/* מספר המשפט ברשימת משרד החינוך. זה המספר שהתלמיד מצטט בבחינה. */
.pf-num {
  display: inline-block; min-width: 1.5rem; text-align: center;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--aqua-deep); background: var(--aqua-soft);
  border-radius: 999px; padding: 0 .35rem; margin-inline-end: .35rem;
}
/* לשונית "השלמות וחזרות": אין בה נושא חדש, ולכן היא מפנה למבחן */
.kx-revision {
  padding: 1rem 1.1rem; border: 1px solid var(--border);
  border-radius: var(--radius-btn); background: var(--bg);
}
.kx-revision p { margin: 0 0 .7rem; color: var(--text-muted); font-size: .92rem; }

/* ── סימון נתונים על השרטוט ─────────────────────────────────────────
   כפתור לכל נתון. השרטוט הבסיסי נקי, והתלמיד מדליק רק את מה שהוא
   בודק כרגע - אחרת שאלה עם שבעה נתונים הופכת לרשת קווים. */
.scene-givens {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .5rem 0 .2rem;
}
.sg-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: .22rem .55rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
}
.sg-chip i {
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--c, var(--iris)); opacity: .35; flex: none;
}
.sg-chip:hover { border-color: var(--c, var(--iris)); }
.sg-chip.is-on {
  color: var(--c, var(--iris)); border-color: var(--c, var(--iris));
  background: var(--surface);
}
.sg-chip.is-on i { opacity: 1; }
.sg-all { color: var(--aqua-deep); border-style: dashed; }

/* ── השרטוט לעמוד מלא ──────────────────────────────────────────────
   שרטוט, נתונים ומה שצריך להוכיח - שלושתם יחד מול העיניים, כדי
   שאפשר יהיה לעבוד לצדם במחברת. */
body.zoom-open { overflow: hidden; }
.zoom {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(38, 32, 54, .55);
  display: flex; flex-direction: column;
  padding: clamp(.5rem, 2vw, 1.5rem);
}
.zoom-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  padding: .6rem .9rem;
}
.zoom-head strong { font-size: 1rem; color: var(--text-heading); }
.zoom-close {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .3rem .8rem; border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text);
}
.zoom-close:hover { border-color: var(--iris); color: var(--iris); }
.zoom-body {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 22rem);
  gap: 0; background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  overflow: hidden;
}
.zoom-fig { padding: 1rem; overflow: auto; position: relative; }
.zoom-fig .scene-svg { max-height: none; }
/* ‏במסך המלא ה-viewBox הוא השרטוט עצמו (‏scenes.js, ‏crop; ‏D3), ולכן במחשב
   הוא ממלא את הרוחב וגובהו היה עובר את החלון. כאן הגובה נחתך לחלון, והשרטוט
   ממורכז ברוחב; בטלפון הרוחב קובע, והחלונית נגללת. */
@media (min-width: 721px) {
  .zoom-fig .scene-svg { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
}

/* ── כתיבה על השרטוט ────────────────────────────────────────────────
   המסך המלא אינו רק הגדלה: מסמנים עליו את מה שכבר נמצא, ומשם ממשיכים.
   הציור נשמר תחת אותו מזהה שבעמוד, ולכן הוא מופיע גם בשרטוט הקטן. */
.zoom-head { flex-wrap: wrap; row-gap: .5rem; }
.zoom-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  margin-inline-start: auto; margin-inline-end: .6rem;
}
.zoom-tools-group { display: inline-flex; align-items: center; gap: .35rem; }
.zoom-tools button {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .3rem .7rem; border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text);
}
.zoom-tools button:hover { border-color: var(--iris); color: var(--iris); }
.zoom-tools button.is-on {
  background: var(--iris); border-color: var(--iris); color: var(--on-accent);
}
/* ‏שישה צבעים: עיגול בצבע עצמו, וטבעת כשהוא נבחר. ‏--sw מגיע מהכפתור. */
.zoom-tools .zoom-swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: var(--sw); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.zoom-tools .zoom-swatch:hover { box-shadow: 0 0 0 2px var(--sw); }
.zoom-tools .zoom-swatch.is-on {
  background: var(--sw); border-color: var(--surface);
  box-shadow: 0 0 0 2.5px var(--sw);
}
/* ‏שלושה עוביים: נקודה בגודל הקו. */
.zoom-tools .zoom-size {
  width: 30px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.zoom-tools .zoom-size i {
  display: block; width: var(--d); height: var(--d); border-radius: 50%;
  background: currentColor;
}
/* בזמן כתיבה הקנבס לוכד את המצביע. בלי זה גרירה על השרטוט גוללת. */
.zoom.is-writing .zoom-fig { overflow: hidden; touch-action: none; }
.zoom-side {
  border-inline-start: 1px solid var(--border);
  background: var(--bg); padding: 1rem; overflow: auto;
}
.zoom-side h4 {
  margin: .9rem 0 .35rem; font-size: .82rem; color: var(--aqua-deep);
}
.zoom-side h4:first-child { margin-top: 0; }
.zoom-statement { margin: 0; font-size: .92rem; line-height: 1.6; }
.zoom-list { margin: 0; padding-inline-start: 1.1rem; font-size: .88rem; }
.zoom-list li { margin-bottom: .25rem; }
.zoom-prove li { font-weight: 600; color: var(--text-heading); }
.zoom-open-btn {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .25rem .7rem; border-radius: var(--radius-btn);
  border: 1px solid var(--aqua-text); background: transparent; color: var(--aqua-text);
}
.zoom-open-btn:hover { background: var(--aqua-text); color: var(--on-accent); }

@media (max-width: 720px) {
  .zoom-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .zoom-side { border-inline-start: 0; border-top: 1px solid var(--border); }
}

/* ── סימון נתונים על השרטוט ─────────────────────────────────────────
   כפתור לכל נתון. השרטוט הבסיסי נקי, והתלמיד מדליק רק את מה שהוא
   בודק כרגע - אחרת שאלה עם שבעה נתונים הופכת לרשת קווים. */
.scene-givens {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .5rem 0 .2rem;
}
.sg-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: .22rem .55rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
}
.sg-chip i {
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--c, var(--iris)); opacity: .35; flex: none;
}
.sg-chip:hover { border-color: var(--c, var(--iris)); }
.sg-chip.is-on {
  color: var(--c, var(--iris)); border-color: var(--c, var(--iris));
  background: var(--surface);
}
.sg-chip.is-on i { opacity: 1; }
.sg-all { color: var(--aqua-deep); border-style: dashed; }

/* ── השרטוט לעמוד מלא ──────────────────────────────────────────────
   שרטוט, נתונים ומה שצריך להוכיח - שלושתם יחד מול העיניים, כדי
   שאפשר יהיה לעבוד לצדם במחברת. */
body.zoom-open { overflow: hidden; }

/* ── הוכחה בגאומטריה ───────────────────────────────────────────────
   טבלת טענה ונימוק, ובנק משפטים בלשונית שנייה. שתי העמודות הן מה
   שהתלמיד מכיר מהמחברת ומהבגרות; מספר השורות אומר כמה שלבים יש. */
.pf { margin: .6rem 0 0; }
.pf-lead {
  font-size: .87rem; color: var(--lilac-deep);
  margin: 0 0 .55rem; font-weight: 600;
}

.pf-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.pf-modes { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; }
.pf-mode {
  font: inherit; font-size: .82rem; padding: .3rem .75rem; cursor: pointer;
  background: var(--surface); color: var(--text-muted); border: 0;
}
.pf-mode + .pf-mode { border-inline-start: 1px solid var(--border); }
.pf-mode.is-on { background: var(--iris); color: var(--on-accent); }

/* מקלדת הסימנים. רק מה שנחוץ להוכחה בגאומטריה. */
.pf-key {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  min-width: 2rem; padding: .28rem .3rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-heading);
}
.pf-key:hover { border-color: var(--iris); color: var(--iris); }

.pf-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-btn); overflow: hidden;
}
.pf-table th {
  text-align: start; font-size: .78rem; font-weight: 700;
  color: var(--text-muted); background: var(--bg);
  padding: .4rem .6rem; border-bottom: 1px solid var(--border);
}
.pf-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-table .pf-n { width: 2rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-table .pf-mark { width: 2rem; text-align: center; font-weight: 700; }
.pf-table .pf-claim { width: 42%; }

.pf-in {
  width: 100%; font: inherit; font-size: .85rem;
  padding: .3rem .4rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
}
.pf-in:focus { outline: 2px solid var(--iris); outline-offset: 1px; }

.pf-table tr.is-here td { background: var(--lilac); }
.pf-table tr.is-ok td { background: var(--ok-soft); }
.pf-table tr.is-no td { background: var(--no-soft); }
.pf-table tr.is-ok .pf-flag { color: var(--ok); }
.pf-table tr.is-no .pf-flag { color: var(--no); }
.pf-table td.is-over { outline: 2px dashed var(--iris); outline-offset: -2px; }
.pf.is-dragging td[data-drop] { background: var(--iris-soft); }

.pf-actions { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; flex-wrap: wrap; }
.pf-msg { font-size: .85rem; }
.pf-msg.is-ok { color: var(--ok); font-weight: 600; }
.pf-msg.is-no { color: var(--text-muted); }

/* המשוב אומר גם מה נכון, ולא רק כמה שגוי */
.pf-feedback { margin-top: .6rem; display: grid; gap: .35rem; }
.pf-fb {
  margin: 0; font-size: .85rem; line-height: 1.55;
  padding: .45rem .65rem; border-radius: 8px;
  border-inline-start: 3px solid var(--border);
  background: var(--bg);
}
.pf-fb-ok { border-inline-start-color: var(--ok); background: var(--ok-soft); }
.pf-fb-near { border-inline-start-color: var(--aqua); background: var(--aqua-soft); }
.pf-fb-no { border-inline-start-color: var(--no); background: var(--no-soft); }
.pf-fb-todo { border-inline-start-color: var(--border-strong); }

/* ── בנק המשפטים ─────────────────────────────────────────────────── */
.pf-bank-tip { font-size: .8rem; color: var(--text-muted); margin: 0 0 .5rem; }

.pf-cards {
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  max-height: 26rem; overflow-y: auto;
}
.pf-card {
  display: flex; gap: .55rem; align-items: center; cursor: grab;
  padding: .4rem .5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-btn);
}
.pf-card:hover, .pf-card:focus-visible {
  border-color: var(--iris); background: var(--iris-soft); outline: 0;
}
.pf-card:active { cursor: grabbing; }
.pf-mini { display: block; width: 100%; height: auto; }

/* מספר המשפט ברשימת משרד החינוך. זה המספר שהתלמיד מצטט בבחינה. */
.pf-num {
  display: inline-block; min-width: 1.5rem; text-align: center;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--aqua-deep); background: var(--aqua-soft);
  border-radius: 999px; padding: 0 .35rem; margin-inline-end: .35rem;
}
.pf-model td { background: var(--bg); }

@media (max-width: 560px) {
  .pf-table { font-size: .8rem; }
  .pf-table td { padding: .3rem .35rem; }
  .pf-table .pf-n { width: 1.4rem; }
  .pf-cards { grid-template-columns: 1fr; }
}

/* ── הוכחה בגאומטריה ───────────────────────────────────────────────
   טבלת טענה ונימוק, ולצדה בנק הצעדים. **לא בשתי לשוניות**: לחיצה על
   הבנק הייתה מעלימה את הטבלה, והתלמיד מאבד את מה שהוא בונה. */
.pf { margin: .6rem 0 0; }
.pf-lead {
  font-size: .87rem; color: var(--lilac-deep);
  margin: 0 0 .6rem; font-weight: 600;
}

.pf-grid {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}

/* מקלדת הסימנים. רק מה שנחוץ להוכחה בגאומטריה. */
.pf-key {
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  min-width: 2.1rem; padding: .3rem .3rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-heading);
}
.pf-key:hover { border-color: var(--iris); color: var(--iris); }

.pf-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-btn); overflow: hidden;
}
.pf-table th {
  text-align: start; font-size: .78rem; font-weight: 700;
  color: var(--text-muted); background: var(--bg);
  padding: .4rem .6rem; border-bottom: 1px solid var(--border);
}
.pf-table td { padding: .3rem .45rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-table .pf-n { width: 2rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-table .pf-mark { width: 3rem; text-align: center; font-weight: 700; white-space: nowrap; }
.pf-table .pf-claim { width: 44%; }

.pf-in {
  width: 100%; font: inherit; font-size: .85rem;
  padding: .32rem .45rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
}
.pf-in:focus { outline: 2px solid var(--iris); outline-offset: 1px; }

.pf-clear {
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
  border: 0; background: 0; color: var(--text-muted);
  padding: 0 .2rem; opacity: 0;
}
tr:hover .pf-clear, tr.is-here .pf-clear { opacity: 1; }
.pf-clear:hover { color: var(--no); }

.pf-table tr.is-here td { background: var(--lilac); }
.pf-table tr.is-ok td { background: var(--ok-soft); }
.pf-table tr.is-no td { background: var(--no-soft); }
.pf-table tr.is-ok .pf-flag { color: var(--ok); }
.pf-table tr.is-no .pf-flag { color: var(--no); }
.pf-table tr.is-over td { outline: 2px dashed var(--iris); outline-offset: -2px; }
.pf.is-dragging .pf-table tbody tr td { background: var(--iris-soft); }

.pf-actions { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; flex-wrap: wrap; }
.pf-msg { font-size: .85rem; }
.pf-msg.is-ok { color: var(--ok); font-weight: 600; }
.pf-msg.is-no { color: var(--text-muted); }

/* המשוב אומר גם מה נכון, ולא רק כמה שגוי */
.pf-feedback { margin-top: .6rem; display: grid; gap: .35rem; }
.pf-fb {
  margin: 0; font-size: .85rem; line-height: 1.55;
  padding: .45rem .65rem; border-radius: 8px;
  border-inline-start: 3px solid var(--border); background: var(--bg);
}
.pf-fb-ok { border-inline-start-color: var(--ok); background: var(--ok-soft); }
.pf-fb-near { border-inline-start-color: var(--aqua); background: var(--aqua-soft); }
.pf-fb-no { border-inline-start-color: var(--no); background: var(--no-soft); }
.pf-fb-todo { border-inline-start-color: var(--border-strong); }

/* ── בנק הצעדים ──────────────────────────────────────────────────── */
.pf-side {
  border: 1px solid var(--border); border-radius: var(--radius-btn);
  background: var(--bg); padding: .7rem .75rem;
  position: sticky; top: calc(var(--header-h) + .6rem);
}
.pf-side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .3rem;
}
.pf-side-head strong { font-size: .92rem; color: var(--text-heading); }
.pf-full { font-size: .8rem; font-weight: 600; color: var(--aqua-deep); }
.pf-bank-tip { font-size: .78rem; color: var(--text-muted); margin: 0 0 .55rem; }

.pf-cards { display: grid; gap: .4rem; max-height: 30rem; overflow-y: auto; }
.pf-card {
  display: flex; gap: .5rem; align-items: center; cursor: grab;
  padding: .4rem .5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-btn);
}
.pf-card:hover, .pf-card:focus-visible {
  border-color: var(--iris); background: var(--iris-soft); outline: 0;
}
.pf-card:active { cursor: grabbing; }
.pf-mini { display: block; width: 100%; height: auto; }
.pf-card-claim {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--text-heading); line-height: 1.35;
}
.pf-card-reason {
  display: block; font-size: .76rem; color: var(--text-muted);
  line-height: 1.4; margin-top: .12rem;
}

/* מספר המשפט ברשימת משרד החינוך. זה המספר שהתלמיד מצטט בבחינה. */
.pf-num {
  display: inline-block; min-width: 1.4rem; text-align: center;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--aqua-deep); background: var(--aqua-soft);
  border-radius: 999px; padding: 0 .3rem; margin-inline-end: .3rem;
}
.pf-model td { background: var(--bg); }

@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-side { position: static; }
  .pf-cards { max-height: 20rem; }
}
@media (max-width: 560px) {
  .pf-table { font-size: .8rem; }
  .pf-table td { padding: .25rem .3rem; }
  .pf-table .pf-n { width: 1.4rem; }
}

/* ── מסך מלא להוכחה ────────────────────────────────────────────────
   שרטוט גדול מצד אחד, טבלה ובנק מהצד השני. פותרים מול השרטוט. */
.proof-page {
  max-width: 1500px; margin: 0 auto;
  padding: 1rem clamp(.7rem, 2vw, 1.5rem) 2.5rem;
}
.pf-page-head {
  display: flex; align-items: baseline; gap: .9rem;
  flex-wrap: wrap; margin-bottom: .9rem;
}
.pf-page-head h1 { margin: 0; font-size: 1.3rem; }
.pf-part {
  font-size: .8rem; font-weight: 700; color: var(--aqua-deep);
  background: var(--aqua-soft); border-radius: 999px; padding: .1rem .6rem;
}
.pf-part-nav { display: flex; gap: .35rem; margin-inline-start: auto; }
.pf-part-nav a {
  font-size: .8rem; font-weight: 600; padding: .2rem .65rem;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); background: var(--surface);
}
.pf-part-nav a[aria-current] { border-color: var(--iris); color: var(--iris); }

.pf-page-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
}
.pf-fig-pane { position: sticky; top: calc(var(--header-h) + .6rem); }
.pf-facts {
  margin-top: .8rem; padding: .8rem .95rem;
  border: 1px solid var(--border); border-radius: var(--radius-btn);
  background: var(--bg);
}
.pf-facts h2 {
  margin: .8rem 0 .3rem; font-size: .8rem; color: var(--aqua-deep);
}
.pf-facts h2:first-child { margin-top: 0; }
.pf-list { margin: 0; padding-inline-start: 1.1rem; font-size: .88rem; }
.pf-list li { margin-bottom: .22rem; }
.pf-list .pf-statement {
  list-style: none; margin-inline-start: -1.1rem;
  margin-bottom: .6rem; line-height: 1.65;
}
.pf-ask {
  margin: 0; font-size: .92rem; font-weight: 600;
  color: var(--text-heading);
}
/* במסך המלא הבנק כבר בעמודה שלו, ולכן הטבלה מקבלת את כל הרוחב */
.pf-work .pf-grid { grid-template-columns: 1fr; }
.pf-work .pf-side { position: static; }

@media (max-width: 1000px) {
  .pf-page-grid { grid-template-columns: 1fr; }
  .pf-fig-pane { position: static; }
}

/* ── רצף מתמטי מבודד ────────────────────────────────────────────────
   ‏`Formulas.expand` עוטף כל ביטוי ב-dir="ltr". **הרצף לא נשבר בסוף
   שורה**: "∡B = 60°" שנשבר בין שתי שורות הופיע כ-"∡B" בסוף האחת
   ו-"= 60°" בקצה השנייה, כלומר שני חצאים רחוקים זה מזה שנקראים
   כשני נתונים שונים.

   רצף ארוך מסומן `mrun-wrap` וכן נשבר, אחרת נוסחה ארוכה הייתה
   גולשת מהמסך בטלפון. */
.mrun { white-space: nowrap; }
.mrun-wrap { white-space: normal; }

/* ── תוכן שאינו במנוי ────────────────────────────────────────────────
   גוון אחר, לא הסתרה: מנוי של כיתה י״א רואה שיש י״ב מוכן, ויודע מה
   לקנות. אורח אינו נצבע - אצלו השער בשרת עושה את העבודה. */
.is-locked { opacity: .55; filter: saturate(.35); }
.is-locked:hover { opacity: .8; }
.lock-chip {
  display: inline-block; vertical-align: middle;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--lilac); color: var(--lilac-deep);
}
.lock-note {
  margin: 14px 0 18px; padding: 12px 16px;
  border-inline-start: 3px solid var(--lilac-deep);
  background: var(--surface); border-radius: 0 10px 10px 0;
  font-size: .95rem; line-height: 1.6;
}
.lock-note a { color: var(--iris); font-weight: 600; }
.lock-note.is-page { margin: 32px auto; max-width: 560px; border-radius: 12px;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--lilac-deep); }
.lock-note.is-page h2 { margin: 0 0 8px; font-size: 1.2rem; }
.lock-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }

/* ── שורש ארוך ───────────────────────────────────────────────────────
   קו השורש מכסה את כל הביטוי, כמו בכיתה ובדף הנוסחאות. ‏√(b² − 4ac)
   עם סוגריים נכון מתמטית, אבל זו לא הצורה שהתלמיד לומד. */
.fml-sqrt { white-space: nowrap; }
.fml-radicand {
  display: inline-block; border-top: 1.5px solid currentColor;
  padding: .05em .12em 0 .1em; margin-inline-start: -.05em; line-height: 1.15;
}

/* ── "אני צריך עזרה": הסעיף שהמלווה עומד עליו נראה לחוץ ─────────────── */
.btn.help.is-on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}

/* ── סבב המשוב השלישי, 2026-09-05 ─────────────────────────────────── */

/* סימני זווית ומשולש בגופן שמצייר אותם כמו בספר. ב-Segoe UI סימן הזווית
   נראה כמו הספרה 4. */
.msym { font-family: "Cambria Math", "Noto Sans Math", "DejaVu Sans", "Times New Roman", serif; line-height: 1; }
.pf-claim-txt, .pf-key, .pf-card-claim, .pf-model td:nth-child(2) {
  font-family: "Cambria Math", "Segoe UI", "Assistant", Arial, sans-serif;
}

/* תשובה נכונה שחסר לה נימוק: לא ירוק ולא שזיף. לילך, וחצי עיגול. */
.answer-note.is-partial, .ws-note.is-partial { color: var(--lilac-deep); font-weight: 600; }
.answer-note.is-partial::before, .ws-note.is-partial::before { content: "◐ "; }
.part.is-partial { box-shadow: inset 4px 0 0 var(--lilac); }
.answer-why { margin: .5rem 0 .3rem; display: grid; gap: .45rem; }
.answer-why label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.answer-why textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); }
.answer-why .btn { justify-self: start; }
.answer-why.is-done textarea { border-color: var(--ok); }

/* הכיתה בפתיח הנושא */
.grade-line { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: .1rem 0 .55rem; font-size: .86rem; color: var(--text-muted); }
.grade-chip { background: var(--iris); color: var(--on-accent); padding: .18rem .7rem; border-radius: 999px; font-weight: 700; font-size: .84rem; }
.grade-others a { color: var(--aqua-deep); font-weight: 700; }

/* חגיגה: קונפטי וכרטיס */
.cele-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.cele-card {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 1001;
  transform: translate(-50%, 1.2rem); opacity: 0;
  display: flex; align-items: center; gap: .85rem; max-width: 92vw;
  padding: .8rem 1.1rem; background: var(--surface); direction: rtl;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(30, 20, 80, .18);
  transition: transform .35s ease, opacity .35s ease;
}
.cele-card.is-in { transform: translate(-50%, 0); opacity: 1; }
.cele-mark { color: var(--ok); display: inline-flex; }
.cele-ring { stroke-dasharray: 140; stroke-dashoffset: 140; animation: cele-draw .6s ease-out forwards; }
.cele-tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: cele-draw .4s .45s ease-out forwards; }
@keyframes cele-draw { to { stroke-dashoffset: 0; } }
.cele-text { display: grid; gap: .1rem; }
.cele-text b { font-size: 1.05rem; color: var(--text-heading); }
.cele-text span { font-size: .84rem; color: var(--text-muted); }
.cele-text em { font-style: normal; color: var(--iris); font-weight: 700; }
.cele-next { margin-inline-start: .3rem; font-weight: 700; color: var(--on-accent); background: var(--iris); padding: .45rem .85rem; border-radius: var(--radius-btn); white-space: nowrap; }
.cele-next:hover { background: var(--iris-deep, var(--iris)); }

/* בנק הצעדים: רחב יותר, עוטף, בלי גלילה פנימית ובלי שרטוטים זעירים */
.pf-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pf-side { position: static; }
.pf-side-head { display: flex; align-items: baseline; gap: .5rem; }
.pf-side-note { font-size: .75rem; color: var(--text-muted); }
.pf-cards { display: flex; flex-wrap: wrap; gap: .45rem; max-height: none; overflow: visible; }
.pf-card { flex: 1 1 13rem; display: grid; gap: .2rem; align-items: start; padding: .5rem .65rem; }
.pf-card-claim { display: block; font-weight: 700; font-size: .98rem; color: var(--text-heading); direction: ltr; text-align: left; }
.pf-card-reason { display: block; font-size: .78rem; color: var(--text-muted); line-height: 1.35; }

/* רמת האתגר */
.pf-bar-label { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.pf-bar .pf-full { margin-inline-start: auto; }

/* לוח הבנייה */
.pf-pal { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: 0 0 .55rem; padding: .4rem .5rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-btn); }
.pf-pal-tip { font-size: .76rem; color: var(--text-muted); }
.pf-pal-sep { flex-basis: 100%; height: 0; }
.pf-pal-key { font: inherit; font-size: 1rem; line-height: 1; min-width: 2.1rem; padding: .32rem .35rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.pf-pal-key:hover { border-color: var(--iris); color: var(--iris); }
.pf-pal-pt { font-weight: 700; color: var(--aqua-deep); }

/* בוחר הנימוק */
.pf-picker { border: 1px solid var(--iris); border-radius: var(--radius-btn); background: var(--surface); padding: .35rem; margin-top: .45rem; max-height: 15rem; overflow-y: auto; box-shadow: 0 8px 22px rgba(30, 20, 80, .12); }
.pf-pick { display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: start; font: inherit; font-size: .84rem; line-height: 1.35; padding: .38rem .45rem; border: 0; background: transparent; cursor: pointer; border-radius: 6px; color: var(--text); }
.pf-pick:hover, .pf-pick.is-cur { background: var(--iris-soft); }
.pf-pick-grp { font-size: .72rem; color: var(--text-muted); margin: .45rem .35rem .1rem; font-weight: 700; }
.pf-pick-none { font-size: .82rem; color: var(--text-muted); margin: .3rem; }
.pf-num-aux { background: transparent; color: var(--text-muted); }
/* מעמד המשפט בתוכנית (העשרה, לא בתוכנית): הקשר, לא חסימה */
.pf-prog { font-style: normal; font-size: .7rem; font-weight: 700; background: var(--lilac); color: var(--lilac-deep); border-radius: 999px; padding: .06rem .45rem; margin-inline-start: .4rem; white-space: nowrap; vertical-align: middle; cursor: help; }
.pf-table tr.is-half td { background: var(--lilac); }
.pf-table tr.is-half .pf-flag { color: var(--lilac-deep); }
/* "בדוק את ההוכחה": הבהוב קצר על ההודעה, בגוון הפעולה הקיים */
.pf-msg:focus { outline: none; }
.pf-msg.is-flash { animation: pf-flash .45s ease-in-out 2; border-radius: 6px; }
@keyframes pf-flash { 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--iris); } }
@media (prefers-reduced-motion: reduce) {
  .pf-msg.is-flash { animation: none; box-shadow: 0 0 0 2px var(--iris); }
}

@media (max-width: 760px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card { flex-basis: 100%; }
}

/* ── סבב המשוב הרביעי, 2026-09-05 ─────────────────────────────────── */

/* טבלת ההוכחה: שתי שורות ריקות, ושורה חדשה נוספת כשממלאים. הטענה
   בתיבה שגדלה עם התוכן, כדי שיראו אותה במלואה. */
.pf-in { resize: none; overflow: hidden; min-height: 2.1rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.pf-table .pf-n { cursor: grab; user-select: none; }
.pf-table .pf-n:active { cursor: grabbing; }
.pf-table tr.is-row-over td { outline: 2px dashed var(--aqua); outline-offset: -2px; }
.pf-table .pf-claim { width: 46%; }
.pf-row-tip { font-size: .74rem; color: var(--text-muted); margin: .3rem 0 0; }

/* תשובה נכונה שחסר לה נימוק: גדול וברור */
.answer-note.is-partial, .ws-note.is-partial {
  font-size: 1rem; line-height: 1.5; padding: .55rem .8rem; margin-top: .5rem;
  background: var(--lilac); border-radius: var(--radius-btn); display: block;
}

/* עמוד המקצוע: כותרת ראשית לכל בלוק בפריסה, מעל תתי הנושאים */
.block-head { font-size: 1.15rem; margin: 1.1rem 0 .4rem; color: var(--text-heading); display: flex; gap: .6rem; align-items: baseline; }
.block-head em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--aqua-deep); background: var(--aqua-soft); padding: .1rem .5rem; border-radius: 999px; }
.grade-head { font-size: 1.35rem; }

/* ריבועים ממוספרים לכל תרגיל, בעמוד הנושא ובאזור הכיתה */
/* ── ריבועי התרגילים: התצוגה האחידה של כל האתר ─────────────────────
   תרגיל, שאלת בגרות בשאלון, תרגיל בכיתה - כולם ריבוע עם מספר. השם
   והדרגה בריחוף. הבלוק כאן ולא ב-practice.css, כי class.html אינו
   טוען את practice.css והריבועים שם יצאו רצף ספרות דבוק. */
.drillrow {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 7px 12px;
  margin-bottom: 5px;
}

.drillrow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.drillrow-head b {
  font-size: 1rem;
  color: var(--text-heading);
}

.drillrow-meta {
  margin-inline-start: auto;
  font-size: .78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.drillrow-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.drillnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--ctl-border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}

.drillnum:hover { border-color: var(--accent); color: var(--accent); }

/* ── סימן הכתר: שאלת בגרות אמיתית (‏BagrutFinal.crown) ───────────────
   קווי, בגוון ink (מדור מוביל) - לא זהב ולא צהוב. בריבוע הוא יושב
   בפינה על רקע הנייר; בשורה ובכותרת הוא בא לפני הטקסט ואינו משנה את
   גובה השורה. */
.crown-mark {
  display: inline-block;
  width: 15px; height: 15px;
  flex: none;
  vertical-align: -2px;
  color: var(--text-heading);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
h1 .crown-mark, h2 .crown-mark { width: .85em; height: .85em; vertical-align: -.08em; }
.drillnum.has-crown { position: relative; }
.drillnum .crown-mark {
  position: absolute;
  top: -7px;
  inset-inline-end: -6px;
  width: 16px; height: 16px;
  padding: 1px;
  border-radius: 50%;
  background: var(--bg);
}
.drillnum:hover .crown-mark { color: var(--accent); }

.drillnum.is-done {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.drillrow-unit { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.drillrow-unit .drillrow-nums { flex: 1 1 auto; }
.drillnum.lv1 { border-bottom: 3px solid var(--border-strong); }
.drillnum.lv2 { border-bottom: 3px solid var(--lilac); }
.drillnum.lv3 { border-bottom: 3px solid var(--aqua); }
.drillnum.lv4 { border-bottom: 3px solid var(--iris); }
.drillnum.lv5 { border-bottom: 3px solid var(--ink, #1B1236); }
/* מחוץ לתוכנית השנה: תחתית אדומה במקום צבע הדרגה */
.drillnum.is-out { border-bottom: 3px solid var(--out-scope); }

/* תג הדרגה. יושב כאן ולא ב-practice.css כי גם לוח הכיתה מציג אותו,
   בראש הבלוק "שאלות הבגרות בנושא". */
.pcard-level {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 99px;
}

/* חמש דרגות, בעוצמה עולה - וכל אחת בדיו אחרת, כדי שהסולם ייקרא בסריקה
   מהירה ולא ידרוש לקרוא את המילה. 'מאתגר' הוא היחיד עם רקע מלא: הוא לא
   עוד שלב בסולם אלא הקצה שלו. */
.pcard-level { background: var(--lv1); color: var(--lv1-ink); }
.pcard-level.lv2 { background: var(--lv2); color: var(--lv2-ink); }
.pcard-level.lv3 { background: var(--lv3); color: var(--lv3-ink); }
.pcard-level.lv4 { background: var(--lv4); color: var(--lv4-ink); }
.pcard-level.lv5 { background: var(--iris); color: var(--on-accent); }
.pcard-level.is-out {
  background: transparent;
  color: var(--text-heading);
  border-bottom: 3px solid var(--out-scope);
  border-radius: 0;
  padding-inline: 2px;
}
.kx-nums { margin: .4rem 0 .6rem; }
.hub-theorem-link { margin: .3rem 0 0; font-size: .82rem; }
.hub-theorem-link a { color: var(--aqua-deep); font-weight: 700; }
.kx-now { font-size: .84rem; color: var(--text-muted); margin: 0 0 .5rem; }
.kx-when { font-size: .78rem; color: var(--aqua-deep); font-style: normal; display: block; margin-top: .15rem; }

/* רשימת המשפטים */
.th-tools { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin: 0 0 1.2rem; }
.th-search { display: grid; gap: .3rem; font-size: .85rem; color: var(--text-muted); font-weight: 600; flex: 1 1 18rem; }
.th-search input { font: inherit; font-size: 1rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); }
.th-count { font-size: .85rem; color: var(--text-muted); }
.th-group h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; color: var(--text-heading); }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.th-row { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .5rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); }
.th-num { font-size: .85rem; min-width: 2.2rem; }
.th-text { line-height: 1.45; }
.th-fig { color: var(--lilac-deep); width: 96px; }
@media print { .site-header, .site-footer, .th-tools { display: none !important; } .th-row { break-inside: avoid; } }

/* נוסחאות וזהויות בטריגונומטריה: אותה רשימה כמו המשפטים, עם תג "בדף
   הנוסחאות" לצד כל נוסחה - אקווה לידע שבדף, לילך להקשר שצריך לזכור. */
.tf-tag { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; align-self: center; }
.tf-tag.is-sheet { background: var(--aqua-soft); color: var(--aqua-deep); }
.tf-tag.is-memo { background: var(--lilac); color: var(--lilac-deep); }
.tf-body { display: grid; grid-template-columns: 1fr; gap: .8rem 1.4rem; align-items: start; }
.tf-group.has-fig .tf-body { grid-template-columns: 1fr auto; }
.tf-fig { color: var(--lilac-deep); padding: .4rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); }
.tf-fig svg { display: block; fill: currentColor; }
.tf-name { color: var(--text-heading); margin-inline-end: .3rem; }
.tf-lhs { display: inline-block; font-weight: 700; color: var(--aqua-deep); background: var(--aqua-soft); border-radius: var(--radius-btn); padding: .05rem .5rem; margin-inline-end: .4rem; }
.tf-formula { font-size: 1.05rem; }
.tf-words { color: var(--text-muted); font-size: .85rem; margin-inline-start: .4rem; }
.tf-alt, .tf-note { display: block; font-size: .9rem; color: var(--text-muted); margin-top: .15rem; }
.tf-alt .tf-formula { font-size: .95rem; color: var(--text); }
.tf-sub { font-size: .82rem; font-weight: 700; color: var(--text-muted); margin: .5rem 0 0; padding: 0 .2rem; }
.tf-sub:first-child { margin-top: 0; }
.tf-table-wrap { overflow-x: auto; }
.tf-table { border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); font-size: 1rem; width: 100%; max-width: 34rem; }
.tf-table th, .tf-table td { padding: .45rem .5rem; text-align: center; border: 1px solid var(--border); }
.tf-table thead th { background: var(--aqua-soft); color: var(--aqua-deep); }
.tf-table tbody th { font-weight: 700; color: var(--text-heading); }
/* קבוצה אחידה: התג פעם אחת ליד הכותרת, והשורות בלי העמודה השלישית */
.tf-group h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tf-group h2 .tf-tag { font-size: .68rem; }
.tf-row.no-tag { grid-template-columns: auto 1fr; }
/* המשוואות: עצי התפצלות - המשוואה בשורש (אקווה, ידע), הפתרונות בענפים
   (איריס), ושורת "למה" מתחת. הפתרונות המיוחדים בטבלה. */
.tf-trees { display: grid; grid-template-columns: 3fr 3fr 2fr; gap: .8rem; }
.tf-tree { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: .7rem .7rem .6rem; text-align: center; min-width: 0; }
.tf-tree-root .tf-lhs { margin: 0; font-size: 1rem; }
.tf-tree-arms { display: block; width: 100%; height: 26px; margin: .1rem 0; stroke: var(--iris); stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.tf-tree-arms path { vector-effect: non-scaling-stroke; }
.tf-tree-leaves { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.tf-tree[data-n="1"] .tf-tree-leaves { grid-template-columns: 1fr; }
.tf-leaf { display: block; min-width: 0; padding: .25rem .4rem; border: 1px solid var(--iris-pale); border-radius: var(--radius-btn); color: var(--iris-deep); background: var(--iris-soft); font-size: .95rem; white-space: nowrap; overflow-x: auto; }
.tf-why { margin: .55rem 0 0; font-size: .85rem; color: var(--text-muted); }
.tf-where th, .tf-where td { text-align: center; }
.tf-where .tf-where-cell { color: var(--text-muted); font-size: .92rem; }
@media (max-width: 900px) {
  .tf-trees { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tf-group.has-fig .tf-body { grid-template-columns: 1fr; }
  .tf-fig { justify-self: center; }
  .tf-row { grid-template-columns: auto 1fr; }
  .tf-row .tf-tag { grid-column: 2; justify-self: start; }
  /* נוסחה ארוכה מהמסך נגללת בתוך השורה ולא מותחת את העמוד */
  .tf-row .th-text { min-width: 0; }
  .tf-formula { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; font-size: .98rem; }
  .tf-table { font-size: .9rem; }
  .tf-table th, .tf-table td { padding: .35rem .3rem; }
  /* ענף ארוך מהתא נשבר לשתי שורות ולא נחתך */
  .tf-leaf { white-space: normal; font-size: .9rem; }
}
@media print { .tf-fig { break-inside: avoid; } }
/* עמוד הנושא: שני קישורים בפתיח, לבחינה ולנוסחאות */
.track-hero-link + .track-hero-link { margin-inline-start: 18px; }

/* טבלת ההוכחה: שתי עמודות שוות, והתיבות ממלאות אותן. הנימוק הרשמי ארוך,
   ובעמודה צרה הוא נשבר למילה בשורה. */
.pf-table { table-layout: fixed; width: 100%; }
.pf-table .pf-claim, .pf-table .pf-reason { width: auto; }
.pf-table .pf-n { width: 2.2rem; }
.pf-table .pf-mark { width: 3.4rem; }
.pf-in { width: 100%; box-sizing: border-box; font-size: .92rem; padding: .35rem .45rem; }
.pf-reason-txt { direction: rtl; }

/* הטבלה ברוחב מלא, והבנק מתחתיה. עמודת התרגיל חולקת את המסך עם
   המלווה, ושתי עמודות בתוכה כיווצו את הנימוק למילה בשורה. */
.pf-grid { grid-template-columns: 1fr; }
.pf-side { margin-top: .4rem; }
.pf-card { flex: 1 1 15rem; max-width: 24rem; }

/* סרגל הנושאים בשתי רמות: נושאים ראשיים, ותחתיהם תתי הנושאים של הפתוח */
#topic-tabs { display: block; background: transparent; border: 0; padding: 0; overflow: visible; white-space: normal; }
.tabs-row { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.tabs-row + .tabs-row { margin-top: 6px; margin-inline-start: 1.2rem; background: var(--bg); }
.tabs-sub button { font-size: .88rem; padding: 6px 14px; }
.tabs-sub button[aria-selected="true"] { background: var(--aqua-text); }
.tabs-count { font-style: normal; font-size: .7rem; margin-inline-start: .35rem; opacity: .75; }
.hero-main { color: var(--text-muted); font-weight: 600; }

/* ── דפי קורס: שורת הכיתות מתחת לסרגל המקצועות ─────────────────────── */
.grade-bar { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 0; }
.grade-bar a { font-size: .92rem; font-weight: 700; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--ctl-border); background: var(--iris-soft); color: var(--iris-deep); }
.grade-bar a[aria-current="true"] { background: var(--aqua-text); color: var(--on-accent); border-color: var(--aqua); }
.grade-note { font-size: .82rem; color: var(--text-muted); }

/* תתי הנושאים בולטים: פס בצבע, כותרת "בתוך גאומטריה:", וכפתורים גדולים */
.tabs-row + .tabs-row { margin-top: .5rem; margin-inline-start: 0; background: var(--aqua-soft); border-color: var(--aqua); padding: .5rem .6rem; gap: .5rem; align-items: center; }
.tabs-sub-label { font-size: .86rem; font-weight: 700; color: var(--aqua-deep); margin-inline-end: .3rem; }
.tabs-sub button { font-size: 1rem; font-weight: 600; padding: .5rem 1.1rem; background: var(--surface); border: 1px solid var(--aqua); color: var(--aqua-deep); }
.tabs-sub button[aria-selected="true"] { background: var(--aqua-text); color: var(--on-accent); }

/* ‏**הסרגל הראשי קטן, תתי הנושאים בולטים** (הבעלים, 2026-09-05): הלשוניות
   שבתוך גאומטריה "צריך להבליט אותם יותר בגודל או במרווח או בצבע כי לא
   ברור שיש שם לשוניות", והסרגל של כל הנושאים "צריך לצמצם". */
.tabs-main button { font-size: .88rem; padding: 5px 11px; }
.tabs-main .tabs-count { font-size: .66rem; }
.tabs-row + .tabs-row { padding: .65rem .8rem; gap: .6rem; border-width: 2px; }
.tabs-sub-label { font-size: .95rem; }
.tabs-sub button { font-size: 1.08rem; padding: .6rem 1.3rem; border-width: 2px; }

/* דף העבודה הוא בלי המלווה, וכתוב כך על הקישור עצמו */
.no-tutor { font-size: .82em; font-weight: 400; opacity: .78; }

/* ── מיקוד הקבוצה (class.js): ב-access.css, עם שאר אזור הכיתה (‏D1, 2026-10-01) ── */
/* טקסט לקורא מסך בלבד. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ‏**התרגול האישי הוא כפתור, לא כרטיס** (הבעלים, 2026-09-06):
   "להסיר מסגרת סגולה לתרגול ממוקד... עם כפתור סגול בלבד." שתי מסגרות
   סגולות זו מתחת לזו הפכו את ראש העמוד לקיר. */
.kx-hw {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 0 0 1.3rem;
}
.kx-hw span { font-size: .88rem; color: var(--text-muted); max-width: 46ch; }

/* פאנל המורה. הוא יושב מעל הכול כי הוא השייך למורה בלבד, והוא details
   כדי שלא יגזול את ראש העמוד אחרי שנקבע מיקוד. */
.kf {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 2px solid var(--iris);
  border-radius: 10px;
}
.kf > summary { font-weight: 700; cursor: pointer; color: var(--iris); }
.kf-lead { font-size: .9rem; color: var(--text-muted); margin: .6rem 0; }
.kf-group { display: block; font-size: .9rem; margin: 0 0 .7rem; }
.kf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .3rem .8rem;
  margin: 0 0 .8rem;
}
.kf-item { display: flex; align-items: baseline; gap: .4rem; font-size: .92rem; }
.kf-item.is-empty { color: var(--text-muted); }
.kf-item em { font-size: .8rem; opacity: .8; }
.kf-code {
  font-size: .78rem;
  color: var(--text-muted);
  min-width: 2.4em;
}
.kf-acts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kf-msg { font-size: .88rem; color: var(--aqua-text); }
.kf-when { font-size: .82rem; color: var(--text-muted); margin: .6rem 0 0; }
.kt-focus-link { margin-inline-start: .4rem; }

/* ── עזרו לנו להשתפר (report.js) ───────────────────────────────────────
   כפתור צף בפינה השמאלית התחתונה - הפינה שאינה תפוסה בעמוד RTL - וטופס
   ב-dialog. איריס ולא לילך: הבעלים ביקש להבליט אותו כדי שיגיעו יותר
   דיווחים, וזה כן כפתור פעולה. התפוח של ניוטי במקום דגל הדיווח. */
.rp-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px 8px 11px;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--iris);
  background: var(--surface);
  border: 2px solid var(--iris);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.rp-fab svg { width: 18px; height: 18px; }
.rp-fab:hover { background: var(--iris); border-color: var(--iris); color: var(--on-accent); }
.rp-fab-short { display: none; }

/* הכפתור אינו מסתיר תוכן (חדר 66): כשהכפתור המלא היה יושב על טקסט או על
   פקד, report.js מכווץ אותו לתפוח ומעלה אותו אם צריך. בריחוף ובפוקוס
   במחשב המילים חוזרות; השם הנגיש (aria-label) נשאר תמיד. */
.rp-fab.is-compact { padding: 9px; gap: 0; }
.rp-fab.is-compact > span { display: none; }
@media (hover: hover) and (min-width: 721px) {
  .rp-fab.is-compact:hover,
  .rp-fab.is-compact:focus-visible { padding: 8px 13px 8px 11px; gap: 6px; }
  .rp-fab.is-compact:hover > .rp-fab-long,
  .rp-fab.is-compact:focus-visible > .rp-fab-long { display: inline; }
}

/* התפוח נושם פעם בכמה שניות, ואז נעצר. תנועה קטנה מושכת את העין אל
   הכפתור בלי להתחרות בתוכן; אנימציה שרצה בלי סוף כן מתחרה. */
.rp-apple { animation: rp-nudge 9s ease-in-out 3s 3; transform-origin: 50% 80%; }
@keyframes rp-nudge {
  0%, 88%, 100% { transform: rotate(0) scale(1); }
  92% { transform: rotate(-9deg) scale(1.08); }
  96% { transform: rotate(7deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .rp-apple { animation: none; } }

@media (max-width: 720px) {
  /* הטקסט מתקצר ולא נעלם: כפתור בלי מילה אינו מזמין משוב, וזו כל המטרה */
  .rp-fab-long { display: none; }
  .rp-fab-short { display: inline; }
  .rp-fab { padding: 9px 12px 9px 10px; bottom: 14px; left: 12px; font-size: .8rem; }
}

/* ‏**בטלפון: לא בדף הבית, ובתחתית העמוד ולא צף** (הבעלים, 2026-10-01: "שיופיע
   רק בעמודים שהם לא דף הבית ושיהיה סטטי בתחתית העמוד"). כשה-position כאן אינו
   fixed, ‏report.js מעביר את הכפתור לראש הפוטר: הוא אחרי התוכן, מעל כל סרגל
   קבוע בסוף הגלילה, וסמוי עם הפוטר עד שהעמוד מפוענח. טלפון הוא עד 599, וגם
   טלפון לרוחב (מגע וגובה עד 520). במחשב ובטאבלט הוא צף כמו קודם. ההסתרה
   בבית ב-home.css, באותו תנאי. בודק: verify_report_button. */
@media (max-width: 599px), (pointer: coarse) and (max-height: 520px) {
  .rp-fab { position: static; display: flex; width: max-content; margin: 0 auto; box-shadow: none; }
}

@media print { .rp-fab, .rp-dlg { display: none !important; } }

.rp-dlg {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  /* ב-iPhone ‏100vh הוא הגובה בלי סרגלי Safari, והתחתית נחתכה מתחתם (dt5h) */
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 22px 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lift);
  direction: rtl;
  text-align: right;
}

.rp-dlg::backdrop { background: rgba(27, 18, 54, .42); }

.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-head h2 { margin: 0; font-size: 1.15rem; }

.rp-x {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
}

.rp-x:hover { background: var(--lilac); color: var(--text-heading); }

.rp-lead { margin: 6px 0 14px; font-size: .9rem; color: var(--text-muted); }

.rp-field { display: block; margin: 0 0 12px; font-size: .88rem; color: var(--text-muted); }
.rp-field > span { display: block; margin-bottom: 6px; }

.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { position: relative; }
.rp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rp-chip span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .86rem;
  cursor: pointer;
}
.rp-chip input:checked + span { background: var(--iris); border-color: var(--iris); color: var(--on-accent); }
.rp-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--iris-soft); }

.rp-field textarea, .rp-field select, .rp-field input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.rp-field textarea:focus, .rp-field input:focus, .rp-field select:focus {
  outline: none;
  border-color: var(--iris);
  box-shadow: 0 0 0 3px var(--iris-soft);
}

/* אזור הגרירה וההדבקה של התמונה. שדה הקובץ נשאר בתוכו כתחנת מקלדת
   (נראה למקלדת, לא לעין), והמסגרת המקווקוות מסמנת "כאן שמים". */
.rp-drop {
  display: block; position: relative; margin-top: 6px; padding: 14px 12px;
  border: 1px dashed var(--ctl-border); border-radius: 10px;
  background: var(--bg); text-align: center; cursor: pointer;
  font-size: .84rem; color: var(--text-muted);
}
.rp-drop:focus-within, .rp-drop.is-over {
  border-color: var(--accent); border-style: solid; background: var(--iris-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rp-drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.rp-drop u { color: var(--iris-deep); font-weight: 600; }
.rp-unpick {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--iris-deep); text-decoration: underline;
}
.rp-thumb { display: block; }
.rp-thumb img { max-height: 120px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }

.rp-auto { margin: 4px 0 12px; font-size: .78rem; color: var(--text-muted); line-height: 1.55; }
/* "מותר לפרסם את ההמלצה באתר": תיבה ומילים בשורה, השורה כולה לחיצה */
.rp-check { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .88rem; color: var(--text); cursor: pointer; }
.rp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--iris); }

.rp-err {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .88rem;
  background: var(--no-soft);
  color: var(--no);
}

.rp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* ‏**"שליחה" תמיד בתחתית החלונית** (כרטיס dt5h): כשהטופס ארוך מהחלונית -
   טלפון לרוחב, או מקלדת פתוחה (report.js) - השורה דביקה לתחתית ולא נגללת
   מתחתיה. הריפוד והשוליים השליליים מכסים את ריפוד החלונית, בלי להזיז דבר
   כשהטופס נכנס כולו. */
.rp-form .rp-acts {
  position: sticky;
  bottom: -20px;
  z-index: 1;
  margin: -10px 0 -20px;
  padding: 10px 0 20px;
  background: var(--surface);
}
.rp-done { padding: 8px 0 0; }
.rp-done p { margin: 0 0 14px; line-height: 1.6; }

/* בחן אותי: שאלת בגרות אמיתית במתכונת - מקור השאלה, וסעיף פתוח */
.exam-qsource { font-size: .82rem; color: var(--text-muted); margin-inline-start: auto; }
.answer-open { width: 100%; min-height: 4.5em; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-btn); font: inherit; resize: vertical; }

/* ── שאלון: סינון השאלות הפתורות לפי נושא ───────────────────────────
   הבעלים: "שיוכלו התלמידים לתרגל באופן מרוכז שאלות בגרות בנושא אחד."
   שבב לכל נושא שיש לו שאלה בשאלון; שורת שנה שלא נשאר בה דבר נעלמת. */
.pfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.pfilter button {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 20px;
  padding: 4px 12px;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.pfilter button:hover { border-color: var(--accent); color: var(--accent-hover); }
.pfilter button.is-on { background: var(--iris); border-color: var(--iris); color: var(--on-accent); }
.pfilter button i { font-style: normal; opacity: .7; margin-inline-start: 4px; font-size: .78rem; }
.paper-row { margin-bottom: 6px; }
.paper-row .paper-solve-y { flex: none; min-width: 3.2em; padding-top: 4px; line-height: 1.3; }
.paper-row .drillnum { position: relative; }
.paper-row .drillnum.has-video::after {
  content: "▶";
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  font-size: .5rem;
  color: var(--aqua-text);
}

/* ── שיעורי בית שפורסמו לקבוצה ─────────────────────────────────────────
   הבעלים (‏2026-09-06): "זה צריך להיות גדול וברור עם הודעה ברגע
   שפורסם". לכן זה הדבר הראשון בעמוד, ברוחב מלא, ובאיריס - זו פעולה
   שמצפים ממנו לעשות, לא ידע. */
/* ‏**בולט, ולא משתלט** (הבעלים, 2026-09-06): "המסגרת של שיעורי הבית
   טובה אך בוטה ומשתלטת על הדף... עשה אותה בולטת אך עדן אותה מעט."
   מה שנשאר בולט הוא הפס האנכי באיריס והכותרת; מה שירד הוא המסגרת
   המלאה סביב כל הכרטיס והרקע הסגול הרווי. */
.kxhw {
  margin: 0 0 1.3rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--iris);
  border-radius: 12px;
  background: var(--surface);
}

.kxhw-kicker {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--iris-deep);
}

.kxhw-new {
  display: inline-block;
  margin-inline-start: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--iris);
  color: var(--on-accent);
  font-size: .74rem;
  letter-spacing: 0;
}

/* הכרטיס החדש נושם פעם אחת ונעצר. תנועה בלולאה בראש עמוד לימוד
   מושכת את העין בזמן שקוראים שאלה. */
.kxhw.is-new { animation: kxhw-pop 1.1s ease-out 2; }
@keyframes kxhw-pop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93, 63, 211, 0); }
  45%      { box-shadow: 0 0 0 5px rgba(93, 63, 211, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .kxhw.is-new { animation: none; }
}

.kxhw-title { margin: .15rem 0 .3rem; font-size: 1.28rem; }
.kxhw-meta { margin: 0; color: var(--text-muted); font-size: .95rem; }
.kxhw-meta b { color: var(--text-heading); }
.kxhw-late { color: var(--no); }

/* הערת המורה היא ציטוט, לא שדה. מלבן לבן ברוחב מלא נקרא כתיבת קלט
   שמחכה שיכתבו בה. */
.kxhw-note {
  max-width: 62ch;
  margin: .6rem 0 0;
  padding: .1rem 0 .1rem .8rem;
  border-inline-start: 3px solid var(--iris-pale);
  background: none;
  font-size: .95rem;
  color: var(--text);
}

.kxhw-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: .9rem 0 0;
}

.kxhw-acts { margin: .75rem 0 0; }
.kxhw-go { font-size: 1rem; padding: .5rem 1.2rem; }
.kxhw-by { color: var(--text-muted); font-size: .9rem; }

/* ── בונה שיעורי הבית: הפרסום לקבוצה ─────────────────────────────── */
.hw-pub {
  margin: 1.1rem 0 0;
  padding: .9rem 1.1rem;
  border: 2px solid var(--iris);
  border-radius: 12px;
  background: var(--iris-soft);
}

.hw-pub h3 { margin: 0 0 .2rem; font-size: 1.12rem; }
.hw-pub-lead { margin: 0 0 .7rem; font-size: .9rem; color: var(--text-muted); }

.hw-pub-group,
.hw-pub-f {
  display: block;
  margin: 0 0 .55rem;
  font-size: .92rem;
  font-weight: 600;
}

.hw-pub-f input,
.hw-pub-group select {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin-top: .2rem;
  padding: .45rem .6rem;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.hw-pub-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .8rem;
}

.hw-pub-msg { font-size: .9rem; color: var(--text-muted); }
.hw-pub-msg.is-ok { color: var(--ok); font-weight: 600; }
.hw-pub-msg.is-bad { color: var(--no); font-weight: 600; }

.hw-pub-live {
  margin: .7rem 0 0;
  font-size: .88rem;
  color: var(--text-muted);
}

/* במעקב הכיתות: שורה אחת שאומרת מה מפורסם לכל כיתה */
.kt-hw { margin: .3rem 0 0; font-size: .92rem; }
.kt-hw b { color: var(--iris-deep); }

/* ── כפתור "מעלה" ─────────────────────────────────────────────────────
   שלב אחד למעלה בעץ האתר, בראש כל עמוד שאינו הבית. עדין בכוונה: הוא
   צריך להיות שם כשמחפשים אותו, ולא להתחרות בכותרת העמוד. */
.upbar { margin: 0 0 .7rem; }
/* ‏build_nav כותב את הפס מראש, סמוי ובגובה הסופי, ו-up.js מסיר את הסימון -
   אחרת כל העמוד קופץ כשהפס נכנס אחרי הציור הראשון (מהירות, 2026-09-30) */
.upbar[data-up-wait] { visibility: hidden; }

.upbar-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem .3rem .55rem;
  border: 1px solid var(--ctl-border);
  border-radius: 999px;
  background: var(--iris-soft);
  color: var(--iris-deep);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}

.upbar-link:hover {
  border-color: var(--iris);
  color: var(--iris-deep);
  background: var(--iris-soft);
}

/* החץ מצביע ימינה כי הדף עברי, והוא זז מעט בריחוף - סימן שהוא מוביל
   למקום ולא רק נצבע. */
.upbar-arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform .15s; }
.upbar-link:hover .upbar-arrow { transform: translateX(3px); }

@media print { .upbar { display: none; } }

/* ── לראש הדף (top.js) ────────────────────────────────────────────────
   פינה ימנית תחתונה, כי השמאלית תפוסה בידי "עזרו לנו להשתפר". שקט
   יותר ממנו בכוונה - הוא כלי גלילה ולא קריאה לפעולה - ולכן לילך
   ומסגרת דקה, ולא איריס ומסגרת כפולה. */
.tp-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tp-fab:hover {
  color: var(--iris-deep);
  border-color: var(--iris);
  background: var(--iris-soft);
}

.tp-arrow { font-size: .8em; line-height: 1; transition: transform .15s; }
.tp-fab:hover .tp-arrow { transform: translateY(-2px); }

/* בטלפון נשארת החץ בלבד: מילים בשני כפתורים צפים על מסך צר גוזלות
   את רוחב התוכן עצמו. */
@media (max-width: 560px) {
  .tp-fab { padding: 9px 11px; }
  .tp-text { display: none; }
}

/* ‏`[hidden]` נדרס על ידי `display: inline-flex` - אותה מלכודת שכבר
   תפסה את חצי הפייג'ר. */
.tp-fab[hidden] { display: none !important; }

@media print { .tp-fab { display: none !important; } }

/* ── טקסט גדול: 200% על התוכן, לא על הכותרת הדביקה ──────────────────
   הבעלים (2026-09-12): "כפתור הגדלה של 200% לשאלות ולשרטוטים לצורכי
   נגישות". ‏big.js מחליף את המחלקה על html ושומר ב-localStorage
   (‏fm_big). כל הגדלים באתר ב-rem, ולכן 200% על השורש מכפיל את הכול,
   והכותרת הדביקה מוחזרת לגודלה בפיקסלים - אותם ארבעה ערכים שהיא
   מקבלת ב-rem במצב רגיל. */
html.is-big { font-size: 200%; }
html.is-big body { font-size: 34px; }
html.is-big .site-header { font-size: 17px; }
html.is-big .brand { font-size: 27px; }
html.is-big .brand-mark { width: 63px; height: 63px; }
@media (max-width: 620px) {
  html.is-big .brand { font-size: 16.5px; }
  html.is-big .brand-mark { width: 40px; height: 40px; }
}
/* הכפתורים הצפים נשארים בגודלם, אחרת הם מכסים את התוכן בטלפון */
html.is-big .rp-fab, html.is-big .tp-fab { font-size: 15px; }

/* טבלה או נוסחה רחבה גוללת בתוך המכל שלה ולא מזיזה את הגוף */
html.is-big .ex-sheet,
html.is-big .tutor,
html.is-big .part,
html.is-big .bq-paper,
html.is-big .punit { min-width: 0; overflow-x: auto; }
html.is-big table { display: block; max-width: 100%; overflow-x: auto; }

.ex-tools button[data-tool="big"][aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* סרגל כלים לצד כותרת עמוד שאין לו סרגל משלו (תרגול, מבחן) */
.page-title.has-tools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title.has-tools > div:first-child { flex: 1 1 320px; min-width: 0; }
.ex-tools-solo { flex: none; }

/* ── מסלולי הלמידה (routes.js): שורה אחת בראש רשימת התרגילים ──────────
   ניוטי, משפט אחד ושלושה צ׳יפים בגוון iris (פעולה). תרגיל שבמסלול
   הפעיל מקבל מסגרת; גמור נשאר ירוק כרגיל. */
.route-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--iris-soft);
  border-radius: var(--radius-btn);
  background: var(--iris-soft);
}
.route-avatar { color: var(--iris); display: inline-flex; }
.route-say { flex: 1 1 200px; font-size: .95rem; }
.route-say a { color: var(--iris); font-weight: 600; }
.route-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.route-chip {
  border: 1px solid var(--iris);
  border-radius: var(--radius-btn);
  background: var(--bg);
  color: var(--iris);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
}
.route-chip:hover, .route-chip.is-on { background: var(--iris); color: var(--on-accent); }
.drillnum.is-route { box-shadow: 0 0 0 2px var(--iris); border-color: var(--iris); }
.drillnum.is-route.is-done { box-shadow: 0 0 0 2px var(--ok); }
#ex-next.route-next { border-color: var(--iris); color: var(--iris); }
/* ── הגיליון (sheet.js) ────────────────────────────────────────────────
   במקום לשונית חדשה: חצי מסך בטלפון עם ידית ו-X, וחלונית צד מ-840.
   העמוד נשאר פעיל מאחוריו. חדר קוד: ניווט (guidelines.md, 3.5). */
.sheet {
  position: fixed;
  z-index: 60;
  inset-inline: 0;
  bottom: 0;
  height: 58vh;
  height: 58dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lift);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-tall { height: calc(100dvh - 24px); }
.sheet-grip { display: flex; justify-content: center; }
.sheet-handle {
  width: 64px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.sheet-handle::before {
  content: "";
  position: absolute;
  inset-inline: 16px;
  top: 12px;
  height: 4px;
  border-radius: 4px;
  background: var(--iris-pale);
}
.sheet-top { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px 8px; }
.sheet-title { flex: 1; margin: 0; font-size: 1.05rem; color: var(--text-heading); padding-inline-start: 6px; }
.sheet-title:focus { outline: none; }
.sheet-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-x {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--iris-soft);
  color: var(--iris-deep);
  cursor: pointer;
}
.sheet-x svg { width: 20px; height: 20px; }
.sheet-x:focus-visible, .sheet-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 16px; }
.sheet-wait { color: var(--text-muted); padding: 12px 6px; }
.sheet-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.sheet-pill {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ctl-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--iris-deep);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.sheet-pill[aria-pressed="true"] { background: var(--iris); border-color: var(--iris); color: var(--on-accent); }
/* נוסחאון | מחשבון: שתי לשוניות באותו גיליון (sheet.js, חדר מחשבון 2026-09-27).
   מתג מקטעים ולא גלולות, כדי שלא יתבלבלו עם בחירת הנוסחאון שמתחתיהן */
.sheet-tabs { display: flex; gap: 4px; padding: 3px; margin: 2px 0 10px; border-radius: var(--radius-lg); background: var(--iris-soft); }
.sheet-tab {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--iris-deep);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.sheet-tab[aria-selected="true"] { background: var(--surface); color: var(--text-heading); box-shadow: var(--shadow); }
.sheet-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sheet-pages { display: flex; flex-direction: column; gap: 10px; }
.sheet-page {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow-x: auto;
  cursor: zoom-in;
}
.sheet-page img { display: block; width: 100%; height: auto; }
.sheet-page.is-zoom { cursor: zoom-out; }
.sheet-page.is-zoom img { width: 200%; max-width: none; }
/* "לפתוח את ... כ-PDF" בראש, בין הגלולות לעמודים (הבעלים, 2026-09-29) */
.sheet-open { margin: 0 0 10px; font-size: .9rem; }
/* עמוד עיון בגיליון (sheet.js: page). העמוד המוטמע בלי הכותרת, הסרגל,
   הפוטר והכפתורים הצפים שלו - הגיליון הוא המסגרת */
.sheet-body:has(.sheet-frame) { padding: 0; overflow: hidden; }
.sheet-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* לשונית המשפטים בנוסחאון (כרטיס dje3): הגלולות למעלה, העמוד ממלא את השאר */
.sheet-body:has(.sheet-pages .sheet-frame) { display: flex; flex-direction: column; }
.sheet-body:has(.sheet-pages .sheet-frame) > .sheet-tabs { margin: 2px 12px 8px; }
.sheet-body:has(.sheet-pages .sheet-frame) > .sheet-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-pane > .sheet-pills:has(~ .sheet-pages .sheet-frame),
.sheet-pane > .sheet-open:has(~ .sheet-pages .sheet-frame) { padding: 2px 12px 8px; margin: 0; }
.sheet-pages:has(.sheet-frame) { flex: 1; min-height: 0; }
:root.in-frame { --tabbar-h: 0px; --rail-w: 0px; }
.in-frame .site-header, .in-frame .site-footer, .in-frame .skip-link,
.in-frame .upbar, .in-frame .tp-fab, .in-frame .rp-fab, .in-frame .sub-strip { display: none !important; }
.in-frame body { padding: 0 !important; }
/* באפליקציה מהמסך הראשי אין כפתור "אחורה", ובעמוד המצגת אין "מעלה":
   שם נשאר "מסך מלא" בלבד */
@media (display-mode: standalone) { #open-deck { display: none !important; } }
@media (min-width: 840px) {
  .sheet {
    inset-inline: auto 0;
    top: 0;
    height: auto;
    width: min(460px, 42vw);
    border-radius: 0;
    border-width: 0 1px 0 0;
  }
  .sheet.is-tall { height: auto; }
  .sheet-grip { display: none; }
  .sheet-top { padding-top: 12px; }
}

/* ── הניווט: ארבעה יעדים באגודל ──────────────────────────────────────────
   כיוון א (הבעלים, 2026-09-25; docs/redesign/navigation/guidelines.md).
   רשימה אחת ב-build_nav.py (‏DESTS), שלוש צורות לפי רוחב, ב-CSS בלבד:
   - עד 599: שורה עליונה של 52 (לוגו, נוסחאון, "עוד") וסרגל תחתון של 64
     ועוד safe-area. בעמודי עבודה (‏.is-work) הסרגל מפנה מקום לשורת הפעולה.
   - 600 עד 1199: סרגל צד של 88 בימין, סמל ומילה.
   - 1200 ומעלה: היעדים בשורת הכותרת.
   יעד נגיעה 44 לפחות, 48 בסרגלים; היעד הנוכחי ב-aria-current ובגלולת
   ‎--iris-soft. גדלי הכיתוב בפיקסלים, כדי שהגדלת 200% לא תפרק את הסרגל.
   הבודק: verify_nav_reach.py. */
.site-header .wrap { gap: 12px; }
.brand-mark { width: 52px; height: 52px; }
.brand { font-size: 1.4rem; }

.dest-nav { display: flex; align-items: center; gap: 4px; }
.dest {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--text-calm);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.dest:hover { background: var(--iris-soft); }
/* היעד הנוכחי: טקסט חום וקו תחתון של 2px באותו צבע (החבילה), בלי גלולה */
.dest[aria-current="page"] { color: var(--iris); font-weight: 600; }
.dest[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 6px;
  height: 2px;
  background: currentColor;
}
.dest-ico { width: 22px; height: 22px; flex: none; }

.hdr-tools { display: flex; align-items: center; gap: 6px; flex: none; margin-inline-start: auto; }
.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-calm);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.hdr-btn:hover { background: var(--iris-soft); }
.hdr-ico { width: 20px; height: 20px; flex: none; }

/* ── "לרכישה" (הבעלים, 3.10) ─────────────────────────────────────────
   "במקום מודגש יותר בתפריט בצד שמאל הרחק משאר הכפתורים", "עם צל והדגשה,
   משהו שרוצים וצריך ללחוץ עליו". האחרון בכותרת (build_nav.BUY), ולכן בקצה
   השמאלי בכל רוחב, עם מרווח משאר הכפתורים. צבע הפעולה, ‎--iris. גלולה
   מוגבהת: צל קשה מתחת כמו בסיס של מקש, וצל רך סביב. בלחיצה היא יורדת. */
.buy-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  margin-inline-start: 20px;
  border-radius: 999px;
  background: var(--iris);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 var(--iris-deep), 0 8px 18px rgba(92, 63, 38, .32);
  transform: translateY(-2px);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.buy-cta:hover {
  background: var(--iris-deep);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 0 #3F2B1A, 0 12px 24px rgba(92, 63, 38, .38);
}
.buy-cta:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 var(--iris-deep), 0 2px 6px rgba(92, 63, 38, .3);
}
.buy-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.buy-cta[aria-current="page"] { outline: 2px solid var(--iris); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .buy-cta { transition: none; } }

/* "כניסה" / "התנתקות" (5.10): במסגרת, כדי שהרכישה תישאר הבולטת. שתי
   התוויות בתא אחד, ולכן ההחלפה (data-in, nav.js) אינה מזיזה דבר */
.login-btn {
  display: inline-grid !important; /* מול style="display:none" שבעמוד (build_nav) */
  align-items: center;
  justify-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin-inline-start: 20px;
  border: 2px solid var(--iris);
  border-radius: 999px;
  background: transparent;
  color: var(--iris);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.login-btn > span { grid-area: 1 / 1; }
.login-btn .li-out, .login-btn[data-in] .li-in { visibility: hidden; }
.login-btn[data-in] .li-out { visibility: visible; }
.login-btn:hover { background: var(--iris-soft); }
.login-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.login-btn ~ .buy-cta { margin-inline-start: 8px; }
/* בשביל "כניסה": "עוד", ועד 420 ו-600-699 גם "נוסחאון" בעמוד עם מתג הלילה,
   עם הסמל בלבד; המילה לקורא המסך */
/* ‏"עוד" (שלוש הנקודות) רק בטלפון (הבעלים, 6.10): במחשב ובטאבלט "עזרו לנו
   להשתפר" צף ובתחתית, באותו תנאי טלפון כמו ‎.rp-fab. ‏verify_nav_reach */
@media (min-width: 600px) { .more { display: none; } }
@media (pointer: coarse) and (max-height: 520px) { .more { display: block; } }
.more-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 420px), (min-width: 600px) and (max-width: 699px) {
  .hdr-tools:has(.theme-toggle) > .hdr-btn[data-sheet] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 699px) {
  .login-btn { margin-inline-start: 8px; padding: 0 12px; }
  .buy-cta { padding: 0 14px; }
}
/* החלון של "כניסה" (Access.enter) */
.access-dlg { width: min(440px, calc(100vw - 32px)); }
.access-dlg .rp-x { float: left; min-width: 44px; min-height: 44px; }
.access-dlg .access-gate { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.dest:focus-visible, .hdr-btn:focus-visible,
.more-menu a:focus-visible, .more-menu button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* המתג עצמו 46×26; שטח הנגיעה מורחב ל-44 בגובה בלי לשנות את הציור */
.theme-toggle::after { content: ""; position: absolute; inset: -10px -2px; }

.more { position: relative; }
.more-btn[aria-expanded="true"] { background: var(--iris-soft); }
.more-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 45;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
}
.more-menu a, .more-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.more-menu a:hover, .more-menu button:hover { background: var(--iris-soft); }

/* "עזרו לנו להשתפר" בשורת הקישורים שבתחתית כל עמוד (build_nav: with_footer) */
.footer-report {
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── טאבלט: סרגל צד של 88 בימין ───────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1199px) {
  :root { --rail-w: 88px; }
  body { padding-inline-start: var(--rail-w); }
  .site-header { margin-inline-start: calc(-1 * var(--rail-w)); }
  .dest-nav {
    position: fixed;
    z-index: 29;
    inset-inline-start: 0;
    top: var(--header-h);
    bottom: 0;
    width: var(--rail-w);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 6px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
  }
  .dest {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 6px 2px;
    font-size: 13px;
    text-align: center;
    white-space: normal;
  }
  .dest-ico { width: 24px; height: 24px; }
  /* טלפון לרוחב (390 ו-360 בגובה): חמישה יעדים של 64 אינם נכנסים, והחיפוש
     נפל מתחת למסך (ניווט 3, measure_nav). 48 הוא המינימום לסרגל, והסרגל
     נגלל בתוכו אם גם זה לא מספיק. */
  .dest-nav { overflow-y: auto; overscroll-behavior: contain; }
  @media (max-height: 520px) {
    .dest-nav { gap: 2px; padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
    .dest { min-height: 48px; padding: 2px; gap: 1px; font-size: 12px; }
    .dest-ico { width: 22px; height: 22px; }
  }
  /* שישה יעדים מ-2.10 ("מנויים" בסרגל): ב-360 בגובה 72+6×48 אינם נכנסים, ולכן
     הכותרת יורדת ל-56 והלוגו ל-40, כמו בטלפון, והיעדים נשארים 48 */
  @media (max-height: 400px) {
    :root { --header-h: 56px; }
    .brand-mark { width: 40px; height: 40px; }
    .dest-nav { gap: 0; padding-block: 4px calc(4px + env(safe-area-inset-bottom)); }
  }
  /* מה שקבוע בצד הימני זז מעבר לסרגל */
  .tp-fab { right: calc(var(--rail-w) + 16px); }
  body .ex-actbar, body .ex-formulas, body .pf-side { inset-inline-start: var(--rail-w); }
}

/* ── טלפון: שורה עליונה של 52 וסרגל תחתון ─────────────────────────── */
@media (max-width: 599px) {
  :root { --header-h: 52px; --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
  :root:has(.site-header.is-work) { --tabbar-h: 0px; }
  .site-header .wrap { min-height: 52px; padding-block: 4px; gap: 6px; padding-inline: 12px; }
  .brand { font-size: 1rem; gap: 8px; }
  .brand-mark { width: 40px; height: 40px; }
  .hdr-tools { gap: 2px; }
  .hdr-btn { padding: 0 8px; font-size: 13px; }
  /* "לרכישה" בטלפון: בלי הסמל ועם מרווח קטן, כדי שהשורה של 52 תכיל אותו */
  .buy-cta { margin-inline-start: 6px; padding: 0 14px; font-size: 14px; }
  .login-btn { margin-inline-start: 4px; padding: 0 10px; font-size: 13px; }
  .login-btn ~ .buy-cta { margin-inline-start: 4px; }
  /* "עוד" זז שמאלה בגלל "כניסה": הרשימה מיושרת לקצה הימני שלו, בתוך המסך */
  .more-menu { inset-inline-end: auto; inset-inline-start: 0; min-width: 0; width: max-content; }
  @media (max-width: 420px) {
    .login-btn { padding: 0 8px; }
    .buy-cta { padding: 0 10px; }
  }
  @media (max-width: 380px) { .login-btn { padding: 0 6px; } .buy-cta { padding: 0 8px; } }
  .dest-nav {
    position: fixed;
    z-index: 35;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    height: var(--tabbar-h);
    padding: 4px 2px env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .site-header.is-work .dest-nav { display: none; }
  .dest {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 0 2px;
    border-radius: 12px;
    font-size: 12px;
  }
  .dest:hover { background: none; }
  .dest[aria-current="page"] { background: none; }
  .dest[aria-current="page"]::after { content: none; }
  .dest-ico { width: 22px; height: 22px; padding: 3px 16px; border-radius: 999px; box-sizing: content-box; }
  .dest[aria-current="page"] .dest-ico { background: var(--iris-soft); color: var(--iris-deep); }
  body { padding-bottom: var(--tabbar-h); }
  /* P20 (T47): בטלפון ה-▲ בפינה השמאלית, על סופי השורות ולא על תחילתן: בפינה
     הימנית הוא הסתיר את "238" בספירה, את "מי אנחנו" ואת המילה הראשונה בכל
     שורה שעברה מתחתיו. */
  .tp-fab { bottom: calc(var(--tabbar-h) + 12px); right: auto; left: 16px; }
  /* "עזרו לנו" בטלפון אינו צף אלא בראש הפוטר: ליד .rp-fab למעלה */
  /* P20 (T47): בכרטיס "השאלה הושלמה!" left:50% הגביל את הרוחב לחצי מסך, והכותרת
     נשברה לארבע שורות. הרוחב הוא של התוכן, עד max-width. */
  .cele-card { width: max-content; }
}

/* ── שורת הסעיפים (Answer.partNav; ניווט 3, guidelines.md 3.4) ─────────
   דביקה מתחת לשורה העליונה, בתרגיל ובשאלת בגרות. 44×44 לכל סעיף, הנוכחי
   באיריס רך, וי ירוק לפתור (‎--ok, משוב על תשובה), ו"הבא" בקצה. */
.part-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 8px;
  padding: 6px 0;
  background: var(--bg);
}
.pn-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ctl-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.pn-btn:hover { border-color: var(--iris); color: var(--iris-deep); }
.pn-btn[aria-current] { border-color: var(--iris); background: var(--iris-soft); color: var(--iris-deep); }
.pn-ok { display: none; width: 14px; height: 14px; flex: none; color: var(--ok); }
.pn-btn.is-solved .pn-ok { display: block; }
.pn-next {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--iris-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pn-next svg { width: 18px; height: 18px; }
.pn-next:disabled { opacity: .4; cursor: default; }
.pn-btn:focus-visible, .pn-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* יעד שגוללים אליו אינו נבלע מתחת לשורה הדביקה (WCAG 2.4.11) */
html:has(.part-nav) { scroll-padding-top: calc(var(--header-h) + 64px); }

/* ── "להמשיך מאיפה שעצרת" (resume.js; ניווט 3, guidelines.md 3.2) ───────
   שורה אחת: "להמשיך", שם התרגיל והסעיף. בבית מתחת לכפתורים; בעמודי המרכז
   בראש העמוד, ובטלפון צפה מעל הסרגל עם X. 48 בגובה, כמו יעד בסרגל. */
.resume { margin: 0 0 14px; }
.resume-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border: 1px solid var(--ctl-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-heading);
  text-decoration: none;
}
.resume-link:hover { border-color: var(--iris); }
.resume-k { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--iris-soft); color: var(--iris-deep); font-size: 13px; font-weight: 700; }
.resume-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.resume-p { color: var(--text-muted); font-weight: 500; }
.resume-arrow { width: 20px; height: 20px; flex: none; color: var(--iris); }
.resume.is-float { display: flex; align-items: center; gap: 4px; }
.resume.is-float .resume-link { flex: 1; min-width: 0; }
.resume-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text-muted); cursor: pointer; }
.resume-x svg { width: 18px; height: 18px; }
@media (max-width: 599px) {
  .resume.is-float {
    position: fixed;
    z-index: 34;
    inset-inline: 10px;
    bottom: calc(var(--tabbar-h) + 8px);
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lift);
  }
  .resume.is-float .resume-link { border: 0; background: none; }
  body:has(.resume.is-float:not([hidden])) { padding-bottom: calc(var(--tabbar-h) + 68px); }
  /* P20 (T47): ה-▲ עולה מעל השורה הצפה, ולא יושב עליה (בעמוד השאלונים כיסה אותה) */
  body:has(.resume.is-float:not([hidden])) .tp-fab { bottom: calc(var(--tabbar-h) + 68px); }
}

/* ── החיפוש (search.js; ניווט 3, guidelines.md 3.14) ───────────────────
   מסך מלא בטלפון, חלונית מ-600, ובתוך העמוד ב-search.html. שורת תוצאה 48
   לפחות: תגית הסוג בלילך (תפקיד "הקשר"), הכותרת, ושורת משנה. */
.dest-kbd { display: none; }
.srch { position: fixed; inset: 0; z-index: 70; background: var(--bg); }
.srch-box { display: flex; flex-direction: column; height: 100%; }
html.has-srch { overflow: hidden; }
.srch-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
}
.srch-ico { width: 22px; height: 22px; flex: none; color: var(--iris); }
.srch-q {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text-heading);
  font: inherit;
  font-size: 17px;
  outline: none;
}
.srch-q::-webkit-search-cancel-button { display: none; }
.srch-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text-muted); cursor: pointer; }
.srch-x svg { width: 20px; height: 20px; }
.srch-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); }
.srch-h { margin: 12px 4px 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.srch-note { margin: 16px 4px; color: var(--text-muted); }
.srch-list { margin: 0; padding: 0; list-style: none; }
.srch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
.srch-row:hover, .srch-row:focus-visible { background: var(--iris-soft); outline: none; }
.srch-kind {
  flex: none;
  min-width: 64px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--iris-soft);
  background: color-mix(in srgb, var(--lilac) 20%, transparent);
  color: var(--lilac-deep);
  font-size: 12px;
  text-align: center;
}
.srch-text { display: flex; flex-direction: column; min-width: 0; }
.srch-t { font-weight: 600; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; }
.srch-s { font-size: 13px; color: var(--text-muted); }
.srch-page { margin: 8px 0 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.srch-page .srch-top { border-radius: 16px 16px 0 0; }
@media (min-width: 600px) {
  .srch { background: var(--bg); background: color-mix(in srgb, var(--text-heading) 38%, transparent); }
  .srch-box {
    width: min(640px, 92vw);
    height: auto;
    max-height: 76vh;
    margin: 10vh auto 0;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
  }
  .srch-top { padding-top: 8px; }
}
@media (min-width: 1200px) {
  /* השורה היא 1180 בכל רוחב, ו"כניסה" (5.10) נכנסת בה רק כך */
  .site-header .wrap { gap: 8px; }
  .hdr-tools { gap: 4px; }
  .dest { padding: 0 10px; }
  .dest[aria-current="page"]::after { inset-inline: 10px; }
  .hdr-btn { padding: 0 10px; }
  .login-btn { margin-inline-start: 12px; padding: 0 12px; }
  .dest[data-dest="search"] { min-width: 130px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
  .dest-kbd {
    display: inline-block;
    margin-inline-start: auto;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-size: 11px;
    color: var(--text-muted);
    direction: ltr;
  }
}

/* ── שורות קישור: "הסברים" (learn.html) ו"עוד בבגרויות" (papers.html) ─────
   שורה קומפקטית ולא כרטיס; שם ומתחתיו שורת הסבר קצרה. 52 בגובה. */
.link-block { margin: 22px 0 8px; }
.link-h { margin: 0 0 8px; font-size: 1.15rem; color: var(--text-heading); }
.link-topic { margin: 14px 0 6px; font-size: .98rem; font-weight: 600; color: var(--text-muted); }
.link-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.papers-more { margin: 4px 0 18px; }
.link-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.link-row:hover { border-color: var(--ctl-border); background: var(--iris-soft); }
.link-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link-row b { font-weight: 600; color: var(--text-heading); }
.link-row span { font-size: .85rem; color: var(--text-muted); }

/* ── אגפי הספרייה: רצועת הצילום בראש ארבעת היעדים ─────────────────────
   הבעלים, 2026-09-26 (docs/redesign/library-wings): כל יעד הוא אגף באותה
   ספרייה שבסרטון הכניסה. הצילום קישוט בלבד (alt ריק), בגובה קבוע כדי
   שהעמוד לא יקפוץ כשהתמונה נטענת, והכותרת הקיימת מתחתיו על הנייר - שום
   טקסט אינו יושב על הצילום. בעמוד נושא הרצועה נמוכה, כדי שהתרגול לא ירד
   (‏html.is-topic, נקבע בשורה שמיד אחרי הרצועה ב-practice.html). */
.wing {
  position: relative;
  height: 280px;
  margin: 20px 0 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--iris-soft);
}
.wing img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wing-at, 50% 50%);
}
.wing[data-wing="learn"] { --wing-at: 30% 62%; }
.wing[data-wing="papers"] { --wing-at: 45% 65%; }
.wing[data-wing="practice"] { --wing-at: 30% 55%; }
.wing[data-wing="class"] { --wing-at: 35% 50%; }
html.is-topic .wing { height: 112px; margin-bottom: 14px; }
:root[data-theme="ink"] .wing img { filter: brightness(.78) saturate(.9); }

/* הכותרת שמתחת לרצועה: 32 עד 44, לפי החבילה */
.wing:not(.is-slim) ~ h1, .wing:not(.is-slim) ~ .page-title h1 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.75rem);
  letter-spacing: -.01em;
}
html.is-topic .wing ~ .page-title h1 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.25rem); }

@media (max-width: 599px) {
  .wing { height: 176px; margin: 12px 0 16px; }
  html.is-topic .wing { height: 84px; }
}
@media print { .wing { display: none; } }

/* ── שאר העמודים (יחידה 3) ──────────────────────────────────────────────
   שיעור ומבחן: רצועת הקשר דקה מהאגף שלהם, ובטלפון בלי - שם העבודה לוקחת
   את כל המסך. שאלה, תרגיל ופתרון: בלי צילום בכלל, משטח אחיד. */
.wing.is-slim { height: 72px; margin: 16px 0 14px; }
@media (max-width: 599px) { .wing.is-slim { display: none; } }
/* במבחן עצמו (אחרי "להתחיל") השאלה היא העיקר, והרצועה יורדת */
main:has(.exam-bar) > .wing { display: none; }

/* כותרת ראשית בעמודי הקטלוג, העיון והמידע: 32 עד 44, כמו באגפים */
:is([data-page="list"], [data-page="theorems"], [data-page="trig-formulas"],
    [data-page="pricing"], [data-page="members"], [data-page="terms"],
    [data-page="privacy"], [data-page="accessibility"], [data-page="credits"]) main h1:first-of-type {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.75rem);
  letter-spacing: -.01em;
}

/* פס המנויים בעמודים הפתוחים (הבעלים, 2.10). build_nav כותב אותו אחרי הכותרת
   של SUB_PAGES: שורה אחת וכפתור, בזרימת העמוד, כך שאינו מסתיר דבר. בגיליון
   (‏.in-frame) ובהדפסה הוא יורד. verify_home_subscribe בודק אותו. */
.sub-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 14px 0 22px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
}
.sub-strip p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-calm); }
.sub-strip-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  background: var(--iris);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.sub-strip-btn:hover { background: var(--iris-deep); }
.sub-strip-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 599px) { .sub-strip { padding: 8px 12px; } .sub-strip p { flex: 1 1 60%; font-size: 14px; } }
@media print { .sub-strip { display: none; } }

/* עד 429, בעמודים עם מתג הלילה, הלוגו, "נוסחאון", הלילה, "עוד" ו"לרכישה" אינם
   נכנסים (412 ב-390). השם "FizMath" יורד מהעין ונשאר לקורא המסך, כשם הקישור. */
@media (max-width: 429px) {
  .brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}