/* ──────────────────────────────────────────────────────────────────────────
   practice.css - אזור התרגול. נטען אחרי style.css ומשתמש באותה פלטה.
   ────────────────────────────────────────────────────────────────────────── */

/* ── רשימת התרגול ──────────────────────────────────────────────────────── */

.practice-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 34px;
  color: var(--text-muted);
  font-size: .92rem;
}

.pbar {
  flex: 1;
  max-width: 320px;
  height: 8px;
  border-radius: 99px;
  background: var(--accent-soft);
  overflow: hidden;
}

.pbar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .5s ease;
}

.punit { margin-bottom: 44px; }

.punit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.punit-count {
  flex: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-radius: 99px;
  padding: 3px 11px;
}

.punit-count.is-done { background: var(--success-soft); color: var(--success); }

.punit h2 {
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.punit-blurb {
  color: var(--text-muted);
  margin: 0 0 18px;
  font-size: .95rem;
  max-width: 62ch;
}

/* ‏**רשימה קומפקטית, לא רשת כרטיסים.** תרגיל הוא שורה: דרגה, שם,
   סעיפים. הבעלים ביקש לקצר את כולם לכתיב קומפקטי, כולל שאלות
   ברמת בגרות - הפירוט שייך לעמוד התרגיל. */
.pgrid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}

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

.pcard.done { border-inline-start: 4px solid var(--success); }
.pcard.partial { border-inline-start: 4px solid var(--accent); }

.pcard-star { color: var(--accent); }

.pcard-title {
  font-weight: 600;
  font-size: .97rem;
  color: var(--text-heading);
}

.pcard-meta {
  margin: 0 0 0 auto;
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: .8rem;
  white-space: nowrap;
}

/* .pcard-level (תג הדרגה) עבר ל-style.css: גם לוח הכיתה מציג אותו
   בבלוק "שאלות הבגרות בנושא", והוא אינו טוען את הגיליון הזה. */

/* ── ראש עמוד התרגיל ───────────────────────────────────────────────────── */

.ex-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}

.ex-head h1 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-top: 6px; }

.ex-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: .84rem;
  color: var(--text-muted);
}

.ex-progress .pbar { width: 120px; flex: none; height: 6px; }
.ex-progress.is-done .pbar i { background: var(--success); }
.ex-progress.is-done { color: var(--success); font-weight: 600; }

.ex-hint {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: .88rem;
}

/* ‏התרגיל מצויר ב-practice.js אחרי שקובץ הנושא נטען. עד שגוף השאלה נכתב,
   מה שמתחתיו צויר ריק וקפץ פעמיים (CLS 0.83 בטלפון ב-4G). עכשיו הוא מחכה
   סמוי, וכשהגוף נכתב הוא מופיע במקומו הסופי - זהה לפיקסל. עמוד הנעילה
   ו"לא נמצא" מחליפים את main, ובלי #ex-body הכלל אינו חל (מהירות, 2026-09-30). */
#ex-main:has(#ex-body:empty) > :not(.upbar):not(.crumbs):not(.ex-head):not(.ex-actbar),
body:has(#ex-main #ex-body:empty) > .site-footer { visibility: hidden; }

.ex-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.ex-tools button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ctl-border);
  background: var(--iris-soft);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--iris-deep);
  font: inherit;
  font-size: .86rem;
  min-height: 40px;
}

.ex-tools button svg { width: 18px; height: 18px; flex: none; }
.ex-tools button:hover { background: var(--accent-soft); color: var(--text-heading); }

.ex-tools button.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.ex-tools-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: var(--border);
}

/* ── פריסה: גיליון + מלווה ─────────────────────────────────────────────── */

/* ‏**אין עמודת עזרה** (הבעלים, 2026-09-24): העמודה שבצד היא של ניוטי
   השקט בלבד. השיחה נפתחת בתוך הסעיף, כשמבקשים (tutor.js, dock). */
/* ‏**רשת מסך התרגיל** (הלוח, גרסה 2): `1fr 360px`. העמודה הצרה מחזיקה את
   תפריט הסימון, את האיור ואת הנוסחאון, ולכן אינה ריקה לעולם; השיחה עם
   ניוטי אינה יושבת בה - היא עוגנת בתוך הסעיף (‏tutor.js). הכללים של
   הכרטיס, השורות המקופלות והנוסחאון: "מסך התרגיל לפי הלוח" בסוף הקובץ. */
.ex-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.ex-sheet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px 20px;
  box-shadow: var(--shadow);
}

/* ── גוף השאלה: המסגרת של שאלת הבגרות ────────────────────────────
   ‏Formulas.paperFrame, ‏.bq-paper למטה. הנתונים המודגשים הם החלק
   החשוב בשאלה (הבעלים, כרטיס uryb 2026-09-18): גדולים יותר, לא רק
   מודגשים - בתרגול, בדף העבודה ובמבחן; לשון השאלון (solve) כמו בטופס.
   ההבלטה עדינה (הבעלים, כרטיס dxtt 2026-09-21): משקל בינוני וגוון
   הדיו של המסגרת במקום שחור כבד - בולט, אבל נעים לעין. */
body[data-page="exercise"] .bq-statement b,
body[data-page="exercise"] .bq-paper-part span[data-block] b,
body[data-page="worksheet"] .bq-statement b,
body[data-page="worksheet"] .bq-paper-part span[data-block] b,
body[data-page="exam"] .bq-statement b,
body[data-page="exam"] .bq-paper-part span[data-block] b,
.part-prompt b,
.ws-prompt b {
  font-size: 1.08em;
  font-weight: 600;
  color: var(--text-strong);
}

.ex-scene { margin: 0 0 26px; }

/* ── סצנות ─────────────────────────────────────────────────────────────── */

.scene {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 10px;
}

.scene-svg { display: block; width: 100%; height: auto; }

.scene-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.scene-play {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  border-radius: 99px;
  padding: 6px 14px 6px 11px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  flex: none;
}

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

/* עץ הסתברות שממתין ללחיצה: כפתור בסגנון הרמזים, במקום הסצנה.
   המראה עצמו יושב בכלל של .tchip (צ'יפים, למטה) - כאן רק המיקום.
   אין אדום ואין צהוב - איריס הוא צבע הפעולה. */
.scene-reveal {
  display: inline-flex;
  align-items: center;
  margin: 6px 0;
}

/* בהדפסה, במקום העץ: שורת כיתוב, והתלמיד מצייר בדף */
.scene-draw-note {
  margin: 6px 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-heading);
}

.scene-play-icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--accent);
}

.scene-play.is-playing .scene-play-icon {
  width: 9px; height: 11px;
  border: 0;
  background: var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
}

.scene-scrub {
  flex: 1;
  min-width: 60px;
  accent-color: var(--accent);
  height: 22px;
  /* פס הגרירה נמדד בזמן, והזמן בכל סצנה רץ שמאלה-ימינה - כמו ציר ה-t
     בגרף וכמו הגוף שנע על המסך. בירושה מהעמוד הוא היה RTL, כלומר
     התמלא מימין בזמן שהאיור התקדם שמאלה. שני כיוונים לאותה התקדמות. */
  direction: ltr;
}

.scene-readout {
  flex: none;
  font-size: .8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: plaintext;
  min-width: 0;
  max-width: 100%;
}

/* חדר 66: הכיתוב חרג מהעמודה הצרה (360px) עד 126px, ועמוד התרגיל נגלל הצידה.
   הפס נשבר לשורה, והכיתוב נשבר בתוכה; בעמודה הצרה הוא תמיד בשורה משלו, כדי
   שמספר שמתארך בזמן ההפעלה לא יקפיץ אותו בין השורות. */
.ex-aside .scene-readout { flex-basis: 100%; }

.scene-caption {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}

.scene-fallback { color: var(--text-muted); font-size: .9rem; margin: 0; }

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

.scene-meters {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.scene-meter {
  display: grid;
  grid-template-columns: 6.6em 1fr 6.6em;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--text-muted);
}

.scene-meter .sm-label { font-weight: 600; color: var(--text-heading); }

.scene-meter .sm-track {
  height: 9px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
  direction: ltr;
}

.scene-meter .sm-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .08s linear;
}

.scene-meter .sm-val {
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}

/* ── לשון שאלת הבגרות, כמו בטופס ──────────────────────────────────────
   ‏**פסקה, לא רשימה.** קודם הסעיפים כאן היו `li` ברשת של שתי עמודות,
   ושורת נתון שאין לה אות נדחסה לעמודה של 1.5em - כלומר מילה בכל שורה.
   בשאלון זו פסקה רצופה, וכך היא נראית עכשיו גם כאן. */
.bq-paper {
  font-size: .95rem;
  line-height: 1.85;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
}

.bq-paper > p { margin: 0 0 10px; }
.bq-paper > p:last-child { margin-bottom: 0; }

/* נתון שנוסף לפני סעיף - בשאלון הוא פסקה בפני עצמה, ולא תגית */
.bq-paper-lead { margin-top: 14px; }

.bq-paper-part { margin-top: 12px; }
.bq-paper-part b { color: var(--text-strong); font-weight: 600; margin-inline-end: 2px; }
/* תת-סעיף (‏1) ו-(2) של אותה אות: נסוג פנימה, בלי אות שנייה */
.bq-paper-part.is-sub { margin-top: 4px; padding-inline-start: 1.4em; }

/* ── סעיפים ────────────────────────────────────────────────────────────── */

.part {
  border-top: 1px solid var(--border);
  padding: 20px 0 4px;
}

/* ‏.part.is-active: הכרטיס, ב"מסך התרגיל לפי הלוח" בסוף הקובץ */

.part-head { display: flex; gap: 11px; align-items: flex-start; }

.part-tag {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--text-heading);
  font-weight: 700;
  font-size: .85rem;
  margin-top: 1px;
}

.part.is-active .part-tag { background: var(--accent); color: var(--on-accent); }
.part.is-solved .part-tag { background: var(--success); color: var(--on-accent); }

.part-prompt { margin: 0; font-weight: 600; color: var(--text-heading); }

.answer {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 14px 0 0;
  padding-inline-start: 38px;
}

.answer-field {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 44px;
}

/* ‏**מיקוד נראה בתיבת התשובה** (‏WCAG 2.4.7). ‏`.answer-field input:focus`
   מכבה את ה-`outline` של הדפדפן, וכאן היה רק שינוי צבע של גבול 1px -
   מחוון חלש מדי בפקד המרכזי של האתר. הטבעת היא זו שכבר קיימת בטופס
   קוד הגישה ובטופס הדיווח, ואינה מוסיפה גוון. */
.answer-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── סרגל הכתיבה המתמטי ────────────────────────────────────────────
   תשובה של "מהו ערך הביטוי 5² · 5³" היא 5⁵, והמקלדת של הטלפון לא
   נותנת את הסימנים האלה. שמונה מקשים, נפתחים רק כשהתיבה במיקוד. */
/* ── רמת ההסבר: המשפט שהיחידה מלמדת ────────────────────────────────
   הבעלים ביקש שמתחת לכל נושא בגאומטריה יופיע המשפט עצמו, ולא רק
   ערמת תרגילים. המספר הוא המספר ברשימה הרשמית - זה שמותר לצטט
   בבחינה - ולכן הוא מודגש. */
.hub-theorem {
  margin: 10px 0 12px;
  padding: 11px 14px;
  border-inline-start: 3px solid var(--aqua);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
}

/* ── סדרת תרגול חוזרת ──────────────────────────────────────────────
   עשרה כרטיסים שכתוב על כולם אותו דבר הם קיר שצריך לגלול דרכו כדי
   להגיע להוכחות. אותו תרגיל עם מספרים אחרים הוא סדרה, וסדרה נראית
   כשורה של מספרים. */
/* ‏.drillrow ו-.drillnum עברו אל style.css: הריבועים הם התצוגה האחידה
   של כל האתר, וגם class.html ו-papers.html מציירים אותם. */

.mathpad {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  direction: ltr;
  /* טופס התשובה הוא שורת flex, ולכן סרגל בלי הבסיס הזה נדחס בין
     התיבה לכפתור הבדיקה. הצמדה לימין מעמידה את המקשים מתחת לתיבה
     ולא בקצה הנגדי של השורה. */
  flex: 0 0 100%;
  justify-content: flex-end;
  /* תמיד בסוף השורה, גם כשהוא נמצא ב-DOM לפני כפתורי הטופס: בלי זה
     הכפתורים נדחפים לשורה שמתחת לסרגל ברגע שהוא נפתח. */
  order: 10;
}

.mathpad-echo { order: 11; }

/* שורות הסרגל: הראשית, "יווניות", ובפיזיקה גם "פיזיקה". הכיתוב יושב
   בקצה הימני של השורה, כתגית קטנה, לא כמקש. */
.mathpad-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  flex: 0 0 100%; justify-content: flex-end;
}
.mathpad-row-tag {
  font-style: normal; font-size: .72rem; font-weight: 700;
  color: var(--lilac-deep); background: var(--lilac);
  border-radius: 999px; padding: 2px 8px; direction: rtl;
}

/* ‏**נפתח במקש, לא מעצמו** (הבעלים, 2026-09-08). קודם הסרגל הופיע
   בסעיף הפעיל, בתיבה שבמיקוד ובתיבה שכבר יש בה טקסט - ובעמוד שכל
   מטרתו להציג את השאלה בבירור זה היה רעש קבוע מתחת לכל תיבה. */
.mathpad.is-open { display: flex; }

/* הדגל על body: אחרי פתיחה אחת הסרגל מלווה את הסעיף הפעיל (ובדף
   עבודה ובמבחן - את התיבה שבמיקוד), ולא את כל התיבות בעמוד. */
body.mathpad-open .part.is-active .mathpad,
body.mathpad-open .answer-field:focus-within + .mathpad,
body.mathpad-open .ws-numeric:focus-within + .mathpad,
body.mathpad-open .ws-numeric:focus-within + .mathpad-toggle + .mathpad,
body.mathpad-open .answer-field:focus-within + .mathpad-toggle + .mathpad { display: flex; }

body.mathpad-open .part.is-active .mathpad-toggle,
body.mathpad-open .ws-numeric:focus-within .mathpad-toggle,
body.mathpad-open .answer-field:focus-within + .mathpad-toggle {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}

.mathpad-toggle {
  flex: none;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  background: var(--iris-soft);
  color: var(--iris-deep);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  align-self: center;
}

.mathpad-toggle:hover { border-color: var(--accent); color: var(--accent); }
.mathpad-toggle.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.mathpad-key {
  min-width: 40px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-heading);
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}

.mathpad-key:hover { border-color: var(--accent); color: var(--accent); }
.mathpad-key:active { background: var(--accent-soft); }

/* שורת ההד: הביטוי כפי שהאתר קרא אותו. **בלי ערך מחושב** - מספר כאן
   היה הופך את תיבת התשובה למחשבון שפותר את השאלה. */
.mathpad-echo {
  margin: 7px 0 0;
  font-size: .85rem;
  color: var(--text-muted);
  flex: 0 0 100%;
}

/* תיבת תשובה פתוחה תופסת שורה שלמה, ולכן הסרגל שמתחתיה מיושר לתחילתה
   ולא לקצה הנגדי של הטופס. */
.answer.is-open .mathpad,
.answer-open + .mathpad { justify-content: flex-start; }

.mathpad-echo b {
  color: var(--text-heading);
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}

.answer-field input {
  border: 0;
  background: none;
  padding: 10px 13px;
  font: inherit;
  font-size: 1rem;
  width: 150px;
  color: var(--text);
  direction: ltr;
  text-align: start;
}

.answer-field input:focus { outline: none; }

/* תיבת ביטוי: ‏2gh/(m+M) ארוך ממספר, ומספיק גם למשוואה עם אגף שמאלי */
.answer-field.is-expr input,
body[data-page="solve"] .answer-field.is-expr input { width: 260px; max-width: 100%; }
.ws-numeric.is-expr input { min-width: 240px; }

/* ‏**תיבת נקודה** (‏U7): ‏E( x , y ) בשורה אחת משמאל לימין, ובה שתי תיבות
   קטנות - כל שיעור בתיבה משלו, כמו בדף. הסוגריים והפסיק הם טקסט ולא תיבה,
   ולכן אינם נמחקים ואינם נכתבים. בטלפון שתי התיבות חולקות את השורה. */
.answer-field.is-point { gap: 2px; padding: 0 9px; direction: ltr; }
.answer-field.is-point .pt-mark {
  color: var(--text-muted); font-size: 1.1rem; line-height: 1; user-select: none;
}
.answer-field.is-point .pt-name { color: var(--text-heading); font-weight: 600; padding-inline-end: 2px; }
.answer-field.is-point input,
body[data-page="solve"] .answer-field.is-point input {
  width: 74px; padding: 6px 4px; margin: 5px 2px; text-align: center;
  border-bottom: 1.5px solid var(--border-strong); border-radius: 0;
}
.answer-field.is-point input:focus { border-bottom-color: var(--accent); }

.answer-unit {
  padding: 0 12px;
  color: var(--text-muted);
  font-size: .88rem;
  border-inline-start: 1px solid var(--border);
  align-self: stretch;
  display: grid;
  place-items: center;
  direction: ltr;
  background: var(--accent-soft);
}

/* ‏**כפתורי הסעיף קטנים** (הבעלים, 2026-09-08: "גדולים מדי"). הבדיקה
   היא פעולה שנעשית עשר פעמים בשאלה, לא כפתור פתיח; ו"עזרה" היא כפתור
   שקט - טקסט בלי מסגרת - כי ניוטי ממילא פתוח לצד השאלה. */
.answer .btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.answer .btn.help {
  background: var(--iris-soft);
  border-color: var(--ctl-border);
  color: var(--iris-deep);
  padding-inline: 8px;
}

.answer .btn.help:hover { color: var(--accent); background: var(--accent-soft); }

/* סעיף בחירה. האפשרויות תופסות שורה מלאה, כדי שניסוח ארוך של הנמקה
   יישאר קריא ולא יידחס לצד כפתור הבדיקה. */
.answer-choices {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.choice:hover { border-color: var(--iris); }

.choice input {
  margin: 2px 0 0;
  accent-color: var(--accent);
  width: 18px; height: 18px;
  flex: none;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.part.is-solved .choice:has(input:checked) {
  border-color: var(--success);
  background: var(--success-soft);
}

.answer-note {
  margin: 10px 0 0;
  padding-inline-start: 38px;
  font-size: .9rem;
  min-height: 1px;
}

.answer-note.is-ok { color: var(--success); font-weight: 600; }
.answer-note.is-no { color: var(--no); }
.answer-note.is-warn { color: var(--text-muted); }

.part.is-solved { opacity: .82; }
.part.is-solved.is-active { opacity: 1; }

/* ── המלווה ────────────────────────────────────────────────────────────── */

.ex-aside { position: sticky; top: 84px; }

.tutor {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: calc(100vh - 118px);
}

/* פתוחה, השיחה יושבת בתוך הסעיף מתחת לתיבת התשובה - לא מעליה ולא לצדה */
.part > .tutor {
  margin-top: 14px;
  max-width: 640px;
  max-height: min(70vh, 600px);
  /* הגלילה אליה משאירה מקום לכפתורים הצפים שבתחתית; את הכותרת הדביקה
     מפנה scroll-padding של המסמך (style.css) */
  scroll-margin: 0 0 80px;
}
.part > .tutor .tutor-thread { min-height: 0; }

/* ההצעה אחרי בדיקה שנכשלה: קטנה, בשורת ההערה, והתלמיד בוחר בה */
.tnudge {
  margin-inline-start: 4px;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.tnudge:hover { border-color: var(--accent); background: var(--accent-soft); }

.tutor-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
  flex: none;
}

/* ניוטי מ-NewtyArt; הציור והצבע ב-newty.css */
.tutor-avatar {
  width: 28px; height: 28px;
  display: block;
  flex: none;
}

.tutor-head b { display: block; font-size: .95rem; color: var(--text-heading); }
.tutor-sub { display: block; font-size: .76rem; color: var(--text-muted); }
.tutor-story { display: inline-block; margin-top: 2px; font-size: .76rem; color: var(--iris); text-decoration: none; }
.tutor-story:hover, .tutor-story:focus-visible { text-decoration: underline; }

.tutor-close {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}

.tutor-close:hover { background: rgba(0,0,0,.05); }

.tutor-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  scroll-behavior: smooth;
}

.tmsg { max-width: 100%; }

.tmsg-body {
  padding: 11px 14px;
  border-radius: 13px;
  font-size: .92rem;
  line-height: 1.62;
}

.tmsg-tutor .tmsg-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-start-start-radius: 4px;
}

.tmsg-student {
  align-self: flex-end;
  max-width: 85%;
}

.tmsg-student .tmsg-body {
  background: var(--info-soft);
  border: 1px solid var(--border);
  border-end-end-radius: 4px;
}

.tmsg.is-ok .tmsg-body { background: var(--ok-soft); border-color: var(--ok-line); }
.tmsg.is-no .tmsg-body { background: var(--no-soft); border-color: var(--no-line); }
.tmsg.is-hint .tmsg-body { background: var(--blue-soft); border-color: var(--aqua-line); }

.tflag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  margin-inline-end: 5px;
  vertical-align: 1px;
}

.tflag-ok { background: var(--success); color: var(--on-accent); }
.tflag-no { background: var(--no); color: var(--on-accent); }
.tflag-hint { background: var(--aqua-text); color: var(--on-accent); }

.tdivider {
  text-align: center;
  font-size: .76rem;
  color: var(--text-muted);
  position: relative;
  margin: 6px 0;
}

.tdivider::before, .tdivider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 34px);
  height: 1px;
  background: var(--border);
}

.tdivider::before { inset-inline-start: 0; }
.tdivider::after { inset-inline-end: 0; }

/* בחירת הדרך: שתי אפשרויות, אחת נכונה */

.tpath { display: grid; gap: 8px; margin-top: 11px; }

.tpath-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: start;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.tpath-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.tpath-opt:disabled { cursor: default; opacity: .55; }

.tpath-opt.is-right {
  opacity: 1;
  border-color: var(--success);
  background: var(--success-soft);
}

.tpath-opt.is-wrong {
  opacity: 1;
  border-color: var(--no);
  background: var(--no-soft);
}

.tpath-mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-heading);
}

/* צ'יפים */

.tchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* גם כפתור החשיפה של העץ (‏.scene-reveal) נשען על הכלל הזה */
.tchip, .scene-reveal {
  border: 1px solid var(--ctl-border);
  background: var(--iris-soft);
  color: var(--iris-deep);
  border-radius: 99px;
  padding: 7px 14px;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}

.tchip:hover, .scene-reveal:hover { border-color: var(--accent); background: var(--surface); }
.tchip:focus-visible, .scene-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tchip-strong {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.tchip-strong:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ── נוסחאות ───────────────────────────────────────────────────────────── */

.fml {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  white-space: nowrap;
  color: var(--text-heading);
}

.fml sub, .fml sup { font-style: normal; font-size: .68em; }
.fml sub { vertical-align: -.28em; }
.fml sup { vertical-align: .48em; }

.fml-inline {
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 6px 2px;
  font-size: 1.02em;
}

/* שבר אמיתי ולא לוכסן. ככה הוא מופיע בדף הנוסחאות, וזה מה שהתלמיד יחפש. */
.fml-frac {
  display: inline-flex;
  flex-direction: column;
  /* middle ממרכז את השבר על אמצע השורה, כך שהאיבר שאחריו, למשל t, יושב
     מול קו השבר ולא מעליו. כמו בדף הנוסחאות. */
  vertical-align: middle;
  text-align: center;
  margin: 0 .18em;
  font-size: .92em;
}

.fml-num { padding: 0 .3em; border-bottom: 1.2px solid currentColor; line-height: 1.3; }
.fml-den { padding: 0 .3em; line-height: 1.3; }

.fml-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}

.fml-block .fml { font-size: 1.16rem; }

.fml-tag {
  flex: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--success-soft);
  color: var(--success);
}

.fml-tag.is-def { background: var(--accent-soft); color: var(--text-muted); }

/* ── סידור הנתונים ─────────────────────────────────────────────────────── */

.tsetup {
  margin-top: 11px;
  padding: 12px 13px;
  background: var(--info-soft);
  border-radius: 10px;
}

.tsetup + .tsetup { margin-top: 10px; }

.tsetup-label {
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--aqua-text);
}

.tsetup .fml-block { margin-top: 0; }

.tsetup-why {
  margin: 8px 0 10px;
  font-size: .87rem;
  color: var(--text-muted);
}

/* הצהרת הציר. נגזרת מהסצנה, ולכן היא תמיד מתארת את מה שמצויר באיור. */
.tsetup-axis {
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--aqua-line);
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
}

.tsetup-axis b { color: var(--aqua-text); }

.tsetup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.tsetup-table th,
.tsetup-table td {
  padding: 6px 8px;
  text-align: start;
  border-top: 1px solid var(--border);
  vertical-align: baseline;
}

.tsetup-table tr:first-child th,
.tsetup-table tr:first-child td { border-top: 0; }

/* עמודת הסמלים כולה במראה מתמטי אחיד. בלי הרקע של fml-inline, שנועד
   להבליט נוסחה בתוך משפט ורק מרעיש בתוך טבלה. */
.tsetup-table th {
  width: 1%;
  white-space: nowrap;
  font-weight: 400;
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text-heading);
  direction: ltr;
  unicode-bidi: isolate;
}

.tsetup-table th .fml-inline { background: none; padding: 0; font-size: 1em; }

.tsetup-val {
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: plaintext;
}

.tsetup-note { color: var(--text-muted); font-size: .82rem; }

.tsetup-table .is-unknown th,
.tsetup-table .is-unknown td { background: rgba(176, 137, 104, .12); }
.tsetup-table .is-unknown .tsetup-val { color: var(--accent-hover); }

.tsetup-foot {
  margin: 11px 0 0;
  font-size: .87rem;
  color: var(--text-muted);
}

/* כרטיס תאוריה */

.ttheory h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--text-heading);
}

.ttheory p { margin: 0 0 9px; }
.ttheory ul, .ttheory ol { margin: 0 0 9px; padding-inline-start: 20px; }
.ttheory li { margin-bottom: 5px; }
.ttheory > :last-child { margin-bottom: 0; }

.ttheory-fig {
  margin-top: 12px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent-hover);
  border-radius: 99px;
  padding: 8px 15px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
}

.ttheory-fig:hover { background: var(--accent-soft); }

/* ── חלון האיור ────────────────────────────────────────────────────────── */

.fig-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(44, 42, 38, .5);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: figIn .16s ease;
}

@keyframes figIn { from { opacity: 0; } }

.fig-box {
  width: min(860px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.fig-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.fig-head b { color: var(--text-heading); }

.fig-close {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  min-height: 40px;
}

.fig-close:hover { background: var(--accent-soft); color: var(--text-heading); }

.fig-body { padding: 18px; }
.fig-body .scene { border: 0; padding: 0; background: none; }

.tdots { display: inline-flex; gap: 4px; padding: 3px 0; }

.tdots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: tdot 1.1s infinite ease-in-out;
}

.tdots i:nth-child(2) { animation-delay: .16s; }
.tdots i:nth-child(3) { animation-delay: .32s; }

@keyframes tdot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ── שכבת כתיבה ────────────────────────────────────────────────────────── */

.ink-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: auto;
  border-radius: var(--radius);
  z-index: 3;
}

.ink-canvas.is-live {
  pointer-events: auto;
  touch-action: none;   /* מונע גלילה בזמן ציור באצבע */
  cursor: crosshair;
}

body.ink-live .ex-sheet { user-select: none; }
body.ink-live .answer,
body.ink-live .scene-bar { position: relative; z-index: 4; }

/* ── הדגשות ────────────────────────────────────────────────────────────── */

mark.hl {
  background: #FBEFB8;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}

mark.hl-green { background: #D8ECCF; }
mark.hl-pink { background: #F6D9E2; }
mark.hl.has-note { border-bottom: 2px solid var(--accent); }

.hl-bar {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
}

.hl-swatch {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,.09);
  cursor: pointer;
  padding: 0;
}

.hl-sw-yellow { background: #FBEFB8; }
.hl-sw-green { background: #D8ECCF; }
.hl-sw-pink { background: #F6D9E2; }

.hl-sep { width: 1px; height: 20px; background: var(--border); }

.hl-act {
  border: 0;
  background: none;
  color: var(--text-heading);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.hl-act:hover { background: var(--accent-soft); }
.hl-act-del { color: var(--no); }

/* ── מסכים צרים ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  /* העמודה הצרה נשארת לצד הגיליון, צרה יותר */
  .ex-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
}

/* ‏**בטלפון ניוטי יושב בכותרת הדביקה** (עד 620, שם התפריט יורד לשורה
   שנייה והפינה שמול המותג ריקה). כפתור צף בפינה התחתונה - כמו כפתור
   ניוטי שהיה כאן עד 2026-09-24 - מכסה בכל גלילה משהו אחר: כפתור עזרה
   של סעיף, או פינה של שרטוט. בכותרת הוא תמיד גלוי ולעולם לא מעל השאלה. */
@media (max-width: 620px) {
  .ex-layout { grid-template-columns: minmax(0, 1fr); }
  .ex-aside { position: static; }
  .newty {
    position: fixed;
    top: 1px;
    inset-inline-end: 14px;
    z-index: 31;
    width: 50px;
    height: 55px;
  }
}

@media (max-width: 720px) {
  .ex-sheet { padding: 18px 16px 14px; }
  .ex-head { align-items: flex-start; }

  .ex-tools { width: 100%; overflow-x: auto; justify-content: flex-start; }
  /* ‏**הכיתוב מוסתר לעין ולא מקורא מסך** (‏WCAG 4.1.2). ‏`display: none`
     הוציא את הטקסט מעץ הנגישות, וה-SVG הוא `aria-hidden` - ולכן נשאר
     כפתור בלי שם, שתלוי ב-`title` בלבד. ראה `.sr-only` ב-style.css. */
  .ex-tools button span {
    position: absolute; 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;
  }
  .ex-tools button { padding: 9px 11px; }
  /* סרגל של כפתור אחד (טקסט גדול בתרגול ובמבחן): הכיתוב נשאר גלוי,
     ‏והסרגל ברוחב תוכנו - סמל בודד בקופסה ברוחב המסך נראה כשגיאה */
  .ex-tools-solo { width: auto; }
  .ex-tools-solo button span {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none;
  }

  .answer, .answer-note { padding-inline-start: 0; }

  /* שדה התשובה מקבל שורה משלו. כשהוא חלק עם הכפתורים באותה שורה הוא יוצא
     צר מהם, וזה משדר שהכפתור חשוב מהתשובה. */
  .answer-field { flex: 1 0 100%; }
  .answer-field input { flex: 1; width: auto; min-width: 0; }
  .answer .btn { flex: 1; justify-content: center; }

  .scene-readout { display: none; }
  .scene-bar { gap: 9px; }

  .pgrid { grid-template-columns: 1fr; }
}

/* מכשירי מגע: מטרות גדולות יותר */
@media (hover: none) {
  .tpath-opt { padding: 13px 13px; }
  .tchip, .scene-reveal { min-height: 40px; padding: 9px 15px; }
  .hl-swatch { width: 32px; height: 32px; }
  .hl-act { padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .tutor-thread, .pbar i, .ex-aside { scroll-behavior: auto; transition: none; }
  .tdots i { animation: none; }
  .scratch.is-revealed .scratch-under { animation: none; }
  .newty-say { animation: none; }
}

@media print {
  .ex-tools, .ex-aside, .part > .tutor, .scene-bar, .hl-bar, .pager { display: none !important; }
  .ex-sheet { border: 0; box-shadow: none; }
}

/* ── תגיות נושא ────────────────────────────────────────────────────────
   תרגיל יושב ביחידה אחת בלבד. תגית "משלב" אומרת שהפתרון עובר גם דרך
   נושא אחר, בלי לשכפל את התרגיל לשתי רשימות. */
.ptag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--ctl-border);
  font-size: .84rem;
  color: var(--text-heading);
  text-decoration: none;
  line-height: 1.4;
}

a.ptag:hover { border-color: var(--accent); background: var(--accent-soft); }

.ptag i { font-style: normal; color: var(--text-muted); font-size: .78rem; }
.ptag em {
  font-style: normal;
  color: var(--lilac-deep);
  font-size: .74rem;
}

.ptag.is-on {
  background: var(--text-heading);
  border-color: var(--text-heading);
  color: var(--on-accent);
}
.ptag.is-on i, .ptag.is-on em { color: rgba(255, 255, 255, .72); }

.ptag.is-combine {
  background: var(--surface);
  border-style: dashed;
  border-color: var(--iris-pale);
  color: var(--lilac-deep);
  font-size: .78rem;
  padding: 3px 10px;
}

.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

.ptags {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ptags h2 { font-size: 1.15rem; margin: 0 0 6px; }

.ptags-note {
  margin: 0 0 16px;
  font-size: .9rem;
  color: var(--text-muted);
  max-width: 68ch;
}

.ptags-row { display: flex; flex-wrap: wrap; gap: 8px; }

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

.exam-builder .ex-field {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 16px 0 0;
}
.exam-builder .ex-field:first-of-type { border-top: 0; padding-top: 8px; }

.exam-builder legend {
  padding: 0;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-heading);
}

.chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  font: inherit;
  font-size: .89rem;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.ex-field-note {
  margin: 9px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}

.ex-minutes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: .89rem;
  color: var(--text-muted);
}
/* שדה הכמות: אותו מראה כמו שדה הדקות, בשורה משלו מתחת לכפתורי הקיצור */
.ex-count { display: flex; }
/* ההערה שמתחת לשדה תמיד תופסת שורה, גם כשהיא ריקה - אחרת הצ'יפים
   שמתחתיה קופצים בכל פעם שהיא מופיעה ונעלמת (‏FOLLOWUPS 181) */
.ex-count-note { min-height: 1.65em; }
.ex-minutes input {
  font: inherit;
  width: 82px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
}

.exam-go {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.exam-avail { font-size: .85rem; color: var(--text-muted); }

/* ── סרגל המבחן ──────────────────────────────────────────────────── */
/* במחברת באור יום (אגפי הספרייה, 2026-09-26): הסרגל שנהב עם קו, ולא
   מדור כהה - השאלה היא העיקר, והסרגל רק אומר איפה אני וכמה זמן נשאר. */

.exam-bar {
  position: sticky;
  /* מתחת לכותרת הדביקה, ולא מתחתיה בעומק: ב-top:0 השעון נבלע (ניווט 3) */
  top: var(--header-h);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.exam-steps { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }

.exam-step {
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.exam-step:hover { border-color: var(--iris); color: var(--iris-deep); }
.exam-step.is-at { background: var(--iris); border-color: var(--iris); color: var(--on-accent); }
.exam-step.is-ok { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.exam-step.is-part { border-color: var(--aqua); color: var(--aqua-text); }

.exam-clock {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-heading);
}
.exam-clock.is-low { color: var(--no); }

.exam-bar .btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--ctl-border);
  color: var(--iris-deep);
}
.exam-bar .btn:hover { background: var(--iris-soft); }

/* ── כותרת השאלה במבחן ───────────────────────────────────────────── */

.exam-qhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.exam-qhead h2 { margin: 0; font-size: 1.1rem; }

.exam-qtopic {
  font-size: .8rem;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--lilac);
  color: var(--lilac-deep);
}

/* ── סיכום ───────────────────────────────────────────────────────── */

.exam-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  margin: 14px 0 4px;
}

.exam-score-big {
  flex: none;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.exam-score-big i { font-size: 1.3rem; font-style: normal; color: var(--text-muted); }

.exam-review {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

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

.bq-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: .92rem;
}

.bq-statement p {
  margin: 0 0 10px;
  line-height: 1.75;
}

.bq-statement p:last-child { margin-bottom: 0; }

/* התרשים מגיע כ-SVG מתוך שקף הפתיחה של המצגת. הוא נבנה לרוחב מצגת,
   ולכן הוא מוגבל בגובה כדי שלא ידחוף את הסעיף הראשון מתחת לקיפול. */
.bq-figure {
  margin: 16px 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.bq-figure svg {
  width: 100%;
  height: auto;
  max-height: 46vh;
}

/* ‏**תרשימים ממוספרים של סעיף** (‏2026 מכ ש1 ה, ‏W7b): כל תרשים svg קטן
   משלו, והם זורמים מימין לשמאל כמו בשאלון - 1 מימין. בטלפון שניים בשורה. */
.bq-figure-part svg.bq-mini {
  width: 136px;
  max-width: 46%;
  margin: 2px 4px;
  vertical-align: top;
}

.bq-figure figcaption {
  margin-top: 8px;
  font-size: .78rem;
  color: var(--text-muted);
}

.bq-table-wrap { overflow-x: auto; margin: 14px 0; }

.bq-table {
  border-collapse: collapse;
  min-width: 60%;
  margin: 0 auto;
  background: var(--surface);
  font-size: .92rem;
}

.bq-table caption {
  caption-side: top;
  padding-bottom: 6px;
  font-weight: 700;
  color: var(--text-muted);
  font-size: .82rem;
}

.bq-table th, .bq-table td {
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  text-align: center;
}

.bq-table thead th { background: var(--accent-soft); }

/* ‏**טבלה רחבה נכנסת לעמודה** (חדר לילה 66). בטלפון (390, עמודה של 266-282)
   חרגו כל הטבלאות, 300 עד 686: שם הריווח צר, וטבלה שעדיין רחבה מהעמודה
   מקבלת is-flip מ-Formulas.fitTables ומתהפכת - השורות נעשות עמודות, שורה
   לכל מדידה, והשמות בשורה הראשונה. ‏flex ולא grid, כי מספר העמודות אינו
   ידוע ל-CSS. שאלון 2013 חשמל 3 (תשע מדידות) חרג ב-12px גם במחשב, ולכן
   מעשר עמודות הריווח צר בכל רוחב, והטבלה נשארת שורה. */
.bq-table:has(tr > :nth-child(10)) :is(th, td) { padding: 6px 8px; }

@media (max-width: 620px) {
  .bq-table { font-size: .86rem; min-width: 0; }
  .bq-table :is(th, td) { padding: 5px 6px; }
}

.bq-table-wrap.is-flip .bq-table { display: flex; flex-wrap: wrap; width: 100%; }
.bq-table-wrap.is-flip caption { display: block; flex: 1 0 100%; }
.bq-table-wrap.is-flip :is(thead, tbody) { display: contents; }
.bq-table-wrap.is-flip tr { display: flex; flex-direction: column; flex: 1 1 0; }
.bq-table-wrap.is-flip :is(th, td) {
  border-width: 0 0 1px;
  border-inline-start-width: 1px;
  white-space: nowrap;
}
.bq-table-wrap.is-flip tr > :first-child { border-top-width: 1px; }
/* כותרת (‏th, או התא הראשון של שורה, שעכשיו בראש העמודה) נשברת במקום
   להיחתך; ‏Formulas.fitTables משווה את גובה התאים בכל שורה, כדי שהמדידות
   יישארו בשורה אחת (‏D3). מספר ויחידה נשארים nowrap. */
.bq-table-wrap.is-flip :is(th, tr > :first-child) { white-space: normal; }
.bq-table-wrap.is-flip tr:last-child > * { border-inline-end-width: 1px; }

/* טבלה למילוי בסעיף בגרות (solve.js): הטבלה לכל הרוחב, תיבה בכל תא ריק,
   וסימון לכל תא - ירוק נכון, שזיף לא נכון, שני הגוונים של משוב בלבד */
.answer.is-table .answer-table { flex: 1 1 100%; margin: 0 0 4px; }
.answer-table td.is-blank { padding: 3px 4px; }
.answer-table input {
  width: 5.2em;
  padding: 5px 4px;
  font: inherit;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.answer-table input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.answer-table input.is-ok { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.answer-table input.is-no { border-color: var(--no); box-shadow: 0 0 0 1px var(--no); }

.part-points {
  flex: none;
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 9px;
}

/* סעיף פתוח: הוכחה, הנמקה או סרטוט. התלמיד כותב כמו במחברת. */
.answer-open {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.answer-open:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.answer.is-open { align-items: flex-start; }

/* הבדיקה העצמית נשארת מוסתרת עד שנכתבה תשובה. סעיף שנפתח לפני
   שניסו בו הוא סעיף שלא נלמד. */
/* ‏min-width: 0: בסעיף (flex) התיבה אינה נמתחת לרוחב התוכן שלה. בלעדיו תשובה
   שהיא טבלה מתחה אותה (390: ‏369 מול 300), ו-fitTables לא ראה חריגה. verify_scratch_fit.js */
.bq-check {
  min-width: 0;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.bq-check > summary {
  cursor: pointer;
  padding: 9px 14px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--aqua-text);
}

.bq-check-body { padding: 0 14px 12px; }

.bq-sum-item { margin-bottom: 10px; font-size: .92rem; line-height: 1.65; }
.bq-sum-item b { display: block; margin-bottom: 2px; color: var(--text-heading); }

/* ── שלב ליווי מסוג חשיפה ─────────────────────────────────────────────── */

.tflag-step { background: var(--info-soft); color: var(--aqua-deep); }

.tstep-note { margin: 6px 0 0; font-size: .9rem; line-height: 1.6; }

.tstep-fml {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  text-align: center;
}

/* ── סימונים שנוספו להמרת LaTeX ───────────────────────────────────────── */

.fml-up, .fml-txt { font-style: normal; }
.fml-bf { font-style: normal; font-weight: 700; }

.fml-root {
  border-top: 1.1px solid currentColor;
  padding: 0 .12em;
  margin-right: -.05em;
}

.fml-bar { border-top: 1.1px solid currentColor; }

.fml-vec, .fml-hat {
  position: relative;
  display: inline-block;
}

.fml-vec::after, .fml-hat::after {
  position: absolute;
  top: -.62em;
  left: 0;
  right: 0;
  font-size: .62em;
  font-style: normal;
  text-align: center;
  line-height: 1;
}

.fml-vec::after { content: "→"; }
.fml-hat::after { content: "^"; }

/* ‏**הערה של האתר, לא של השאלון** (‏D2, 2026-10-01): באקווה, בתוך מסגרת
   השאלה, היא נקראה כעוד שורה של משרד החינוך. לילך - הקשר - עם פס בתחילת
   השורה ותגית "הערת האתר"; הקישור הוא פעולה, ולכן iris. */
.part-paper {
  margin: 0 0 10px;
  padding: 7px 12px;
  background: var(--lilac);
  border-inline-start: 3px solid var(--lilac-deep);
  border-radius: 9px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--lilac-deep);
}

.part-paper a { color: var(--iris); font-weight: 700; }
.site-note-tag {
  display: inline-block;
  margin-inline-end: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ── דף עבודה: כל תרגילי תת הנושא בעמוד אחד ──────────────────────────
   עמוד התרגיל הבודד מצוין למי שנתקע. תלמיד שמתקדם בחומר רוצה לרוץ על
   עשרה תרגילים ברצף, וללכת שאלה שאלה דרך התפריט הופך את זה לעשר
   טעינות עמוד. */
.ws-wrap { padding-top: 24px; padding-bottom: 60px; }
.ws-progress { color: var(--text-muted); font-size: .9rem; margin: 6px 0 22px; }

.ws-ex {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.ws-ex-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ws-num {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
}

.ws-ex-head > div { flex: 1 1 200px; }
.ws-ex-head h3 { margin: 0; font-size: 1rem; }
.ws-level { font-size: .78rem; color: var(--text-muted); }
.ws-open { font-size: .84rem; color: var(--accent); white-space: nowrap; }

.ws-given { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ws-given span {
  font-size: .8rem;
  background: var(--lilac);
  border-radius: 999px;
  padding: 2px 10px;
}

.ws-part { display: flex; gap: 10px; margin-top: 14px; }
.ws-part + .ws-part { border-top: 1px solid var(--border); padding-top: 14px; }

/* ── סעיפי חימום: כל סעיף כרטיס משלו ─────────────────────────────
   הבעלים (כרטיס ay5p): סעיף ב התחיל מיד אחרי בנק הצעדים של סעיף א,
   עם קו דק בלבד. אותה מסגרת ואותו נייר של .ws-ex, ורווח ברור בין
   הכרטיסים; הכותרת "שאלה 2 · <המקור>" והנתון שלה בתוך הכרטיס.
   חל על דף העבודה ועל עמוד התרגיל דרך אותו HTML (‏Answer.warmHeadHTML). */
.ws-part.is-warm, .part.is-warm {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px 12px;
  margin-top: 22px;
}
.ws-part.is-warm + .ws-part.is-warm { border-top: 1px solid var(--border-strong); padding-top: 16px; }
.part.is-warm + .part.is-warm { border-top: 1px solid var(--border-strong); }
.warm-head { margin: 0 0 10px; }
.warm-title {
  margin: 0 0 6px;
  font-size: 1.02rem; font-weight: 800; color: var(--text-heading);
}
.warm-src { font-weight: 600; color: var(--text-muted); }
.warm-lead {
  margin: 8px 0 5px;
  font-size: .8rem; font-weight: 700; color: var(--aqua-deep);
}
.warm-given {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.warm-given li {
  background: var(--accent-soft); color: var(--text-heading);
  border-radius: 8px; padding: 4px 10px;
  font-size: .86rem; font-weight: 600;
  direction: ltr; unicode-bidi: plaintext;
}
.ws-part-id { flex: none; color: var(--text-muted); }
.ws-part-body { flex: 1 1 auto; min-width: 0; }
.ws-prompt { margin: 0 0 8px; font-weight: 600; }

.ws-choices { list-style: none; margin: 0 0 10px; padding: 0; }
.ws-choices li { margin-bottom: 5px; }
.ws-choices label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }

.ws-numeric { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ws-numeric input {
  font: inherit;
  width: 150px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
}
.ws-unit { color: var(--text-muted); font-size: .88rem; }

.ws-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-row button {
  font: inherit; font-size: .86rem;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  cursor: pointer;
}
.ws-row .ws-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ws-row button:hover { opacity: .9; }

.ws-note { margin: 10px 0 0; font-size: .9rem; }
.ws-note.is-ok { color: var(--ok); }
.ws-note.is-no { color: var(--no); }
.ws-note.is-warn { color: var(--text-muted); }

.ws-aid {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .9rem;
}
.ws-aid h4 { margin: 0 0 6px; font-size: .92rem; }
.ws-aid p { margin: 0 0 6px; }

.ws-part.is-solved .ws-num,
.ws-part.is-solved .ws-prompt { opacity: .75; }

@media print {
  .site-header, .ws-row, .ws-open, .ws-aid, .ws-note { display: none; }
  .ws-ex { break-inside: avoid; border-color: #ccc; }
}

.hub-sub-tools { margin: 0 0 10px; font-size: .86rem; }
.hub-sub-tools a { color: var(--accent); }

/* מבנה השאלון במסך הבנייה, ושורת ההוראה מעל המבחן */
.ex-structure { margin: 0 0 4px; font-size: .95rem; }
.ex-structure b { color: var(--text-heading); }

.exam-brief {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--lilac);
  font-size: .92rem;
}

.chipset .chip[disabled] { opacity: .45; cursor: not-allowed; }

/* כותרת כיתה ברשימת הנושאים של מקצוע מתמטיקה */
.grade-head {
  margin: 22px 0 8px;
  font-size: .92rem;
  color: var(--accent);
  font-weight: 700;
}
.grade-head:first-of-type { margin-top: 6px; }

/* האיור בדף העבודה. צר יותר מאשר בעמוד התרגיל, כי כאן יש עשרה
   איורים בעמוד אחד ולא אחד. */
.ws-scene { margin: 10px 0 14px; max-width: 520px; }
/* תיבה שבה התלמיד מצייר בעצמו (עץ הסתברות בדף העבודה): במסך שורת
   כיתוב, ובהדפסה מקום לצייר בגובה של תיבת טבלה. הגובה כאן ולא ב-JS.
   כפתור ההגדלה הוא ממשק ואין לו מה לחפש בנייר (מאמת מש1: 92px לעץ
   תלת שלבי, מהם 31 כפתור). */
@media print {
  .ws-scene.is-draw, .ws-part-scene.is-draw { min-height: 260px; }
  .zoom-open-btn { display: none; }
}
/* אותה תקרת רוחב לשרטוט שיושב בסעיף, אחרת הוא נפרש לרוחב מלא. */
.ws-part-scene { margin: 8px 0 12px; max-width: 520px; }

/* סעיף פתוח: הוכחה, הנמקה או סרטוט */
.answer-open { display: block; width: 100%; }
.answer-open textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  resize: vertical;
}
.ws-open-field {
  display: block;
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  resize: vertical;
}
.ws-aid.is-model { border-color: var(--accent); }
.ws-selfcheck { color: var(--text-muted); font-size: .85rem; margin-top: 8px; }

/* איור סטטי: אין מה להפעיל, ולכן אין כפתור הפעלה ואין פס גרירה.
   כפתור שלא קורה בו כלום נקרא כתקלה. */
.scene-bar.is-still .scene-play,
.scene-bar.is-still .scene-scrub { display: none; }
.scene-bar.is-still { justify-content: flex-start; }

/* ── תגית סוג התרגיל ───────────────────────────────────────────────
   תרגיל חישובי ותרגיל הוכחה הם שני דברים שונים לגמרי, והתלמיד צריך
   לדעת מראש לאיזה מהם הוא נכנס. */
.pcard-kind {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-inline-start: 5px;
  white-space: nowrap;
}
.pcard-kind.is-proof { background: var(--aqua-soft); color: var(--aqua-deep); }

/* ── שבר במונה ובמכנה ────────────────────────────────────────────────
   מקש a/b פותח שני שדות זה מעל זה עם קו שבר. הבעלים: "קו שבר מתמטי
   שמאפשר כתיבה במונה וכתיבה במכנה בנפרד." התוצאה נכנסת לתיבה בכתיב
   שהפרסר קורא, ושורת ההד מציגה אותה כשבר עם קו אופקי. */
.mathpad-frac {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
}
.mathpad-frac .frac-stack { display: inline-grid; gap: 0; direction: ltr; }
.mathpad-frac .frac-stack input {
  width: 110px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font: inherit;
  font-size: .95rem;
  direction: ltr;
}
/* טבעת מיקוד ולא רק צבע גבול (‏WCAG 2.4.7) */
.mathpad-frac .frac-stack input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mathpad-frac .frac-stack .frac-den { border-top: 2px solid var(--text-heading); border-radius: 0 0 6px 6px; }
.mathpad-frac .frac-stack .frac-num { border-radius: 6px 6px 0 0; }
.mathpad-frac .btn { padding: 5px 12px; font-size: .85rem; }

/* ── כרטיס גירוד: התשובה מתחת לשכבה כסופה ──────────────────────────
   בסעיף פתוח התלמיד כותב ורק אז משווה. הבעלים ביקש שהתוצאה לא תיפתח
   בלחיצה אלא בגירוד, כמו כרטיס גירוד: אחרי שהוסרו 55% מהשכבה היא
   נעלמת כולה, ומופיע כפתור שמעתיק את התוצאה לתיבת התשובה - כי בסעיפים
   מורכבים הניסוח המדויק הוא חצי מהעבודה.
   הכרטיס קטן וממורכז (56px, עד 260px), התשובה באמצע, ובחשיפה פעימה
   קצרה (הבעלים, 2026-09-11). תשובה ארוכה מקבלת is-tall וגובה משלה. */
.scratch { position: relative; max-width: 260px; margin: 6px auto 4px; }
.scratch-under {
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 6px 12px; overflow: hidden;
  text-align: center; border-radius: 8px; background: var(--surface);
}
.scratch.is-tall { max-width: none; }
.scratch.is-tall .scratch-under {
  display: block; height: auto; min-height: 56px; padding: 10px 12px;
  overflow: visible; text-align: start;
}
.scratch.is-revealed .scratch-under { animation: scratch-pulse 250ms ease; }
@keyframes scratch-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.scratch-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
  transition: opacity .45s ease;
}
.scratch.is-revealed .scratch-top { opacity: 0; pointer-events: none; }
/* פירור של החומר המגורד: answer.js קובע מקום, גודל וצבע, ומנפיש ב-animate */
.scratch-flake {
  position: absolute;
  z-index: 2;
  margin: -1px 0 0 -1px;
  border-radius: 1px;
  pointer-events: none;
}
.scratch-fill { margin-top: 8px; text-align: center; }
.scratch-fill .btn { font-size: .85rem; padding: 5px 12px; }
.scratch-proof { margin: 0; padding-inline-start: 1.3em; }
.scratch-proof li { margin: 3px 0; }
.scratch-proof small { color: var(--text-muted); }

/* ── בונה שיעורי הבית (homework.js) ────────────────────────────────────
   חמישה שלבים בעמוד אחד, ולא אשף עם "הבא": מורה שמשנה רמת קושי רוצה
   לראות מיד כמה תרגילים יצאו, ולא ללחוץ שלוש פעמים חזרה. */
.hw-wrap { max-width: 980px; }

.hw-step {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.hw-step h2 { font-size: 1.1rem; margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.hw-n {
  display: inline-grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  background: var(--iris); color: var(--on-accent);
  border-radius: 50%;
  font-size: .9rem;
}
.hw-hint { font-size: .88rem; color: var(--text-muted); margin: 0 0 .8rem; }
.hw-class { display: block; margin: 0 0 1rem; font-size: .95rem; }

.hw-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .92rem;
  cursor: pointer;
  background: var(--bg);
}
.hw-chip.is-on { border-color: var(--iris); background: var(--iris-soft); }
.hw-chip input { accent-color: var(--iris); }
.hw-chip em { font-size: .78rem; color: var(--text-muted); font-style: normal; }
.hw-code { font-size: .78rem; color: var(--text-muted); }

.hw-group { margin: 0 0 1rem; }
.hw-group h3 { font-size: .98rem; margin: 0 0 .4rem; }
.hw-all {
  font: inherit; font-size: .78rem;
  background: none; border: 0; padding: 0 .4rem;
  color: var(--iris); cursor: pointer; text-decoration: underline;
}

.hw-meter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  margin: 0 0 1.2rem;
}
.hw-band, .hw-load {
  display: block;
  text-align: start;
  padding: .6rem .7rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  cursor: pointer;
}
.hw-band.is-on, .hw-load.is-on { border-color: var(--iris); background: var(--iris-soft); }
.hw-band b, .hw-load b { display: block; font-size: .95rem; }
.hw-band span, .hw-load span { display: block; font-size: .8rem; color: var(--text-muted); }

.hw-exact { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .95rem; }
.hw-range { flex: 1 1 220px; direction: ltr; accent-color: var(--iris); }
.hw-num { width: 5rem; padding: .4rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.hw-pool { font-size: .84rem; color: var(--text-muted); }

.hw-out { border-color: var(--iris); }
.hw-sum { font-size: 1rem; margin: 0 0 .8rem; }
.hw-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.hw-key { font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; }
.hw-msg { font-size: .88rem; color: var(--aqua-text); flex-basis: 100%; }

.hw-list { display: flex; flex-direction: column; gap: .15rem; }
.hw-row-head { font-size: .9rem; color: var(--text-muted); margin: .8rem 0 .2rem; }
.hw-row { display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.hw-row-meta { font-size: .8rem; color: var(--text-muted); margin-inline-start: auto; }
.hw-preview-head { font-size: 1.05rem; margin: 0 0 .6rem; }

/* ── הדף עצמו: מה שמודפס, ומה שיוצא ל-Word ───────────────────────────
   נשמר בדף כתצוגה מקדימה אמיתית ולא מוסתר, משתי סיבות: המורה רואה מה
   הוא שולח, והשרטוטים חייבים רוחב אמיתי כדי להצטייר - סצנה בתוך
   `display:none` נמדדת כאפס, וגם ההמרה ל-PNG נכשלת עליה. */
.pr-host { margin: 0 0 2rem; }
.pr-sheet {
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2rem 2.2rem;
  max-width: 820px;
}
.pr-head { border-bottom: 2px solid #222; padding-bottom: .6rem; margin-bottom: 1.2rem; }
.pr-head h1 { font-size: 1.35rem; margin: 0 0 .2rem; }
.pr-head p { margin: 0; font-size: .9rem; color: #444; }
.pr-meta { margin-top: .3rem !important; }
.pr-unit { font-size: 1.05rem; margin: 1.6rem 0 .6rem; border-bottom: 1px solid #bbb; padding-bottom: .2rem; }
.pr-ex { margin: 0 0 1.4rem; break-inside: avoid; page-break-inside: avoid; }
.pr-ex h3 { font-size: 1rem; margin: 0 0 .3rem; }
.pr-n { color: var(--iris); }
.pr-statement { margin: 0 0 .4rem; }
.pr-given { margin: .2rem 1.2rem .5rem; font-size: .93rem; }
.pr-fig { max-width: 460px; margin: .4rem 0 .6rem; }
.pr-parts { margin: .3rem 1.2rem; }
.pr-parts > li { margin-bottom: .8rem; }
.pr-space { height: 3.2rem; border-bottom: 1px dotted #bbb; }
.pr-choices { list-style: none; margin: .3rem 0 0; padding: 0; }
.pr-choices li { padding: .15rem 0; }
.pr-choices li::before { content: "\25CB  "; color: #888; }
/* שאלות בלבד, ברירת המחדל של הדף: הסעיפים זה אחר זה כטקסט רץ, האפשרויות
   בשורה אחת, ומקום כתיבה אחד בסוף התרגיל. */
.pr-qpart { margin: 0 0 .3rem; break-inside: avoid; page-break-inside: avoid; }
/* תרגיל שלם אינו נשמר בעמוד אחד: תרגיל ארוך מעמוד נשבר בכל מקרה, וההימנעות
   דוחפת אותו לעמוד חדש ומשאירה חצי עמוד ריק. היחידה שנשמרת היא הסעיף עם
   השרטוט שלו, והכותרת והניסוח אינם נשארים לבד בתחתית עמוד. */
.pr-q { break-inside: auto; page-break-inside: auto; }
.pr-q h3, .pr-q .pr-statement { break-after: avoid; page-break-after: avoid; }
.pr-choices-row { display: flex; flex-wrap: wrap; gap: .1rem 1.6rem; margin: .15rem 0 .35rem; }
.pr-q .pr-space { margin-top: .4rem; }
.pr-key { margin-top: 2rem; border-top: 2px solid #222; padding-top: .8rem; break-before: page; page-break-before: always; }
.pr-key-note { font-size: .85rem; color: #555; }
.pr-key-list li { margin-bottom: .5rem; }
.pr-foot { margin-top: 1.6rem; font-size: .8rem; color: #666; }

/* בהדפסה נשאר הדף בלבד. כל השאר הוא ממשק הבנייה, ואין לו מה לחפש
   בנייר שהתלמיד מקבל. */
@media print {
  .site-header, .site-footer, .hw-step, .hw-class, .hw-preview-head,
  .eyebrow, #hw-title, #hw-lead, #hw-gate, .rp-fab { display: none !important; }
  .hw-wrap { max-width: none; padding: 0; }
  .pr-sheet { border: 0; padding: 0; max-width: none; }
  .pr-space { border-bottom-color: #999; }
  /* בנייר השרטוט קטן: 23 שרטוטי סעיף ברוחב 460 היו רוב הדף (חימום
     גאומטריה, 10 עמודים גם בשאלות בלבד). במסך נשאר 460. */
  .pr-fig { max-width: 300px; }
  .pr-fig.pr-part-fig { max-width: 220px; }
}

/* שורת החזרה מחיזוק עיקרון. ניוטי הבטיח שנחזור, וזאת הדרך חזרה. */
.ex-back {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--aqua-soft);
  border: 1px solid var(--aqua);
  font-size: .92rem;
  color: var(--text-heading);
}
.ex-back a { font-weight: 700; }

/* ── עמוד הפתירה: קומפקטי ונקי - 2026-09-08 ─────────────────────────
   הבעלים: "להפוך את הדף לקומפקטי ונקי ככל האפשר על מנת להציג את השאלה
   ואת הסעיפים בבירור ולא להסיח את התלמידים." מה שירד: שורת ההסבר
   שמעל הגיליון, רצועת הנתונים (ניוטי מחזיק אותם בכרטיס), הכיתוב מתחת
   לתרשים, והמילים על כפתורי הכלים. מה שהתכווץ: ראש העמוד לשורה אחת
   של פרטים, ריווח הסעיפים, ולשון הסעיף שאינה מודגשת יותר - רק האות. */

/* פירורי הלחם ירדו: כפתור "מעלה" כבר נותן את הדרך חזרה, והנושא
   מקושר בשורת הפרטים. */
.bq-head { margin: 18px 0 14px; align-items: flex-start; }
.bq-head h1 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 0; line-height: 1.35; }

.bq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 6px 0 0;
  font-size: .86rem;
  color: var(--text-muted);
}

.bq-meta .ex-tags { margin: 0; display: inline-flex; }
.bq-meta .ptag { padding: 2px 9px; font-size: .78rem; }

/* שורת המקור: השאלון, המועד ומספר השאלה, עם קישור לשאלון המקורי
   (iris - פעולה). קבועה מתחת לכותרת, לא רק בצ׳יפ של ניוטי בסוף. */
.bq-source { margin: 4px 0 0; font-size: .84rem; color: var(--text-muted); }
.bq-source a { color: var(--iris); font-weight: 600; }
.bq-source a:hover, .bq-source a:focus-visible { color: var(--accent-hover); }

.bq-headside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bq-headside .ex-progress { margin: 0; font-size: .78rem; }
.bq-headside .ex-progress .pbar { width: 90px; height: 5px; }

/* כלי הכתיבה: סמל בלבד, השם בריחוף. "ניוטי" נשאר עם מילה כי הוא
   הכפתור היחיד שפותח משהו במסך צר. */
body[data-page="solve"] .ex-tools { padding: 3px; gap: 2px; box-shadow: none; }
body[data-page="solve"] .ex-tools button { min-height: 32px; padding: 6px 8px; }
/* מוסתר לעין ונשאר בעץ הנגישות, כמו למעלה (‏WCAG 4.1.2) */
body[data-page="solve"] .ex-tools button:not(.tool-tutor) span {
  position: absolute; 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;
}
body[data-page="solve"] .ex-tools button svg { width: 17px; height: 17px; }

body[data-page="solve"] .ex-sheet { padding: 20px 24px 16px; }
body[data-page="solve"] .bq-statement p { line-height: 1.7; }
body[data-page="solve"] .bq-figure { margin: 12px 0; padding: 8px; }

/* ── השאלה במסגרת אחת (הבעלים, 2026-09-14) ─────────────────────────
   לשון השאלון כולה, מההתחלה ועד הסוף, במסגרת ברורה ופתוחה תמיד. בלי
   לשונית ובלי חזרה על הסעיפים מתחתיה - השאלה היא מרכז הדף. */
.bq-paper-frame {
  margin: 0 0 16px;
  border: 1.5px solid var(--frame-strong);
  border-radius: 12px;
  padding: 12px 16px 14px;
  background: var(--surface);
}
.bq-paper-head {
  margin: 0 0 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-strong);
}
.bq-paper-frame .bq-paper { padding: 0; border: 0; background: transparent; font-size: 1rem; }
.bq-paper-frame .bq-figure, .bq-paper-frame .bq-scene { margin: 12px 0; }
.bq-paper-frame .bq-statement { margin-bottom: 10px; }
.bq-paper-frame .part-paper { margin: 6px 0 4px; margin-inline-start: 1.4em; }
/* שורות נתון בגוף השאלה ולפני סעיף: שורה לכל נתון, בלי כותרת "נתון:"
   ובלי תגית - כמו בשאלון (הבעלים, דיווח ra24, 2026-09-21) */
.bq-line { display: block; }
.bq-statement .bq-given { margin-top: 6px; }
/* אפשרויות של סעיף בחירה, מתחת לסעיף שלהן */
.bq-paper-opts { margin: 4px 0 0; padding-inline-start: 2.6em; color: var(--text-muted); }
.bq-paper-part.is-sub + .bq-paper-opts { padding-inline-start: 4em; }
/* השרטוט במלוא רוחב המסגרת בעמוד התרגיל; בדף העבודה נשאר הגבול של .ws-scene */
.bq-paper-frame .ex-scene { max-width: none; margin: 12px 0; }
/* בדף העבודה הכרטיס כבר במסגרת, והמסגרת הפנימית עדינה יותר */
.ws-ex .bq-paper-frame { margin: 0 0 12px; padding: 10px 14px 12px; border-color: var(--border); }

/* ── הסימנייה: כפתור לכל סעיף, דביק מעל שורות הכתיבה ───────────────── */

/* ── שורת כתיבה: אות, תיבה וכפתורים בשורה אחת ─────────────────────── */
body[data-page="solve"] .part { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; padding: 12px 0 6px; }
body[data-page="solve"] .part-head { flex: none; gap: 8px; align-items: center; margin-top: 6px; }
body[data-page="solve"] .part-tag { width: auto; min-width: 26px; height: 26px; padding: 0 7px; font-size: .8rem; border-radius: 7px; }
body[data-page="solve"] .part-done { display: none; }

body[data-page="solve"] .answer { flex: 1 1 260px; min-width: 0; margin: 0; gap: 7px; padding: 0; }
body[data-page="solve"] .answer-note { flex: 0 0 100%; margin: 5px 0 0; padding-inline-start: 36px; font-size: .86rem; }
body[data-page="solve"] .part > .mathpad { order: 10; }
body[data-page="solve"] .part > .mathpad-echo { order: 11; }
body[data-page="solve"] .part > .mathpad-frac { order: 12; flex: 0 0 auto; margin-inline-start: 36px; }
body[data-page="solve"] .part > .bq-check { order: 20; flex: 0 0 100%; margin: 8px 0 0 0; }
body[data-page="solve"] .part > .bq-check > summary { padding: 7px 12px; font-size: .84rem; }
body[data-page="solve"] .answer-note:empty { display: none; }
body[data-page="solve"] .answer-field { min-height: 38px; border-radius: 9px; }
body[data-page="solve"] .answer-field input { padding: 7px 11px; width: 130px; font-size: .95rem; }
body[data-page="solve"] .answer-open { min-height: 3em; padding: 7px 11px; line-height: 1.55; }
body[data-page="solve"] .answer.is-open .answer-open { flex: 1 1 100%; }

body[data-page="solve"] .part.is-solved .answer,
body[data-page="solve"] .part.is-solved .answer-note { opacity: .75; }

@media (max-width: 720px) {
  .bq-headside { align-items: stretch; width: 100%; }
  body[data-page="solve"] .answer .btn.help { flex: 0 0 auto; }
}

/* ── D2: עמוד הפתירה וניוטי בטלפון (2026-10-01) ─────────────────────
   מבדיקות הטלפון של גל 2 (375-390): המסך הראשון לא הראה את השאלה,
   "בדיקת תשובה" צפה מעליה, "עזרה מניוטי" נשבר, ▲ ישב על החלונית, כותרת
   ניוטי תפסה ארבע שורות, תיבת הנימוק 165 מתוך 298, והודעת ◐ בשני גופנים.
   הבודק: verify_phone_solve_layout.py. */

/* ◐ בגופן אחד: ‏<b> בהערה במשקל 600 קיבל bolder = 900, ול-Segoe UI Black
   אין עברית - "המספר נכון" נפל לגופן אחר, קטן יותר. ובגודל של style.css
   ("גדול וברור"), ולא ב-.86rem של שורת ההערה. */
.answer-note b, .ws-note b { font-weight: 700; }
body[data-page="solve"] .answer-note.is-partial { font-size: 1rem; font-weight: 500; }

/* תיבת הנימוק: כל רוחב הסעיף וארבע שורות, מתחת להודעה שמפנה אליה */
body[data-page="solve"] .answer-why { flex: 0 0 100%; margin: 8px 0 4px; }
body[data-page="solve"] .answer-why textarea { min-height: 6.6em; font-size: 1rem; line-height: 1.55; resize: vertical; }

/* שני הקישורים של ניוטי אינם נפרדים (‏tutor.js, ‏.tutor-links) */
.tutor-links { white-space: nowrap; }

@media (max-width: 720px) {
  /* המסך הראשון מראה את השאלה: החץ והמונה בשורה אחת, ובלי כרטיס
     שעוטף את מסגרת השאלה - שתי מסגרות אכלו 25 פיקסלים מכל צד */
  body[data-page="solve"] .bq-head { margin: 10px 0 8px; }
  body[data-page="solve"] .bq-headside { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  body[data-page="solve"] .bq-headside .pager-top { margin: 0; }
  body[data-page="solve"] .ex-layout { gap: 10px; }
  body[data-page="solve"] .ex-sheet { padding: 0; border: 0; background: none; box-shadow: none; }
  body[data-page="solve"] .bq-paper-frame { padding: 10px 12px 12px; }

  /* שורת הפעולה רק משורות הכתיבה והלאה (‏is-away, ‏solve.js) */
  body[data-page="solve"] .ex-actbar { transition: opacity .15s, visibility .15s; }
  body[data-page="solve"] .ex-actbar.is-away { visibility: hidden; opacity: 0; pointer-events: none; }
  body:has(.ex-actbar.is-away) .tp-fab { bottom: calc(var(--tabbar-h) + 12px); }

  /* ▲ אינו יושב על ניוטי: כשהשיחה פתוחה החלונית היא הדף */
  body.tutor-open .tp-fab { visibility: hidden; }

  /* כותרת ניוטי בשתי שורות: השם והמשפט, ואז שני הקישורים */
  .tutor-head { gap: 8px; padding: 7px 12px; }
  .tutor-head .tutor-avatar { width: 24px; height: 24px; }
  .tutor-head > div { min-width: 0; line-height: 1.4; }
  .tutor-head b { display: inline; font-size: .9rem; }
  .tutor-sub { display: inline; margin-inline-start: 6px; font-size: .74rem; }
  .tutor-links { display: block; font-size: .72rem; }
  .tutor-links .tutor-story { margin-top: 0; font-size: inherit; }
  .tutor-close { padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="solve"] .ex-actbar { transition: none; }
}

/* ── סעיף שנפתר מתקפל לשורה אחת עם וי (הבעלים, 2026-09-08) ─────────
   שאלה בת תשעה סעיפים נשארת במסך אחד. הסעיף הפעיל תמיד פתוח, גם אם
   כבר נפתר, ולחיצה על שורה מקופלת פותחת אותה מחדש. הנתון שלפני
   הסעיף (`.bq-lead`) נשאר גלוי, כי סעיפים אחריו נשענים עליו. */
body[data-page="solve"] .part.is-solved:not(.is-active) { padding: 7px 0; opacity: 1; }
body[data-page="solve"] .part.is-solved:not(.is-active) > :not(.part-head) { display: none; }
body[data-page="solve"] .part.is-solved:not(.is-active) .part-head { cursor: pointer; margin: 0; flex: 1; min-width: 0; }
body[data-page="solve"] .part.is-solved:not(.is-active) .part-head:hover .part-done { color: var(--text-heading); }
body[data-page="solve"] .part.is-solved:not(.is-active) .part-done {
  display: block; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-muted); font-size: .92rem; line-height: 1.5;
}
body[data-page="solve"] .part.is-solved:not(.is-active) .part-done::before {
  content: "✓  "; color: var(--success); font-weight: 700;
}

/* ── סעיף פתוח: ◐ עד אישור, וסימן לחשיפה (הבעלים, 2026-10-02, ‏K1) ─────
   אחרי "סיימתי" הפתרון הרשמי ליד מה שנכתב, והשאלה "יצא לכם אותו דבר?".
   המסגרת בלילך (הקשר) ולא בירוק: הסעיף עוד לא נפתר. סעיף שנחשף לפני
   שנפתר מסומן "נחשף" בלילך, ולא ✓ ירוק. הבודק: verify_open_confirm.py. */
body[data-page] .bq-compare {
  flex: 0 0 100%; min-width: 0; margin: 8px 0 4px; padding: 10px 14px 12px;
  border: 1px solid var(--lilac); border-inline-start: 4px solid var(--lilac-deep);
  border-radius: 10px; background: var(--surface);
}
body[data-page] .bq-compare-head { margin-bottom: 4px; font-size: .8rem; font-weight: 700; color: var(--lilac-deep); }
body[data-page] .bq-compare-key { font-size: .95rem; line-height: 1.6; color: var(--text); overflow-x: auto; overflow-wrap: anywhere; }
body[data-page] .bq-compare-link { margin: 0; font-size: .92rem; }
body[data-page] .bq-compare-ask { margin: 10px 0 6px; font-weight: 600; color: var(--text-heading); }
body[data-page] .bq-compare-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page] .bq-compare-acts .btn { min-width: 76px; }
/* בזמן ההשוואה הפתרון כבר גלוי, וכרטיס הגירוד שמתחתיו הוא עותק שני שלו */
body[data-page] .bq-compare ~ .bq-scratch { display: none; }

body[data-page] .part.is-solved.is-revealed .part-tag { background: var(--lilac); color: var(--lilac-deep); }
body[data-page] .part.is-solved.is-revealed:not(.is-active) .part-done::before {
  content: "נחשף  "; color: var(--lilac-deep);
}
body[data-page] .part.is-solved.is-revealed:not(.is-active) .part-state { color: var(--lilac-deep); }
body[data-page] .part.is-solved.is-revealed:not(.is-active) .part-state::after { content: "נחשף"; }

/* הסיכום בתוך בועת ניוטי, אחרי הסעיף האחרון. */
.tmsg .bq-sum-head { margin: 8px 0 4px; font-size: .8rem; font-weight: 700; color: var(--aqua-deep); }
.tmsg .bq-sum-item { margin: 0 0 7px; font-size: .9rem; line-height: 1.55; }
.tmsg .bq-sum-item b { display: block; margin-bottom: 1px; color: var(--text-heading); }
.tmsg .bq-sum-foot { margin-top: 8px; font-size: .84rem; color: var(--text-muted); }

/* ── פיתוח בלחיצות (Steps) ──────────────────────────────────────────────
   שני שלבים בטור: בחירת הרעיון, ואחריה בנק הצעדים. השלב השני אטום
   עד שהראשון נענה נכון - הסדר הוא מה שאוכף את זה, לא כיתוב. */
.answer-steps { flex: 1 0 100%; }

.st { display: flex; flex-direction: column; gap: 12px; }

.st-stage {
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  background: var(--bg);
}

.st-stage.is-done { border-color: var(--success); background: var(--success-soft); }

/* ‏השלב הנעול מודיע על עצמו ואינו מראה את תוכנו: הצעדים שבבנק הם
   התשובה לשלב הרעיון, ובנק מעומעם עדיין נקרא. */
.st-stage.is-locked { pointer-events: none; background: var(--paper, var(--bg)); }
.st-stage.is-locked > * { display: none; }
.st-stage.is-locked > .st-wait { display: block; }

.st-wait {
  display: none;
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted);
}

.st-ask {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-heading);
  font-weight: 600;
}

.st-opts { display: flex; flex-direction: column; gap: 8px; }

.st-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.5;
}

.st-opt:hover { border-color: var(--iris); }
.st-opt input { margin: 2px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.st-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* הפיתוח שנבנה: שורות ממוספרות, והמספר הוא המקום בפיתוח ולא קישוט */
.st-built { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.st-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.55;
}

.st-row:hover { border-color: var(--iris); }
.st-row.is-ok { border-color: var(--success); background: var(--success-soft); }
.st-row.is-no { border-color: var(--no); background: var(--no-soft); }

.st-n {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--lilac);
  color: var(--lilac-deep);
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.st-row.is-ok .st-n { background: var(--success); color: var(--on-accent); }
.st-row.is-no .st-n { background: var(--no); color: var(--on-accent); }

.st-empty {
  padding: 9px 12px;
  font-size: .88rem;
  color: var(--text-muted);
  border: 1px dashed var(--ctl-border);
  border-radius: 10px;
}

.st-bank { display: flex; flex-wrap: wrap; gap: 7px; }

.st-chip {
  padding: 8px 12px;
  background: var(--aqua-soft, var(--lilac));
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
  text-align: start;
  color: var(--text-heading);
  cursor: pointer;
}

.st-chip:hover { border-color: var(--iris); background: var(--accent-soft); }

.st-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.st-note { margin: 0; font-size: .88rem; line-height: 1.5; }
.st-note.is-ok { color: var(--success); font-weight: 600; }
.st-note.is-no { color: var(--no); }
.st-note.is-warn { color: var(--text-muted); }

.st-model { margin: 0; padding-inline-start: 20px; font-size: .9rem; line-height: 1.6; }
.st-model li { margin-bottom: 4px; }

/* ── מסך התרגיל לפי הלוח (גרסה 2, הבעלים אישר את הקנבס 2026-09-24) ─────────
   הלוח: docs/redesign/canvas-v2/project/Exercise-*.dc.html; ההנחיות:
   docs/redesign/guidelines.md, "רכיבים" ו"שכבת השרטוט". שלושה דברים,
   בשני המצבים (נייר ודיו) דרך טוקנים בלבד:
   1. סעיף פעיל אחד ככרטיס: ריבוע ושאלה, תיבת התשובה (Rubik 500 20, ltr),
      ובתוכו "בדיקת תשובה" ראשי ו"עזרה מניוטי" משני. שאר הסעיפים שורות
      48px עם ריבוע לא פעיל; לחיצה על שורה פותחת אותה (practice.js,
      solve.js). לשון הסעיפים כולה נשארת חשופה במסגרת השאלה שמעליהם,
      ולכן הכלל "התרגיל חשוף במלואו, בלי לחיצה" עומד.
   2. במחשב העמודה הצרה (360px): תפריט הסימון (36px), האיור והנוסחאון
      מתחתיו. ‏Answer.figureColumn מעביר את האיור לעמודה ומחזיר אותו
      למסגרת השאלה בטלפון. השיחה עם ניוטי אינה יושבת בעמודה: היא עוגנת
      בתוך הסעיף (‏tutor.js), וניוטי השקט נשאר בתחתית העמודה.
   3. בטלפון הנוסחאון הוא גיליון תחתון מעל שורת הפעולה הקבועה, שבה
      "בדיקת תשובה" ו"עזרה מניוטי" פועלים על הסעיף הפעיל.
   האיור: רשת דקה (3 קווים אופקיים, 3 אנכיים) ב---grid-line בשני המצבים.
   הבודק: verify_exercise_layout.py. */

/* הסעיף הפעיל: כרטיס גדול אחד */
.part.is-active {
  background: var(--surface);
  border: 1.5px solid var(--frame-strong);
  border-radius: var(--radius);
  padding: 20px 24px 18px;
  margin: 14px 0 0;
}
.part.is-active .part-head { gap: 12px; align-items: center; }
.part.is-active .part-tag { width: 36px; height: 36px; font-size: 1rem; margin: 0; border-radius: 8px; }
.part.is-active .part-prompt {
  font-family: "Rubik", "Assistant", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
}
.part.is-active .answer { padding-inline-start: 0; gap: 12px; margin-top: 16px; }
.part.is-active .answer-field {
  flex: 1 1 280px;
  max-width: 420px;
  min-height: 48px;
  border: 1.5px solid var(--iris-pale);
  border-radius: 10px;
  background: var(--bg);
}
.part.is-active .answer-field input {
  font-family: "Rubik", "Assistant", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  padding: 8px 14px;
  flex: 1;
  width: auto;
  min-width: 0;
}
.part.is-active .answer .btn { min-height: 48px; padding: 0 20px; border-radius: 10px; font-weight: 700; }
.part.is-active .answer .btn.primary { padding-inline: 28px; }
.part.is-active .answer .btn.help {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding-inline: 20px;
}
.part.is-active .answer .btn.help:hover { background: var(--accent-soft); color: var(--iris-deep); }
.part.is-active .answer-note { padding-inline-start: 0; }

/* שאר הסעיפים: שורות מקופלות. הריבוע לא פעיל, השאלה בשורה אחת,
   ובקצה מה מצבו: "אחרי סעיף א" או "נפתר". הטופס, ההערה וכרטיס הגירוד
   מוסתרים עד שהשורה נפתחת; הריבוע של סעיף שנפתר נשאר ירוק. */
.part:not(.is-active) { padding: 0; border-top: 0; border-bottom: 1px solid var(--border); }
.part:not(.is-active) > :not(.part-head) { display: none; }
.part:not(.is-active) .part-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}
.part:not(.is-active) .part-head:hover .part-prompt { color: var(--text-heading); }
.part:not(.is-active) .part-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.part:not(.is-active):not(.is-solved) .part-tag { background: var(--lilac); color: var(--lilac-deep); }
.part:not(.is-active) .part-tag { width: 28px; height: 28px; margin: 0; font-size: .85rem; }
/* P20 (T35): "ג(1)" רחב מריבוע. הרוחב הקבוע כאן ובסעיף הפעיל גבר על width:auto של
   solve, והסוגר ברח מהגלולה. רוחב מינימלי במקום קבוע: אות אחת נשארת ריבוע באותו
   גודל, ותג ארוך מתרחב - גם עמודת הרשת של השורה המקופלת. verify_phone_overlap. */
.part:not(.is-active) .part-head { grid-template-columns: minmax(28px, max-content) minmax(0, 1fr) auto; }
.part:not(.is-active) .part-tag { width: auto; min-width: 28px; padding-inline: 5px; }
.part.is-active .part-tag { width: auto; min-width: 36px; padding-inline: 5px; }
.part:not(.is-active) .part-prompt {
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.part-state { display: none; }
.part:not(.is-active) .part-state {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.part:not(.is-active):not(.is-solved) .part-state::after { content: attr(data-after); }
.part.is-solved:not(.is-active) .part-state { color: var(--success); }
.part.is-solved:not(.is-active) .part-state::after { content: "נפתר ✓"; }
/* ‏**חימום מקופל הוא שורה כמו כל השאר** (חדר בקרה 66). פתוח, סעיף חימום הוא
   כרטיס משלו (‏.is-warm, כרטיס ay5p של הבעלים); מקופל, המסגרת, הרדיוס, הרקע
   והרווח של 22 שלו עשו מכל שורה קופסה, ו"אחרי סעיף א" נגע במסגרת. */
.part.is-warm:not(.is-active),
.part.is-warm + .part.is-warm:not(.is-active) {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  margin-top: 0;
  padding: 0;
}
.part.is-warm + .part.is-warm.is-active { border-top: 1.5px solid var(--frame-strong); }

/* העמודה הצרה: תפריט הסימון, האיור, הנוסחאון, ובתחתית ניוטי השקט */
.ex-aside { display: flex; flex-direction: column; gap: 16px; }
.ex-aside .ex-tools {
  min-height: 36px;
  padding: 0 4px;
  background: var(--iris-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}
.ex-aside .ex-tools button {
  min-height: 28px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  color: var(--iris-deep);
  font-size: .82rem;
  font-weight: 600;
}
.ex-aside .ex-tools button.is-on { background: var(--accent); color: var(--on-accent); }
.ex-aside .ex-tools button span {
  position: absolute; 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;
}
.ex-aside .ex-tools-sep { margin: 6px 2px; background: var(--ctl-border); }
.ex-aside .tutor { order: 20; }
/* ניוטי בצד ימין של העמודה, והבועה משמאלו (הבעלים, 2026-09-26): ההצגה שלו
   פעם אחת, ובמנוחה משפט מתחלף. newty.js בונה את .newty-spot */
.ex-aside .newty-spot { order: 30; display: flex; align-items: center; gap: 14px; }
.newty-say {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  color: var(--text-heading);
  font-size: .88rem;
  line-height: 1.6;
  animation: newty-say-in .3s ease-out;
}
/* הזנב, אל ניוטי שמימין */
.newty-say::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: inherit;
  border: 1px solid var(--border);
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}
.newty-say[data-report] { cursor: pointer; }
@keyframes newty-say-in { from { opacity: 0; transform: translateY(4px); } }
/* בטלפון ניוטי בפינה השמאלית של הכותרת. ההצגה בזרימת העמוד, מעל השאלה:
   בועה צפה מתחתיו כיסתה את לשוניות הסעיפים, את תפריט "עוד" ואת הדרך חזרה
   (verify_nav_reach). בועת המנוחה צפה מתחתיו, ו-newty.js מוריד אותה בכל
   נגיעה אחרת בעמוד. */
@media (max-width: 620px) {
  .ex-aside .newty-spot { display: contents; }
  .newty-say.is-intro::before { display: none; }
  .newty-say.is-rest {
    position: fixed;
    top: 62px;
    inset-inline-end: 10px;
    z-index: 31;
    max-width: min(300px, calc(100vw - 32px));
  }
  .newty-say.is-rest::before { top: -7px; right: auto; left: 22px; margin-top: 0; border-width: 1px 0 0 1px; }
}
.ex-fig[hidden] { display: none; }
.ex-fig .ex-scene, .ex-fig .bq-scene { margin: 0; }
.ex-fig .scene { padding: 10px 12px 8px; }

/* רשת השרטוט: שלושה קווים אופקיים ושלושה אנכיים, דקים, מאחורי הצירים */
.ex-scene .scene, .bq-scene .scene, .part-scene .scene, #pf-scene.scene {
  background-image:
    linear-gradient(to bottom, transparent calc(25% - .5px), var(--grid-line) calc(25% - .5px), var(--grid-line) calc(25% + .5px), transparent calc(25% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--grid-line) calc(50% - .5px), var(--grid-line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(75% - .5px), var(--grid-line) calc(75% - .5px), var(--grid-line) calc(75% + .5px), transparent calc(75% + .5px)),
    linear-gradient(to left, transparent calc(25% - .5px), var(--grid-line) calc(25% - .5px), var(--grid-line) calc(25% + .5px), transparent calc(25% + .5px)),
    linear-gradient(to left, transparent calc(50% - .5px), var(--grid-line) calc(50% - .5px), var(--grid-line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to left, transparent calc(75% - .5px), var(--grid-line) calc(75% - .5px), var(--grid-line) calc(75% + .5px), transparent calc(75% + .5px));
  background-clip: padding-box;
}

/* הנוסחאון: משטח ידע, מסגרת ידע, טקסט ידע (הזוג נמדד ב-verify_theme) */
.ex-formulas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: var(--aqua-soft);
  border: 1px solid var(--aqua);
  border-radius: var(--radius);
}
.ex-formulas[hidden] { display: none; }
.ex-fx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-fx-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--aqua-text); }
.ex-fx-close { display: none; }
.ex-fx-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ex-fx-list > div { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--aqua-line); padding-top: 8px; }
.ex-fx-list dt { font-size: .86rem; font-weight: 600; color: var(--aqua-text); }
.ex-fx-list dd {
  margin: 0;
  font-family: "Rubik", "Assistant", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text-heading);
}
.ex-fx-note { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--aqua-text); }
.ex-fx-note a { color: inherit; font-weight: 700; }

/* שורת הפעולה הקבועה: בטלפון בלבד */
.ex-actbar { display: none; }

@media (max-width: 720px) {
  .ex-layout { grid-template-columns: minmax(0, 1fr); }
  .ex-aside { order: -1; position: static; gap: 10px; }
  .ex-aside .ex-tools { width: auto; align-self: flex-start; }
  .ex-fig { display: none; }
  main.wrap[id="ex-main"], main.wrap[id="solve-main"] { padding-bottom: 96px; }
  .part.is-active { padding: 16px 14px 14px; }
  .part.is-active .part-prompt { font-size: 1.15rem; }
  .part.is-active .answer .btn.primary,
  .part.is-active .answer .btn.help { display: none; }
  .part.is-active .answer-field { max-width: none; }
  .ex-actbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 41;
    display: flex;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
  }
  /* ‏nowrap ורוחב לפי התווית (‏D2): ב-375 "עזרה מניוטי" נשבר לשתי שורות,
     השורה גבהה ל-91 ו-▲ (‏bottom: 80px) ישב עליה */
  .ex-actbar .btn { flex: 1 1 auto; min-height: 46px; justify-content: center; padding-inline: 10px; white-space: nowrap; }
  .ex-actbar .btn.primary { flex-grow: 1.6; font-weight: 700; }
  .ex-actbar .btn[hidden] { display: none; }
  .ex-actbar .btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .ex-formulas {
    position: fixed;
    inset-inline: 0;
    bottom: 71px;
    z-index: 40;
    display: none;
    max-height: 60vh;
    overflow: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    box-shadow: var(--shadow-lift);
    padding-top: 8px;
  }
  .ex-formulas.is-open { display: flex; }
  .ex-formulas::before {
    content: "";
    display: block;
    flex: none;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--aqua-deep);
    margin: 0 auto 4px;
  }
  .ex-fx-close {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--aqua-text);
    background: transparent;
    color: var(--aqua-text);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
  }
}
/* מסך של 320-360: שלוש התוויות עדיין בשורה אחת (‏D2) */
@media (max-width: 360px) {
  .ex-actbar .btn { padding-inline: 6px; font-size: .86rem; }
}

@media print {
  .ex-layout { grid-template-columns: minmax(0, 1fr); }
  .ex-aside { display: block !important; }
  .ex-aside .ex-tools, .ex-aside .tutor, .newty, .newty-say, .ex-formulas, .ex-actbar { display: none !important; }
  .part:not(.is-active) > :not(.part-head) { display: block; }
  .part.is-active { border-color: var(--border); }
  /* ‏**דף שעובדים ממנו** (חדר בקרה 66). בלי כפתורים, מקלדת סימנים, "אחרי
     סעיף א", ניווט סעיפים, התקדמות והסבר הסימון - אין להם מה לעשות בנייר.
     בלי כרטיס הגירוד ו"הצג פתרון": תשובה אינה מודפסת ליד השאלה. בלי שכבת
     העט: היא נמדדה ברוחב המסך, והטקסט בנייר נשבר אחרת. שאלת כל סעיף
     נשברת לשורות ולא נחתכת בשלוש נקודות, ותיבת התשובה ריקה. האיור עולה
     לפני מסגרת השאלה בכל רוחב נייר (בנייר צר זה כבר קרה, ברחב הוא ירד
     לסוף), וקטן מספיק כדי לא לתפוס עמוד. הבודק: verify_exercise_layout.py. */
  .part .btn, .mathpad, .mathpad-toggle, .part-state, .answer-note, .scratch,
  .bq-check, .bq-compare, .part-nav, .ex-progress, .ex-hint, .ink-canvas { display: none !important; }
  .part:not(.is-active) .part-prompt { white-space: normal; overflow: visible; color: inherit; }
  .answer-field input::placeholder, .answer textarea::placeholder { color: transparent; }
  .ex-aside { order: -1; position: static; }
  .ex-aside #ex-fig { max-width: 13cm; margin: 0 auto 12px; break-inside: avoid; }
  .part { break-inside: avoid; }
  /* סבב 2: שרטוט סעיף ברוחב מלא תפס חצי עמוד (חימום אלגברה: 5 שרטוטים, 5 עמודים).
     שרשרת "דוגמה" מודפסת בפריים האחרון - scenes.js, PRINT_FINAL. */
  .part-scene { max-width: 11cm; margin: 6px auto 10px; break-inside: avoid; }
  /* proof.html: בנייר צר הבנק אינו גיליון צף (למטה, "proof.html לפי הלוח") */
  body .proof-page .pf-side { position: static; box-shadow: none; max-height: none; }
  body .proof-page .pf-side::before { display: none; }
  body main.proof-page { padding-bottom: 0; }
}

/* חדר בקרה 65, בדיקה בטלפון (390): שתי חפיפות שנוצרו כששלב א ושלב ב פגשו את ניוטי בכותרת.
   (1) ניוטי השקט יושב בפינה שמול המותג (46px, inset-inline-end 14px), ומתג מצב הלילה נדחף
       לאותה פינה (margin-inline-start: auto) - ניוטי כיסה את המתג. המתג זז פנימה, ליד ניוטי.
   (2) כפתור "עזרו לנו" (.rp-fab, צף בפינה התחתונה) כיסה את "נוסחאון" בשורת הפעולה הקבועה.
       כששורת הפעולה בעמוד, הכפתור עולה מעליה. הבודק: verify_exercise_layout.py. */
@media (max-width: 620px) {
  /* מ-2026-09-25 בקצה השורה יושב "עוד" ולא המתג, ולכן זזה כל קבוצת הכלים */
  body:has(.newty) .hdr-tools { margin-inline-end: 58px; }
}
@media (max-width: 720px) {
  body:has(.ex-actbar) .rp-fab { bottom: 80px; }
  /* חדר בקרה 66, סבב 2: גם "לראש הדף" (‏.tp-fab, top.js) ישב על "בדיקת תשובה". אותו תיקון, בפינה שמנגד. */
  body:has(.ex-actbar) .tp-fab { bottom: 80px; }
  /* P20 (T47): גם כרטיס "השאלה הושלמה!" (celebrate.js) ישב על שורת הפעולה. אותו תיקון. */
  body:has(.ex-actbar) .cele-card { bottom: 80px; }
}

/* ── proof.html לפי הלוח (חדר בקרה 66, סבב 2) ─────────────────────────
   כמו מסך התרגיל: במחשב רשת 1fr 360px - בעמודה הרחבה מסגרת השאלה, רמת
   האתגר והטבלה, ובצרה השרטוט ובנק הצעדים; בטלפון השרטוט למעלה והבנק
   גיליון תחתון. מסגרת השאלה והטבלה הן כרטיס הסעיף הפעיל (.part.is-active),
   באותם טוקנים בנייר ובדיו. **הטבלה, הלחיצות והבנק לא משתנים:** proof.js
   מצייר אותו DOM, ורק display: contents על העטיפות (.pf-work, .pf, .pf-grid)
   מעביר את ילדיהן לרשת של העמוד. הבודק: verify_exercise_layout.py. */
.proof-page .pf-q .pf-facts,
.proof-page .pf-solve {
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--frame-strong);
  border-radius: var(--radius);
  padding: 20px 24px 18px;
}
.proof-page .pf-ask { font-size: 1.05rem; }
@media (min-width: 721px) {
  .proof-page .pf-page-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "q fig" "bar side" "lead side" "solve side";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 22px;
    row-gap: 12px;
  }
  .proof-page .pf-work,
  .proof-page .pf-work > .pf,
  .proof-page .pf-work .pf-grid { display: contents; }
  .proof-page .pf-q { grid-area: q; }
  .proof-page .pf-fig-pane { grid-area: fig; position: static; }
  .proof-page .pf-bar { grid-area: bar; margin: 0; }
  .proof-page .pf-lead { grid-area: lead; margin: 0; }
  .proof-page .pf-solve { grid-area: solve; align-self: start; }
  .proof-page .pf-side { grid-area: side; align-self: start; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .proof-page .pf-page-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 14px; }
}
@media (max-width: 720px) {
  .proof-page { padding-bottom: calc(42vh + 24px); }
  .proof-page .pf-fig-pane { order: -1; }
  .proof-page .pf-q .pf-facts, .proof-page .pf-solve { padding: 16px 14px 14px; }
  .proof-page .pf-side {
    position: fixed;
    inset-inline: 0;
    top: auto;
    bottom: 0;
    z-index: 40;
    max-height: 42vh;
    overflow: auto;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    padding-top: 8px;
  }
  .proof-page .pf-side::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--aqua-deep);
    margin: 0 auto 6px;
  }
  .proof-page .pf-cards { max-height: none; overflow: visible; }
  /* "עזרו לנו" ו"לראש הדף" עולים מעל הגיליון, כמו מעל שורת הפעולה במסך התרגיל */
  body:has(.proof-page) .rp-fab, body:has(.proof-page) .tp-fab { bottom: calc(42vh + 12px); }
}

/* ── רצועת הנושאים האחים (ניווט 4, guidelines.md פרק 4) ─────────────────
   גלולות לילך, כי הן הקשר ולא פעולה; הנושא הנוכחי מלא. בטלפון ובאייפד
   לאורך שורה אחת שנגללת הצידה, ו-scroll-padding משאיר את הגלולה שבקצה
   מחוץ לשוליים. מ-840 הגלולות נשברות לשורות, כי בעכבר אין גלילה הצידה. */
.topic-sibs { margin: 0 0 18px; }
.sibs-list {
  display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
}
.sibs-list::-webkit-scrollbar { display: none; }
.sibs-list li { flex: 0 0 auto; margin: 0; }
.sib {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: var(--lilac); color: var(--lilac-deep);
  font-size: .95rem; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.sib:hover { border-color: var(--lilac-deep); color: var(--lilac-deep); }
.sib:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.sib[aria-current="page"] { background: var(--lilac-deep); color: var(--surface); font-weight: 800; }
.sib.is-soon { opacity: .72; }
.sib em { font-style: normal; font-size: .72rem; }
/* בעמוד נושא הלשוניות ריקות ואינן תופסות מקום */
#topic-tabs:empty { display: none; }
@media (min-width: 840px) {
  .sibs-list { flex-wrap: wrap; overflow: visible; }
}

/* ‏.topic-go נשאר כמיכל; הכפתור "להמשיך" ומתג המקטעים ירדו בעיצוב של Astra (27.9). */
/* ‏minmax(0, 1fr): שם תרגיל ארוך נחתך בשלוש נקודות ואינו מרחיב את העמוד */
.topic-go { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; margin: 0 0 18px; }
.seg {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; color: var(--text-heading); font-weight: 600; white-space: nowrap; text-decoration: none;
}
.seg:hover { background: var(--iris-soft); color: var(--iris-deep); }
.seg:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
/* המקטע מקבל פוקוס בקפיצה (לקורא מסך), בלי מסגרת סביב כל המדור */
#practice-host [tabindex="-1"]:focus { outline: none; }
@media (max-width: 599px) {
  .topic-go { justify-items: stretch; }
  .seg { padding: 0 10px; }
}

/* נושא ממוקד: ניווט מקומי ומסלול, ללא סרגלים חוזרים. */
.is-topic body[data-page="practice"] .subject-bar,
.is-topic body[data-page="practice"] .grade-bar,
.is-topic body[data-page="practice"] .topic-go,
.is-topic body[data-page="practice"] .resume { display: none; }
.is-topic .page-title { margin-block: 20px 16px; }
.is-topic .sibs-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block: 4px 10px; }
.is-topic .sib { white-space: nowrap; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.is-topic .sib[aria-current="page"] { background: var(--iris-soft); border-color: var(--iris); color: var(--iris-deep); }
.is-topic .topic-sibs { margin-bottom: 10px; }
.is-topic #practice-host > .route-line {
  position: sticky; top: var(--header-h, 66px); z-index: 12;
  margin: 0 0 22px; padding: 14px 18px;
  border: 1px solid var(--border); border-inline-start: 4px solid var(--iris);
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lift);
}
.is-topic .route-chip { min-height: 44px; padding: 8px 20px; }
.is-topic .route-chip:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
.is-topic .hub-sub-block,
.is-topic #bagrut-final { scroll-margin-top: calc(var(--header-h, 66px) + 150px); }
.is-topic .track-hero { margin-top: 0; }
@media (max-width: 600px) {
  .is-topic body[data-page="practice"] .wing { display: none; }
  .is-topic .page-title { margin-top: 14px; }
  .is-topic .page-title h1 { font-size: 1.8rem; }
  .is-topic #practice-host > .route-line { gap: 8px; padding: 10px 12px; margin-bottom: 18px; }
  .is-topic .route-avatar { display: none; }
  .is-topic .route-say { flex-basis: 100%; font-size: .88rem; }
  .is-topic .route-chips { display: flex; width: 100%; }
  .is-topic .route-chip { flex: 1 1 auto; padding-inline: 8px; }
}