/* design/bridge.css - החיבור של חבילת העיצוב למעטפת האתר (חדר בקרה 135).

   קובצי החבילה (practice-page.css, class-page.css) מועתקים כמו שהם ואינם
   נערכים, כדי שהחלפת חבילה תהיה החלפת קבצים. כל התאמה לאתר יושבת כאן,
   והקובץ נטען אחריהם. הסבר מלא: docs/qa/design-v1-135.md. */

/* 1. גלילה ועוגנים. הכותרת הדביקה היא של האתר: אותו scroll-padding כמו
   ב-style.css, ובלי scroll-margin נוסף על היעד (החבילה כתבה 105 לכותרת
   של 78 משלה). ‏practice.html משרת גם את עמוד הנושא, ושם בלי גלילה רכה. */
html:root { scroll-padding-top: calc(var(--header-h) + 12px); }
html:root:not(.is-course) { scroll-behavior: auto; }
.pm-page .pm-chapter, .pm-page .pm-exam-tools, .pm-page .pc-exam,
.pm-page .pc-syllabus, .pm-page .pc-mocks, .pm-page .pc-course { scroll-margin-top: 0; }
.pm-page .pm-sidebar-sticky { top: calc(var(--header-h) + 24px); }

/* 2. הפלטה. ביום ערכי החבילה זהים לטוקנים של האתר, והמיפוי קושר אותם:
   --pm-accent הוא --iris, --pm-bg הוא --bg (הנייר). בלילה בלוק הלילה של
   החבילה קובע (data-theme="dark" על .pm-page, מ-design/bridge.js).
   verify_design_v1.py נופל אם ערך יום בחבילה כבר אינו זהה לטוקן שלו -
   אז מוחקים כאן את השורה, והחבילה קובעת. */
:root:not([data-theme="ink"]) .pm-page {
  --pm-bg: var(--bg);
  --pm-surface: var(--surface);
  --pm-accent: var(--iris);
  --pm-hover: var(--iris-deep);
  --pm-on-accent: var(--on-accent);
  --pm-line: var(--border);
  --pm-strong-line: var(--border-strong);
  --pm-soft: var(--iris-soft);
}

/* 3. אזור העיצוב בתוך main של האתר: בלי שוליים משלו */
.pm-page.pm-embed { margin: 0; background: transparent; }

/* 4. עמוד הקורס: העיצוב בא במקום פירורי הלחם, הרצועה, הכותרת והסרגלים של
   practice.html. רק כשהעיצוב באמת צויר (:has), כדי שתקלה ב-JS לא תשאיר עמוד ריק. */
#site-main:has(> #practice-host > .pm-page) > :is(.crumbs, .wing, .page-title, #subject-bar,
  #practice-progress, #topic-tabs, #topic-sibs, #topic-go) { display: none !important; }

/* 5. מה שהחבילה לא מכסה */
/* נושא בלי סמל בחבילה: המספר בריבוע (הריבוע הממוספר של האתר) */
.pm-page .pm-topic-num { font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ההתקדמות של התלמיד (לא ספירה של תוכן): בתוך הטקסט, כי החבילה מסתירה את קצה השורה מתחת ל-1100 */
.pm-page .pm-topic-progress { display: block; width: fit-content; margin-top: 6px; font-size: .75rem; font-weight: 600; color: var(--pm-accent); }
/* "בקרוב" (נושא בלי תוכן) ו"בכתיבה" (פריט בפריסה בלי נושא) */
.pm-page .pm-topic-soon { display: block; margin-top: 4px; font-size: .75rem; color: var(--pm-muted); }
.pm-page .pm-topic.is-soon { background: var(--pm-softest); box-shadow: none; }
.pm-page .pm-topic.is-soon .pm-topic-toggle { min-height: 72px; }
.pm-page .pm-topic.is-pending .pm-topic-toggle { cursor: default; }
.pm-page .pm-subtopic-link.is-pending { color: var(--pm-muted); }
/* נושא שאינו במנוי: נצבע ולא מוסתר (paid-content-shade-not-tabs) */
.pm-page .pm-topic.is-locked { background: var(--pm-softest); }
.pm-page .pm-topic.is-locked .pm-topic-mark { opacity: .55; }
.pm-page .pm-topic.is-locked .lock-chip { font-size: .75rem; font-weight: 500; vertical-align: middle; }

/* 6. עמוד הכיתה (v3): העיצוב בא במקום הרצועה, הכותרת והפתיח של class.html */
#site-main:has(.pm-page[data-design="class-v3"]) > :is(.wing, #class-title, .lead) { display: none !important; }
#class-content > .pm-page + .pm-page { margin-top: 28px; }
/* מה שהאתר מוסיף בין המבחן לחומרי הקורס (שיעורי בית, מיקוד, וואטסאפ): ברווח של החבילה */
.pm-page[data-design="class-v3"] > :not(.pc-exam):not(.pc-no-exam):not(.pc-top):not(.pc-class-note):not(svg) { margin-block: 28px; }

/* ניהול הכיתה (למורה בלבד): החבילה אינה מכסה אותו. מתקפל, בתחתית העמוד */
.pm-page .pc-manage { border: 1px solid var(--pm-line); border-radius: 10px; background: var(--pm-surface); }
.pm-page .pc-manage > summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; min-height: 64px; }
.pm-page .pc-manage > summary::-webkit-details-marker { display: none; }
.pm-page .pc-manage-title { font-size: 1.125rem; font-weight: 650; color: var(--pm-heading); }
.pm-page .pc-manage > summary small { color: var(--pm-muted); font-size: .8125rem; flex: 1; }
.pm-page .pc-manage > summary .pm-icon { transition: transform .16s ease; }
.pm-page .pc-manage[open] > summary .pm-icon { transform: rotate(180deg); }
.pm-page .pc-manage-body { padding: 0 20px 20px; border-top: 1px solid var(--pm-line); }
@media (max-width: 680px) { .pm-page .pc-manage > summary small { display: none; } }
/* כפתור משני (.btn) בכלי המורה: האיפוס של החבילה (.pm-page :where(button)) נטען אחרי style.css
   ומחק לו רקע וקו, ו"קוד לתלמיד בלי Google" ו"לנקות את המיקוד" נראו כטקסט (חדר בקרה 139) */
.pm-page .pc-manage button.btn:not(.primary) { font-size: .95rem; border: 1px solid var(--ctl-border); background: var(--iris-soft); color: var(--iris-deep); }
.pm-page .pc-manage button.btn:not(.primary):hover { background: var(--surface); border-color: var(--accent); }

/* 7. עמוד הנושא (v3, REPLY סעיף 1): כותרת אחת ומתחתיה הלשוניות. בלי פירורי לחם (הדרך
   חזרה אחת: "כל הנושאים" של up.js), בלי רצועת הצילום ובלי המשפט הכללי. רצועת הנושאים
   האחים נשארת (ניווט 4 של הבעלים, verify_nav_reach) - רק כשהלשוניות באמת צוירו (:has), כדי שתקלה ב-JS לא תשאיר עמוד ריק. */
#site-main:has(> #practice-host > .tp-panel) > :is(.crumbs, .wing, #topic-go) { display: none !important; }
#site-main:has(> #practice-host > .tp-panel) #hub-blurb { display: none !important; }