/* ==========================================================================
   SlotWise — גיליון הסגנון היחיד של האפליקציה
   SlotWise — the single stylesheet.

   כללי היסוד:
   1. אין שום בקשה חיצונית. אין @import, אין CDN, אין גופן שנטען מהרשת.
      ‏Heebo מוגש מ-‎static/fonts‎ שלנו (ראו פרק 0), לא מ-Google Fonts.
      האפליקציה עובדת גם בלי חיבור לאינטרנט.
      No external requests at all: no @import, no CDN, no remote webfonts.
      Heebo is self-hosted under static/fonts.
   2. כל צבע מוגדר קודם כטוקן על ‎:root‎ (מצב בהיר מלא), ורק אחר כך נדרס
      בגוש הכהה. אין צבע שקיים רק במצב אחד.
      Every colour is defined on bare :root first; the dark blocks ONLY override tokens.
      יש **שני** גושים כהים והם חייבים להישאר זהים: אחד למצב "לפי המערכת"
      (בתוך ‎prefers-color-scheme‎) ואחד לבחירה מפורשת בכהה (‎[data-theme]‎).
      ‏CSS אינו יודע לצרף תנאי מדיה ותנאי סלקטור לכלל אחד, ולכן זו כפילות
      מכוונת — משנים בשניהם או בכלל לא.
   3. כיווניות: ‎dir="rtl"‎ על ‎<html>‎. משתמשים במאפיינים לוגיים
      (inline-start / inline-end) כדי שהפריסה תהיה נכונה מימין לשמאל.
   ========================================================================== */

/* ==========================================================================
   0. גופנים — Heebo ו-DM Serif Display, מוגשים מקומית
   ‏גופן משתנה אחד לכל המשקלים (400–800), בשני חלקים: עברית ולטינית. אלה
   אותם קבצים ואותם ‎unicode-range‎ ש-Google Fonts מגיש, רק מהשרת שלנו.
   רישיון: static/fonts/OFL.txt (Heebo), OFL-DMSerifDisplay.txt.
   ========================================================================== */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ‏DM Serif Display — לסימן המילולי "SlotWise" בכותרת בלבד. משקל יחיד (400),
   ולטינית בלבד: אין בו אות עברית אחת שנצטרך. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. טוקנים — הפלטה הבהירה המלאה
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* ---- טוקני העיצוב (docs/DESIGN.md) ----
     הממשק עצמו מונוכרומטי: דיו על משטחים נייטרליים. הצבע היחיד על המסך
     שייך לקורסים. */
  --bg: #f4f4f1;    /* רקע העמוד */
  --sf: #ffffff;    /* משטחים: פאנלים, כרטיסי קורס */
  --ln: #ebebe6;    /* קווי רשת ומפרידי שורות */
  --bd: #e3e3dd;    /* מסגרות */
  --ink: #0d1d3d;   /* טקסט ראשי, כפתור ראשי, מצב נבחר — הנייבי של הלוגו */
  --sec: #6e6e73;   /* טקסט משני */
  --mut: #a3a3a8;   /* טקסט מושתק, שעות, שלבים עתידיים */

  /* ---- הסימן המילולי "SlotWise" (docs/DESIGN.md, "Logo and favicon") ----
     ‏"Slot" בבהיר הוא נייבי הלוגו, שהוא גם ‎--ink‎ — הפניה ולא עותק. */
  --brand-slot: var(--ink);
  --brand-wise: #0e5a5e;

  /* ---- השמות הקודמים, ממופים לטוקנים ----
     ‏הגיליון עדיין כתוב בשמות האלה. הם אינם מחזיקים צבע משלהם — רק
     הפניה — כך שכל צבע כתוב פעם אחת. ‏--accent הוא עכשיו הדיו: הכפתור
     הראשי והמצב הנבחר הם ‎--ink‎, והזוג מתהפך (‎--accent-ink‎ = ‎--sf‎). */
  --panel: var(--sf);
  --muted: var(--sec);
  --line: var(--bd);
  /* ‏מסגרת של פקד שהיא הקצה היחיד שלו (שדות, תיבות בחירה, כפתורי רפאים,
     ‏כפתורי הימים): ‎--sec‎ ולא ‎--mut‎ — ‏3:1 לפחות מול המשטח (DESIGN.md,
     ‏Quality floor, 9C). ‎--mut‎ נתן 2.51:1 בבהיר ו-2.75:1 בכהה. */
  --line-strong: var(--sec);

  --accent: var(--ink);
  --accent-ink: var(--sf);
  --focus: var(--ink);
  /* ‏ריחוף על כפתור הבנייה (מלא ‎--ink‎) — DESIGN.md, Scroll behaviour, 4. */
  --ink-hover: #2a2a2e;

  /* ‏משטחי המשנה, ולמה הם אינם ‎--ln‎/‎--bd‎ בבהיר: ‎--muted‎ יושב עליהם
     (תג "בתכנית" על ‎--chip‎, שורת מרצה מדורגת על ‎--accent-soft‎), ו-‎--sec‎
     נותן שם רק 4.24:1 ו-3.94:1 — מתחת ל-AA. על ‎--bg‎ הוא 4.60:1.
     ‏‎--panel-2‎ עולה לחצי הדרך אל ‎--sf‎ (‏4.85:1) כדי ששורה מדורגת עדיין
     תיבדל משורה אי־זוגית בטבלת המרצים. בכהה אין הבעיה (‏‎--sec‎ ≥ 5:1
     על כל המשטחים), ולכן שם המיפוי הוא הישיר. */
  --panel-2: color-mix(in srgb, var(--bg) 50%, var(--sf));
  --chip: var(--bg);
  --accent-soft: var(--bg);

  /* ---- מצבים ---- */
  --info-bg: #e9eef6;  --info-line: #4d74ad;  --info-ink: #1f4576;
  --ok-bg:   #e7f0dc;  --ok-line:   #4a8a3c;  --ok-ink:   #24501a;
  --warn-bg: #fbf0d5;  --warn-line: #8a5a12;  --warn-ink: #5d3a05;
  --err-bg:  #fbe3e8;  --err-line:  #ad2c48;  --err-ink:  #8a1030;

  /* ---- תמרור "קבוצה מלאה" (docs/DESIGN.md, Color, "Warning sign") ----
     ‏תמרור אינו מחליף צבע: מוגדר כאן בלבד, לא ממופה בגושי הכהה ולא בהדפסה.
     ‏נפרד מ-‎--warn-ink‎, שהוא צבע טקסט ומתבהר בכהה. */
  --warn-sign-fill: #ffcc00;
  --warn-sign-ink: #1a1a1a;

  /* ---- פתק הזהב של שלב הקורסים (docs/DESIGN.md, "Semester notes") ---- */
  /* ‏‎#876b2c‎ ולא ‎#9a7a32‎ (‏2026-10-12): ‏5.04:1 על ‎--sf‎ ו-4.56:1 על ‎--gold-bg‎;
     ‏הקודם נתן 4.04:1 ו-3.65:1 (DESIGN.md, Quality floor, 9C). */
  --gold-ink: #876b2c;
  --gold-bg: #faf3e3;
  --gold-line: #e8d6ab;

  /* ---- סימוני טבלת המרצים ---- */
  --pin-bg: #e7f0dc;
  --pin-line: #366e2b;
  /* ‏‎#5e4490‎ ולא ‎#6d4fa6‎ (‏2026-10-12): התג "קורס צמוד" שקוף, ולכן יושב
     ‏על גוון הקורס בכרטיס נבחר — ‏5.06:1 לפחות על כל עשרת הגוונים (הקודם
     ‏ירד ל-4.12:1 על ‎--course-6‎). */
  --tie-line: #5e4490;
  --dead-line: #7d1533;

  /* ---- מידות ---- */
  --slot-h: 22px;          /* גובה משבצת של 15 דקות */
  --time-col: 4.6rem;      /* רוחב עמודת השעות */
  --day-min: 8.5rem;       /* רוחב מינימלי לעמודת יום — מתחת לזה הרשת נגללת */
  --radius: 10px;
  --radius-sm: 6px;
  --gap: 14px;
  --shadow: 0 1px 0 rgba(74, 56, 38, .05), 0 2px 6px rgba(74, 56, 38, .09);
  --shadow-sm: 0 1px 2px rgba(74, 56, 38, .10);
  /* ‏הכותרת הדקה (Scroll behaviour, 1), ומה שנדבק מתחתיה: ראש הקורס הפתוח
     ‏בשלב המרצים (3). ברחב הכותרת אינה דביקה, ולכן ‎--sticky-top‎ שם 0. */
  --head-thin: 48px;
  --sticky-top: var(--head-thin);

  /* ---- עשרה צבעי קורס נגישים ----
     כל שילוב רקע/טקסט נבדק: יחס ניגודיות ‎>= 9:1‎ במצב בהיר ובמצב כהה כאחד
     (הדרישה היא 7:1). מיפוי הקוד לצבע זהה ל-src/render.py. */
  --course-0: #f3d4c9;  --course-0-bd: #d9613e;  --course-0-fg: #681a04;
  --course-1: #fbecd7;  --course-1-bd: #ae660f;  --course-1-fg: #623804;
  --course-2: #f8e5a1;  --course-2-bd: #b18b0c;  --course-2-fg: #4a3b03;
  --course-3: #cfe5bb;  --course-3-bd: #5a952e;  --course-3-fg: #1b4003;
  --course-4: #d9efe2;  --course-4-bd: #2b885c;  --course-4-fg: #03492b;
  --course-5: #a9dde2;  --course-5-bd: #229ba9;  --course-5-fg: #03373e;
  --course-6: #c1d2eb;  --course-6-bd: #3e74ce;  --course-6-fg: #042c6a;
  --course-7: #e9ddf1;  --course-7-bd: #a177ca;  --course-7-fg: #4d079f;
  --course-8: #faf0f4;  --course-8-bd: #c850a0;  --course-8-fg: #84055e;
  --course-9: #f6cdd3;  --course-9-bd: #db6780;  --course-9-fg: #6c051d;

  /* ======================================================================
     ‏מקור הפלטה הכהה. הערכים חיים **כאן בלבד**, ושני גושי הכהה בפרק 2
     רק ממפים אליהם. לפני האיחוד כל צבע כהה הופיע פעמיים, ו"לשנות
     בשניהם או בכלל לא" היה הסכם שבעל פה שאין מי שיאכוף. עכשיו שינוי
     צבע הוא עריכה של שורה אחת, ואי אפשר לשנות עותק אחד ולפספס את השני.
     The dark palette is defined once, here. The two dark blocks in §2
     only map to it, so no hex appears twice.
     ====================================================================== */
  /* ---- טוקני העיצוב, כהה (docs/DESIGN.md) ---- */
  --dark-bg: #0e0f11;
  --dark-sf: #17181b;
  --dark-ln: #222327;
  --dark-bd: #2a2b30;
  --dark-ink: #f2f2f0;
  --dark-sec: #9a9aa1;
  --dark-mut: #5d5e64;

  --dark-brand-slot: #ecebe6;
  --dark-brand-wise: #3fb8ad;

  /* ---- השמות הקודמים — הפניות בלבד. המיפוי הישיר; ראו בבהיר למה
     שלושת משטחי המשנה שם שונים ---- */
  --dark-panel: var(--dark-sf);
  --dark-panel-2: var(--dark-bg);
  --dark-chip: var(--dark-ln);
  --dark-muted: var(--dark-sec);
  --dark-line: var(--dark-bd);
  --dark-line-strong: var(--dark-sec);

  /* ‏הזוג מתהפך: מה שיושב על רקע ‎--ink‎ כתוב ב-‎--sf‎. */
  --dark-accent: var(--dark-ink);
  --dark-accent-ink: var(--dark-sf);
  --dark-accent-soft: var(--dark-bd);
  --dark-focus: var(--dark-ink);
  --dark-ink-hover: #d9d9d6;

  --dark-info-bg: #1b2431;  --dark-info-line: #4a6f9e;  --dark-info-ink: #bcd3ef;
  --dark-ok-bg:   #1a2c17;  --dark-ok-line:   #4f8a45;  --dark-ok-ink:   #b6e0a2;
  --dark-warn-bg: #3a2c0e;  --dark-warn-line: #c99a3f;  --dark-warn-ink: #f2cf8a;
  --dark-err-bg:  #3a1620;  --dark-err-line:  #d9697f;  --dark-err-ink:  #f5aab8;

  --dark-gold-ink: #d4b06a;
  --dark-gold-bg: #2a2418;
  --dark-gold-line: #4a3f28;

  --dark-pin-bg: #1a2c17;
  --dark-pin-line: #66b356;
  /* ‏הועלה מ-‎#b099e8‎ יחד עם ניטרול ‎--accent-soft‎. התג "קורס צמוד" הוא
     היחיד עם ‎background: transparent‎, כלומר הוא יושב על רקע הכרטיס —
     וכשהכרטיס הנבחר עלה מ-‎#3b2517‎ ל-‎#3e3e3e‎ הוא ירד ל-4.36:1. עכשיו
     ‏5.02 שם, ‏6.46 על ‎--panel-2‎ ו-7.19 על ‎--panel‎. */
  --dark-tie-line: #bba7ec;
  --dark-dead-line: #e88fa8;

  --dark-shadow: 0 1px 0 rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .38);
  --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);

  --dark-course-0: #672d1b;  --dark-course-0-bd: #bb5232;  --dark-course-0-fg: #f6e0d9;
  --dark-course-1: #36230c;  --dark-course-1-bd: #b67322;  --dark-course-1-fg: #e2bc8c;
  --dark-course-2: #52410d;  --dark-course-2-bd: #816a16;  --dark-course-2-fg: #f4ecd2;
  --dark-course-3: #293f17;  --dark-course-3-bd: #568432;  --dark-course-3-fg: #bee8a3;
  --dark-course-4: #163524;  --dark-course-4-bd: #369468;  --dark-course-4-fg: #81dfb7;
  --dark-course-5: #18474c;  --dark-course-5-bd: #2a7981;  --dark-course-5-fg: #ceeef3;
  --dark-course-6: #1f365b;  --dark-course-6-bd: #5681c6;  --dark-course-6-fg: #c9d8f1;
  --dark-course-7: #4e2973;  --dark-course-7-bd: #8b58bf;  --dark-course-7-fg: #e7dbf6;
  --dark-course-8: #481b37;  --dark-course-8-bd: #c0579d;  --dark-course-8-fg: #edb8dd;
  --dark-course-9: #5c1c29;  --dark-course-9-bd: #c13c58;  --dark-course-9-fg: #f1c8d1;

  /* ======================================================================
     ‏מקור הפלטה של הנייר. הדף המודפס אינו "בהיר" ואינו "כהה" — הוא לבן,
     תמיד. הערכים כאן, והמיפוי בפרק 15.
     ====================================================================== */
  --print-bg: #ffffff;
  --print-panel: #ffffff;
  --print-panel-2: #ffffff;
  --print-chip: #f1f3f6;
  --print-ink: #000000;
  --print-muted: #444444;
  --print-line: #c9ced6;
  --print-line-strong: #8b939e;
  --print-accent: #14406f;
  --print-accent-ink: #ffffff;
  --print-accent-soft: #eef3fa;
}

/* ==========================================================================
   2. מצב כהה — מיפוי בלבד. הערכים עצמם יושבים בפרק 1.
   ========================================================================== */
/* ‏שני הגושים האלה חייבים להישאר זהים — ‎CSS‎ אינו יודע לצרף תנאי מדיה
   ותנאי סלקטור לכלל אחד, ולכן הכפילות מכוונת. מה שהשתנה: הם כבר אינם
   מחזיקים צבעים, רק הפניות אל ‎--dark-*‎. שכפול של רשימת הפניות אינו
   יכול להיסדק בשקט — ‎tests/test_theme_tokens.py‎ מוודא שהשניים זהים.

   ‏שניהם עטופים ב-‎screen‎ בכוונה. "כהה" הוא מצב של מסך, לא של נייר, ובלי
   העטיפה הזאת ‎:root[data-theme="dark"]‎ בדרגה (0,2,0) גבר על ‎:root‎ של
   גוש ההדפסה בדרגה (0,1,0) — והדף יצא עם ‎--ink: #e6eaf1‎ על נייר לבן,
   יחס ניגודיות 1.16:1. מי שהדפיס במצב כהה הדפיס דף ריק למראה. */

/* ‏א. "לפי המערכת": חל רק כשאין בחירה מפורשת בבהיר.
   בלי ‎:not([data-theme="light"])‎ הגוש הזה היה גובר על בחירת "בהיר"
   של מי שמערכת ההפעלה שלו כהה — שתי הדרגות זהות (0,2,0), והמאוחר מנצח. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark-bg);
    --sf: var(--dark-sf);
    --ln: var(--dark-ln);
    --bd: var(--dark-bd);
    --sec: var(--dark-sec);
    --mut: var(--dark-mut);
    --brand-slot: var(--dark-brand-slot);
    --brand-wise: var(--dark-brand-wise);
    --panel: var(--dark-panel);
    --panel-2: var(--dark-panel-2);
    --chip: var(--dark-chip);
    --ink: var(--dark-ink);
    --muted: var(--dark-muted);
    --line: var(--dark-line);
    --line-strong: var(--dark-line-strong);

    --accent: var(--dark-accent);
    --accent-ink: var(--dark-accent-ink);
    --accent-soft: var(--dark-accent-soft);
    --focus: var(--dark-focus);
    --ink-hover: var(--dark-ink-hover);

    --info-bg: var(--dark-info-bg);  --info-line: var(--dark-info-line);  --info-ink: var(--dark-info-ink);
    --ok-bg: var(--dark-ok-bg);  --ok-line: var(--dark-ok-line);  --ok-ink: var(--dark-ok-ink);
    --warn-bg: var(--dark-warn-bg);  --warn-line: var(--dark-warn-line);  --warn-ink: var(--dark-warn-ink);
    --err-bg: var(--dark-err-bg);  --err-line: var(--dark-err-line);  --err-ink: var(--dark-err-ink);

    --gold-ink: var(--dark-gold-ink);
    --gold-bg: var(--dark-gold-bg);
    --gold-line: var(--dark-gold-line);

    --pin-bg: var(--dark-pin-bg);
    --pin-line: var(--dark-pin-line);
    --tie-line: var(--dark-tie-line);
    --dead-line: var(--dark-dead-line);

    --shadow: var(--dark-shadow);
    --shadow-sm: var(--dark-shadow-sm);

    --course-0: var(--dark-course-0);  --course-0-bd: var(--dark-course-0-bd);  --course-0-fg: var(--dark-course-0-fg);
    --course-1: var(--dark-course-1);  --course-1-bd: var(--dark-course-1-bd);  --course-1-fg: var(--dark-course-1-fg);
    --course-2: var(--dark-course-2);  --course-2-bd: var(--dark-course-2-bd);  --course-2-fg: var(--dark-course-2-fg);
    --course-3: var(--dark-course-3);  --course-3-bd: var(--dark-course-3-bd);  --course-3-fg: var(--dark-course-3-fg);
    --course-4: var(--dark-course-4);  --course-4-bd: var(--dark-course-4-bd);  --course-4-fg: var(--dark-course-4-fg);
    --course-5: var(--dark-course-5);  --course-5-bd: var(--dark-course-5-bd);  --course-5-fg: var(--dark-course-5-fg);
    --course-6: var(--dark-course-6);  --course-6-bd: var(--dark-course-6-bd);  --course-6-fg: var(--dark-course-6-fg);
    --course-7: var(--dark-course-7);  --course-7-bd: var(--dark-course-7-bd);  --course-7-fg: var(--dark-course-7-fg);
    --course-8: var(--dark-course-8);  --course-8-bd: var(--dark-course-8-bd);  --course-8-fg: var(--dark-course-8-fg);
    --course-9: var(--dark-course-9);  --course-9-bd: var(--dark-course-9-bd);  --course-9-fg: var(--dark-course-9-fg);
  }
}

/* ‏ב. בחירה מפורשת בכהה. רשימה זהה לגוש שמעליו — ראו ההערה בראש הפרק. */
@media screen {
  :root[data-theme="dark"] {
    --bg: var(--dark-bg);
    --sf: var(--dark-sf);
    --ln: var(--dark-ln);
    --bd: var(--dark-bd);
    --sec: var(--dark-sec);
    --mut: var(--dark-mut);
    --brand-slot: var(--dark-brand-slot);
    --brand-wise: var(--dark-brand-wise);
    --panel: var(--dark-panel);
    --panel-2: var(--dark-panel-2);
    --chip: var(--dark-chip);
    --ink: var(--dark-ink);
    --muted: var(--dark-muted);
    --line: var(--dark-line);
    --line-strong: var(--dark-line-strong);

    --accent: var(--dark-accent);
    --accent-ink: var(--dark-accent-ink);
    --accent-soft: var(--dark-accent-soft);
    --focus: var(--dark-focus);
    --ink-hover: var(--dark-ink-hover);

    --info-bg: var(--dark-info-bg);  --info-line: var(--dark-info-line);  --info-ink: var(--dark-info-ink);
    --ok-bg: var(--dark-ok-bg);  --ok-line: var(--dark-ok-line);  --ok-ink: var(--dark-ok-ink);
    --warn-bg: var(--dark-warn-bg);  --warn-line: var(--dark-warn-line);  --warn-ink: var(--dark-warn-ink);
    --err-bg: var(--dark-err-bg);  --err-line: var(--dark-err-line);  --err-ink: var(--dark-err-ink);

    --gold-ink: var(--dark-gold-ink);
    --gold-bg: var(--dark-gold-bg);
    --gold-line: var(--dark-gold-line);

    --pin-bg: var(--dark-pin-bg);
    --pin-line: var(--dark-pin-line);
    --tie-line: var(--dark-tie-line);
    --dead-line: var(--dark-dead-line);

    --shadow: var(--dark-shadow);
    --shadow-sm: var(--dark-shadow-sm);

    --course-0: var(--dark-course-0);  --course-0-bd: var(--dark-course-0-bd);  --course-0-fg: var(--dark-course-0-fg);
    --course-1: var(--dark-course-1);  --course-1-bd: var(--dark-course-1-bd);  --course-1-fg: var(--dark-course-1-fg);
    --course-2: var(--dark-course-2);  --course-2-bd: var(--dark-course-2-bd);  --course-2-fg: var(--dark-course-2-fg);
    --course-3: var(--dark-course-3);  --course-3-bd: var(--dark-course-3-bd);  --course-3-fg: var(--dark-course-3-fg);
    --course-4: var(--dark-course-4);  --course-4-bd: var(--dark-course-4-bd);  --course-4-fg: var(--dark-course-4-fg);
    --course-5: var(--dark-course-5);  --course-5-bd: var(--dark-course-5-bd);  --course-5-fg: var(--dark-course-5-fg);
    --course-6: var(--dark-course-6);  --course-6-bd: var(--dark-course-6-bd);  --course-6-fg: var(--dark-course-6-fg);
    --course-7: var(--dark-course-7);  --course-7-bd: var(--dark-course-7-bd);  --course-7-fg: var(--dark-course-7-fg);
    --course-8: var(--dark-course-8);  --course-8-bd: var(--dark-course-8-bd);  --course-8-fg: var(--dark-course-8-fg);
    --course-9: var(--dark-course-9);  --course-9-bd: var(--dark-course-9-bd);  --course-9-fg: var(--dark-course-9-fg);
  }
}

/* ‏color-scheme קובע את הגוון של פקדי המערכת עצמם — תיבות בחירה, שדה
   השעה, פסי הגלילה. בלי זה בחירה מפורשת הייתה צובעת את העמוד ומשאירה
   את הפקדים בגוון ההפוך. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ==========================================================================
   3. בסיס
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Heebo", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ‏פקדי טופס אינם יורשים גופן כברירת מחדל; בלי זה פקד בלי ‎font: inherit‎
   משלו היה נשאר בגופן המערכת. */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* מספרים, שעות וקודי קורס — תמיד משמאל לימין, מבודדים מהטקסט העברי.
   ‏**רק על האסימון עצמו, לא על התא שמכיל אותו.** ‏.cell-group ישב כאן
   ‏עד 2026-09-10 והוא ``<td>``: ‏direction: ltr עליו הפך את
   ‏text-align: start של הטבלה משמאל לימין, ולכן עמודת "קבוצה" יושרה
   ‏שמאלה בזמן שכל השאר — והכותרת שלה עצמה — יושרו ימינה. הוא גם הפך
   ‏לטיני את הערת הקבוצה ואת תג "הקורס מלא", שהם עברית. קוד הקבוצה
   ‏מבודד ב-.gid שבתוך התא, בדיוק כפי שטווח השעות מבודד ב-.cell-time
   ‏בתוך תא היום — אותה תבנית, ועכשיו בשני המקומות. */
.ltr,
.fresh-meta,
.course-code,
.cell-time,
.log-lines {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   4. כותרת עליונה
   ========================================================================== */
.busy-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 60;
  background: var(--line);
  overflow: hidden;
}

.busy-bar > span {
  display: block;
  block-size: 100%;
  inline-size: 40%;
  background: var(--accent);
  animation: busy-slide 1.1s linear infinite;
}

@keyframes busy-slide {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

/* ‏‎--panel‎ כאן הוא גם מילוי ‎.brand-halo‎ בסימן — משנים בשניהם. */
.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px clamp(12px, 3vw, 28px);
  background: var(--panel);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* ‏הסימן בצד שמאל. ‎order‎ ולא היפוך ה-DOM: שם המוצר נשאר האלמנט הראשון
   בקריאת מסך ובסדר ה-Tab, ורק המיקום הוויזואלי זז. ‎justify-content:
   space-between‎ שכבר קיים דוחף אותו אל הקצה. */
.brand { order: 1; text-align: left; }

/* ‏הסימן והמילה הם יחידה לטינית אחת, ולכן ‎ltr‎ בתוכה — בלעדיו האייקון
   היה נוחת מימין ל-"SlotWise" ולא משמאלו. הכיתוב מתחת נשאר עברי
   ונקרא ימין-לשמאל כרגיל; רק היישור שלו הוא לשמאל, כמו הסימן שמעליו. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.brand-icon {
  inline-size: 34px;
  block-size: 34px;
  flex: none;
}

/* ‏שתי גרסאות הסימן מוטבעות; מוצגת זו של הערכה הפעילה. אותם שני תנאים
   כמו גושי הכהה בפרק 2 — מערכת ההפעלה כשאין בחירה, או בחירה מפורשת. */
.brand-icon-dark { display: none; }

/* ‏הטבעת סביב השעון מפרידה אותו מהלוח שמאחוריו. בקובץ היא בצבע קבוע
   (שמנת / כמעט־שחור), ועל רקע הכותרת זה נראה כהילה. כאן היא ממולאת
   ברקע הכותרת עצמו, בשתי הערכות; כלל CSS גובר על מאפיין ‎fill‎ של SVG,
   והצבע הקבוע נשאר רק לקובץ כשהוא מוצג לבד. */
.brand-icon .brand-halo { fill: var(--panel); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand-icon-light { display: none; }
  html:not([data-theme="light"]) .brand-icon-dark { display: inline; }
}
html[data-theme="dark"] .brand-icon-light { display: none; }
html[data-theme="dark"] .brand-icon-dark { display: inline; }

/* ‏1.3 מגודל הכיתוב הקודם (‏20px, ו-18px במסך צר). ‏font-weight: 400 כי זה
   המשקל היחיד של הגופן — ‏700 של ‎h1‎ היה מייצר הדגשה מלאכותית. */
.brand-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}
.brand-slot { color: var(--brand-slot); }
.brand-wise { color: var(--brand-wise); }

.header-side {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--gap);
  align-items: center;
}

.freshness {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.fresh-lines { display: flex; flex-direction: column; line-height: 1.3; }
.fresh-text { font-size: 13px; font-weight: 600; }
.fresh-meta { font-size: 13px; color: var(--muted); }

/* ‏אותה שורה בדיוק, בצבע אזהרה — לא משפט אחר ולא אייקון נוסף. מה שהשתנה
   הוא הגיל, לא מה שהאפליקציה יודעת, ולכן הנוסח נשאר זהה.
   ‏--warn-ink ולא --warn-line: זה טקסט על רקע הכותרת הרגיל, ו--warn-line
   הוא טוקן של מסגרות ונקודות. ‏#freshness-dot כבר נושא את אותו מצב,
   ולכן הצבע אינו הסימון היחיד — כלל 7.1. */
.fresh-text[data-state="stale"] { color: var(--warn-ink); }

.fresh-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

/* ‏--ok-line ולא --pin-line: זהו מצב של הנתונים, ושלושת המצבים כאן הם
   משפחה אחת — ‏ok / warn / err. שימוש בטוקן הנעיצה היה עובד עד היום
   שבו מישהו ישנה את צבע הנעיצה ויגלה שנקודת הטריות זזה איתו. */
.fresh-dot[data-state="fresh"] { background: var(--ok-line); border-color: var(--ok-line); }
.fresh-dot[data-state="stale"] { background: var(--warn-line); border-color: var(--warn-line); }
.fresh-dot[data-state="empty"] { background: var(--dead-line); border-color: var(--dead-line); }

/* ‏חי עכשיו בתוך "פרטים טכניים" ולא בכותרת, ולכן שורת הסיכום שלצדו
   מיושרת אליו במקום להיתלות מתחת לכפתור. */
.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-block-end: 12px;
}

/* ---- בורר ערכת הצבעים: שלושה מצבים בפקד אחד ---- */
.theme-toggle {
  display: flex;
  flex: none;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-ico {
  inline-size: 17px;
  block-size: 17px;
  display: block;
}

.theme-btn:hover { color: var(--ink); }

.theme-btn[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ‏הסימון השני, שאינו צבע. גלולה צבועה לבדה מבדילה בגוון ובבהירות, וכלל
   ‏7.1 דורש סימן שאינו נשען על צבע — כאן הצורה שבתוך האייקון עוברת
   ממתאר למילוי: השמש מקבלת דיסקה, הירח גוף, והמסך זכוכית. ההבדל נשאר
   גלוי גם בגווני אפור ובסימולציית עיוורון צבעים.
   ‏fill-opacity ולא מילוי מלא: מילוי אטום היה בולע את המתאר והופך את
   הירח לכתם. */
.theme-btn .ico-fill { fill: none; }

.theme-btn[aria-checked="true"] .ico-fill {
  fill: currentColor;
  fill-opacity: .3;
}

/* ==========================================================================
   5. כפתורים ושדות
   ========================================================================== */
.btn {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

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

.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-sm { padding: 5px 11px; font-size: 13px; }

/* ---- שלוש דרגות לכפתורי הכותרת ----
   שלושתם נראו זהים, והם רחוקים מלהיות שקולים: אחד יוצא לרשת ומושך מאות
   עמודים מהידיעון, השני בונה מחדש ממה שכבר במחשב, והשלישי רק פותח יומן.
   המראה עוקב אחרי המחיר. ‏btn-ghost נשאר כפי שהוא — הוא בשימוש בעוד
   כתריסר מקומות בעמוד, ולא הוא הנושא כאן. */

/* ראשי: מילוי מלא. זו הפעולה שבאים בשבילה. */
.btn-primary { font-weight: 700; }

/* משני: מתאר בלבד. אמיתי, אבל לא מה שמושך את העין ראשון. */
.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* שלישוני: בלי מסגרת ובלי רקע — קישור שנראה ככפתור רק כשנוגעים בו.
   הכלל הזה חייב לבוא אחרי ‎.btn:hover‎, שאחרת היה מחזיר לו מסגרת בריחוף. */
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 500;
}

.btn-quiet:hover:not(:disabled) {
  border-color: transparent;
  background: var(--chip);
  color: var(--ink);
}

.field { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.field-grow { flex: 1 1 16rem; }

/* ‏בתוך שדה, מחלקת הרוחב היא הקובעת — לא רצפת ה-‎min-inline-size‎ של
   ‎.input‎.
   ‏.input מצהיר על ‎min-inline-size: 9rem‎ כדי ששדה בודד לא ייצא זעיר, אבל
   ‎.field--sm‎ הוא ‎8rem‎. ‏9 > 8, ולכן ה-‎select‎ גלש 16px אל מחוץ למכל שלו,
   וב-RTL הגלישה היא שמאלה — אל תוך השדה השכן. התוצאה: התווית "סמסטר",
   שמיושרת לימין השדה שלה, כיסתה את ‎#select-year‎, וכל תווית נראתה כאילו
   היא שייכת לתיבה הלא נכונה.
   ‏inline-size: 100% ולא רק ביטול הרצפה: כך התיבה **שווה** למחלקה שלה,
   וזה מה ששלב 5 ביקש — "לתת לשדות את רוחב התוכן שלהם וליישר על רשת". */
.field > .input {
  inline-size: 100%;
  min-inline-size: 0;
}

.field-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  padding-block-end: 8px;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;
}

.label { font-size: 13px; font-weight: 600; color: var(--muted); }

.input {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-inline-size: 9rem;
}

.input:hover { border-color: var(--accent); }
/* ‏בלי הכלל הזה הדפדפן צובע את הרמז באפור משלו — ‏3.85:1 בכהה (DESIGN.md,
   ‏Quality floor, 9C). */
.input::placeholder { color: var(--sec); }

input[type="checkbox"] { accent-color: var(--accent); inline-size: 1.05rem; block-size: 1.05rem; }
input[type="time"] { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ==========================================================================
   6. באנרים, הודעות חולפות, יומן
   ========================================================================== */
.banners {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(12px, 3vw, 28px);
  margin-block-start: 12px;
}

.banners:empty { display: none; }

/* ‏שורה אחת: אייקון, טקסט, "הצג רשימה", פעולה, סגירה.
   ‏align-items: center ולא flex-start — באנר בן שורה אחת, לא פסקה. */
.banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--info-line);
  border-inline-start: 4px solid var(--info-line);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: 13px;
}

/* ‏min-inline-size: 0 — בלעדיו טקסט ארוך בלי רווחים מרחיב את הבאנר
   מעבר לרוחב העמוד במקום להישבר. */
.banner-icon { order: 0; flex: none; }
.banner-text { order: 1; flex: 1 1 14rem; min-inline-size: 0; }
.banner-more { order: 2; flex: none; }
.banner .btn { order: 3; flex: none; }
.banner-close { order: 4; flex: none; margin-inline-start: auto; }

.banner-icon::before { content: "\2139"; font-weight: 700; }
.banner--ok    { border-color: var(--ok-line);   background: var(--ok-bg);   color: var(--ok-ink); }
.banner--warn  { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.banner--error { border-color: var(--err-line);  background: var(--err-bg);  color: var(--err-ink); }
.banner--ok .banner-icon::before    { content: "\2713"; }
.banner--warn .banner-icon::before  { content: "\26A0"; }
.banner--error .banner-icon::before { content: "\2716"; }

/* גוון שקט: נכון עובדתית, אבל לא דורש תשומת לב מיידית.
   אין שלישיית טוקנים ניטרלית בקובץ, ולכן זה נבנה מטוקני הבסיס —
   וממילא מקבל מצב כהה בלי שורה נוספת בבלוק הכהה. */
.banner--muted {
  border-color: var(--line-strong);
  background: var(--chip);
  color: var(--muted);
}

/* ---- הרשימה המלאה, מקופלת ---- */
/* פתוח = שורה משלו ברוחב מלא, מתחת להודעה. סגור = פריט קטן בשורה. */
.banner-more[open] {
  order: 9;
  flex: 1 1 100%;
  margin-block-start: 2px;
}

.banner-more-summary {
  cursor: pointer;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.banner-more-summary:hover { background: rgba(128, 128, 128, .14); }

.banner-more-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 4px;
}

.banner-more-title {
  font-weight: 600;
  font-size: 13px;
}

.banner-more-legend { font-size: 13px; color: var(--muted); }

.code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* מאות קודים לא ידחפו את העמוד: הרשימה נגללת בתוך עצמה. */
  max-block-size: 11rem;
  overflow-y: auto;
}

.code-chip {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  /* הקוד הוא מספר: מוצג משמאל לימין גם בתוך עמוד ימין-לשמאל. */
  direction: ltr;
  unicode-bidi: isolate;
}

.code-chip.is-failed {
  border-color: var(--err-line);
  color: var(--err-ink);
  background: var(--err-bg);
}

.banner-close {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 4px;
  opacity: .7;
}

.banner-close:hover { opacity: 1; }

.toasts {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-inline-size: min(24rem, 90vw);
}

.toast {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--info-line);
  background: var(--info-bg);
  color: var(--info-ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: toast-in .18s ease-out;
}

.toast--ok    { border-color: var(--ok-line);   background: var(--ok-bg);   color: var(--ok-ink); }
.toast--warn  { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.toast--error { border-color: var(--err-line);  background: var(--err-bg);  color: var(--err-ink); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.log-panel {
  margin: 12px clamp(12px, 3vw, 28px) 0;
  padding: 14px 16px;
}

.log-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.log-title { font-size: 15px; }

.log-phase {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  margin-inline-end: auto;
}

.log-note {
  font-size: 13px;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-block: 10px;
}

.log-lines {
  margin: 0;
  padding: 10px 12px;
  max-block-size: 16rem;
  overflow: auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  unicode-bidi: plaintext;
  text-align: start;
}

.log-lines:empty::before {
  content: "אין עדיין שורות ביומן.";
  color: var(--muted);
  unicode-bidi: plaintext;
}

/* ==========================================================================
   6ב. גלילה: כותרת דקה וסרגל תחתון (docs/DESIGN.md, "Scroll behaviour")
   ========================================================================== */

/* ‏פריט 1, מסך צר בלבד: ‎app.js‎ מוסיף ‎.is-thin‎ אחרי ~20px גלילה, וברחב
   לעולם לא. ‏fixed ולא sticky: גובה הכותרת משתנה, ו-‎#app-header-spacer‎
   שומר את גובהה המלא — כך שום דבר מתחתיה אינו זז, והגלילה אינה נגררת
   חזרה אל מתחת לסף. */
.app-header-spacer { display: none; }
.app-header-spacer.is-on { display: block; }

.header-step {
  font-size: 13px;
  font-weight: 600;
  color: var(--sec);
  white-space: nowrap;
}

.app-header.is-thin {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  flex-wrap: nowrap;
  align-items: center;
  block-size: var(--head-thin);
  padding-block: 0;
  box-shadow: none;
}
.app-header.is-thin .header-side { display: none; }
.app-header.is-thin .brand-icon { inline-size: 24px; block-size: 24px; }
.app-header.is-thin .brand-title { font-size: 18px; }

/* ‏פריט 4, מסך צר בלבד. ‏visibility (ולא display) כדי שההחלקה תוכל לרוץ —
   וגם כדי שכשהוא מוסתר הוא יוצא מסדר ה-Tab ומעץ הנגישות. */
.bottom-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px clamp(12px, 3vw, 28px);
  background: var(--sf);
  border-block-start: 1px solid var(--bd);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .2s ease, visibility .2s;
}
.bottom-bar.is-visible { transform: none; visibility: visible; }
.bottom-bar-facts {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
.bottom-bar .btn { flex: none; }

/* ‏"בנה מערכות" גולל אל התוצאה ב-scrollIntoView; בצר היא נוחתת מתחת לכותרת
   הדקה ולא מאחוריה. ברחב ‎--sticky-top‎ הוא 0. */
#step-schedule { scroll-margin-block-start: var(--sticky-top); }

/* ‏בזמן שהסרגל מוצג, העמוד מקבל ריפוד תחתון בגובהו — הוא לעולם לא מכסה
   תוכן — והודעות חולפות עולות מעליו. מסך בלבד: בהדפסה אין סרגל. */
@media screen {
  body.has-bottom-bar { padding-block-end: var(--bottom-bar-h, 0px); }
  /* ‏וגם ריפוד גלילה: פקד שמקבל פוקוס נגלל אל מעל הסרגל ולא אל מתחתיו
     ‏(DESIGN.md, Quality floor, 9C). ‏‎--bottom-bar-h‎ יושב על ‎<html>‎. */
  html:has(> body.has-bottom-bar) { scroll-padding-block-end: var(--bottom-bar-h, 0px); }
  body.has-bottom-bar .toasts { inset-block-end: calc(16px + var(--bottom-bar-h, 0px)); }
}

/* ==========================================================================
   7. השלבים — סטפר (docs/DESIGN.md, "Steps" ו-Phase 2)
   שלושה מראות לשלבים 1..4 (‎.step--stepper‎), מאותם מצבים שהיו:
   ‏‎is-collapsed‎ = שורת "הושלם" אחת · ‏‎is-locked‎ = שורת "הבא" מושתקת ·
   פרוס = פאנל מלא, ו-‎is-active‎ שבהם במסגרת דיו. מה פתוח ומה סגור לא
   השתנה — רק המסגרת. שלב 5 הוא התוצאה, ומראהו שייך לשלב 5 של העיצוב.
   ========================================================================== */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px clamp(12px, 3vw, 28px) 40px;
  max-inline-size: 1180px;
  margin-inline: auto;
  --fold-time: 350ms;
  --fold-ease: cubic-bezier(.2, .8, .2, 1);
}

.step {
  counter-increment: step;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px clamp(12px, 2.4vw, 20px);
  transition: border-color .15s ease;
}

/* ‏השלב הפעיל הוא הדבר הרועש היחיד: מסגרת דיו של פיקסל אחד, בלי צל. */
.step.is-active { border-color: var(--ink); }

.step.is-locked .step-body { pointer-events: none; }

.step-head { margin-block-end: 14px; }

.step-title {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-title::before {
  content: counter(step);
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--chip);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step.is-active .step-title::before {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sf);
}

/* ‏"הושלם": ‏✓ על רקע דיו, והזוג מתהפך — כמו הכפתור הראשי. */
.step.is-complete .step-title::before {
  content: "\2713";
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sf);
}

.step-hint {
  color: var(--muted);
  font-size: 13px;
  margin-block-start: 6px;
  max-inline-size: 78ch;
}

.step-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-block-start: 6px;
}

.step-state:empty { display: none; }

/* ‏בשלבים 1..4 שורת המצב אינה מוצגת: כשהשלב פתוח הפקדים עצמם מראים את
   הערך, וכשהוא סגור אותו טקסט בדיוק יושב ב-‎.step-summary‎. היא נשארת
   ב-DOM כי היא ‎aria-live‎ — קורא מסך עדיין שומע כל שינוי. */
.step--stepper .step-state {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.step-body { display: flex; flex-direction: column; gap: var(--gap); }

/* ---- הכותרת היא הכפתור ----
   הכפתור יושב בתוך ה-h2 ותופס את כל רוחב הכותרת, כדי שאפשר יהיה ללחוץ
   על כל השורה ולא רק על המילה. עיגול המספר/ה-✓ נשאר על ‎.step-title::before‎
   ולכן כל כללי המצב ממשיכים לעבוד בלי שינוי. */
.step-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 8px;
  /* המרווח השלילי מחזיר את הכפתור לקו הכותרת המקורי אחרי הריפוד. */
  padding: 3px 6px;
  margin: -3px -6px;
  cursor: pointer;
}

.step-toggle:hover { background: var(--panel-2); }

.step-name { flex: none; }

/* שורת הסיכום קיימת תמיד ב-DOM (שם נגיש לכפתור), ונראית רק כשמקופל או נעול. */
.step-summary { display: none; }
.step-change { display: none; }

.step-caret {
  flex: none;
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.step-caret::before {
  content: "\25BE";
  display: block;
}

/* ---- שורה אחת: הושלם (מקופל) והבא (נעול) ---- */
.step--stepper.is-collapsed,
.step--stepper.is-locked { padding-block: 10px; }

.step--stepper.is-collapsed .step-head,
.step--stepper.is-locked .step-head { margin-block-end: 0; }

.step--stepper.is-collapsed .step-title,
.step--stepper.is-locked .step-title { font-size: 15px; font-weight: 600; }

.step--stepper.is-collapsed .step-hint,
.step--stepper.is-locked .step-hint { display: none; }

.step--stepper.is-collapsed .step-summary,
.step--stepper.is-locked .step-summary {
  display: block;
  flex: 1;
  min-inline-size: 0;
  /* סיכום ארוך נחתך ולא שובר את השורה — שורה אחת פירושה שורה אחת. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* הושלם: השם משני, הסיכום הוא העיקר, ו"שינוי" בסוף. */
.step--stepper.is-collapsed .step-name { color: var(--sec); }
.step--stepper.is-collapsed .step-summary { font-size: 14px; font-weight: 500; color: var(--ink); }
.step--stepper.is-collapsed .step-caret { display: none; }
.step--stepper.is-collapsed:not(.is-locked) .step-change {
  display: inline;
  flex: none;
  margin-inline-start: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ‏הבא: שורה מושתקת. הסיבה — "ממתין לבחירת קורסים" — נשארת כתובה, כי
   היא היחידה שאומרת מה חסר כדי להתקדם (שורת השבבים שאמרה את זה הוסרה).
   ‏‎--sec‎ ולא ‎--mut‎ לסיבה, כדי שתעמוד ב-AA. */
.step--stepper.is-locked .step-name { color: var(--mut); }
.step--stepper.is-locked .step-summary { font-size: 13px; font-weight: 400; color: var(--sec); }
.step--stepper.is-locked .step-title::before {
  content: counter(step);
  background: transparent;
  border-color: var(--mut);
  color: var(--mut);
}

/* שלב נעול לא ניתן לקיפול: אין בו עדיין מה לסכם. */
.step.is-locked .step-toggle { cursor: default; }
.step.is-locked .step-toggle:hover { background: none; }
.step.is-locked .step-caret { visibility: hidden; }

/* ---- פתיחה וסגירה ----
   ‏‎grid-template-rows: 0fr ↔ 1fr‎ מנפיש גובה בלי למדוד אותו ב-JS.
   ‏‎visibility‎ יורד רק בסוף הסגירה (השהיה של משך המעבר), ועולה מיד
   בפתיחה: גוף סגור יוצא מסדר ה-Tab ואינו לחיץ, כמו ‎display: none‎ שהיה
   כאן. ‏‎is-folding‎ (‏app.js) חותך את התוכן רק בזמן הפתיחה — חיתוך קבוע
   היה חותך גם את תוצאות החיפוש ואת טבעות המיקוד כשהשלב פתוח.
   ‏‎> ‎ הכרחי: ל-#catalog-browse ול-#electives יש גם הם class="step-body",
   והם יושבים **בתוך** גוף שלב 2. */
/* ‏‎minmax(0, 1fr)‎ לעמודה, לא רק לשורה: עמודת grid ברירת מחדל גדלה לפי
   התוכן, וטבלת המרצים (רחבה במכוון, נגללת בתוך המיכל שלה) דחפה את
   העמוד כולו ל-821px במסך של 390px. */
.step-fold {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(0, 1fr);
}

.step-fold > .step-body { min-block-size: 0; min-inline-size: 0; }

.step.is-collapsed > .step-fold,
.step.is-locked > .step-fold { grid-template-rows: 0fr; }

.step.is-collapsed > .step-fold > .step-body,
.step.is-locked > .step-fold > .step-body {
  overflow: hidden;
  visibility: hidden;
}

.step-fold.is-folding > .step-body { overflow: hidden; }

/* ‏רק אחרי פעולה של המשתמש/ת (‏‎.can-fold‎, ‏app.js). קיפול שקורה מעצמו
   בטעינה — שחזור מצב שמור — קופץ ישר למקומו. */
.steps.can-fold .step--stepper {
  transition: border-color .15s ease, padding var(--fold-time) var(--fold-ease);
}
.steps.can-fold .step--stepper .step-head { transition: margin-block-end var(--fold-time) var(--fold-ease); }
.steps.can-fold .step--stepper .step-title { transition: font-size var(--fold-time) var(--fold-ease); }
.steps.can-fold .step-fold { transition: grid-template-rows var(--fold-time) var(--fold-ease); }
.steps.can-fold .step-fold > .step-body { transition: visibility 0s linear 0s; }
.steps.can-fold .step.is-collapsed > .step-fold > .step-body,
.steps.can-fold .step.is-locked > .step-fold > .step-body {
  transition: visibility 0s linear var(--fold-time);
}

/* ‏הכלל הכללי בפרק 14 מקצר משכים אבל לא השהיות — וההסתרה כאן היא השהיה. */
@media (prefers-reduced-motion: reduce) {
  .steps { --fold-time: 0s; }
}

/* ‏"המשך" בתחתית השלב הפתוח (DESIGN.md, "General step behaviour", Flow).
   הוא בתוך ‎.step-fold‎, ולכן מתקפל ויוצא מסדר ה-Tab יחד עם הגוף. */
.step-next-row {
  display: flex;
  justify-content: flex-end;
  padding-block-start: 6px;
}
.step-next { min-inline-size: 7rem; }

/* ‏"שינוי": השלב שנפתח ממוסגר לרגע (Scroll behaviour, 2), ‏‎STEP_FLASH_MS‎
   ב-app.js. בלי תנועה המסגרת פשוט מופיעה ונעלמת. */
.step.is-flash {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  animation: step-flash 1.2s ease-out forwards;
}
@keyframes step-flash {
  0%, 55% { outline-color: var(--ink); }
  100% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .step.is-flash { animation: none; }
}

.note {
  font-size: 13px;
  color: var(--muted);
  max-inline-size: 78ch;
}

.note:empty { display: none; }

.resolved {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  align-self: flex-start;
}

.resolved:empty { display: none; }

.inline-warn {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 13px;
  border: 1px solid var(--warn-line);
  border-inline-start: 4px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 4px 12px;
}

.advanced-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 2px;
}

.advanced-body { padding-block: 6px 12px; display: flex; flex-direction: column; gap: 10px; }

/* ‏"הגדרות נוספות" סגור: שורה אחת עם מה שאינו ברירת מחדל. פתוח: הפקדים
   עצמם אומרים את זה, והשורה נעלמת. */
.advanced-values {
  font-weight: 500;
  color: var(--ink);
  margin-inline-start: .6em;
}
.advanced-values:empty,
details[open] > .advanced-summary > .advanced-values { display: none; }

.blocked { display: flex; flex-wrap: wrap; gap: 6px; }
.blocked:empty { display: none; }

/* ==========================================================================
   8. שלב 2 — רשימת הקורסים
   ========================================================================== */
.courses-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ‏פתק הזהב: התוכנית משבצת בסמסטר הזה קורסי בחירה או קורס כללי. */
.semester-note {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.semester-note::before { content: "\2726"; flex: none; }
.semester-note[hidden] { display: none; }
/* ‏"בכל סמסטר" — שורת מידע שקטה, לא פתק. */
.semester-info { margin: 0; }

/* ‏מונה הנ"ז החי, ליד תיבת החיפוש. */
.credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 1px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.credits-label { font-size: 12px; color: var(--muted); }
.credits-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ‏"מומלצים לסמסטר X" · "לפי תכנית הלימודים" · "סמנו הכל". */
.recommended-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-block-start: 4px;
}
.recommended-row[hidden] { display: none; }
.recommended-title { margin: 0; font-size: 15px; font-weight: 800; }
.recommended-sub { font-size: 13px; color: var(--muted); }
.recommended-row .link-btn { margin-inline-start: auto; }

.link-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn[hidden] { display: none; }

.search-results {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow);
  max-block-size: 17rem;
  overflow: auto;
}

.search-results > li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 8px 12px;
  cursor: pointer;
  border-block-end: 1px solid var(--line);
}

.search-results > li:last-child { border-block-end: 0; }
.search-results > li:hover,
.search-results > li[aria-selected="true"] { background: var(--accent-soft); }
/* ‏התוצאה שהחצים מסמנים (‏aria-activedescendant): הפוקוס נשאר בשדה, ולכן
   ‏הסימון הוא מסגרת דיו בתוך השורה ולא טבעת הפוקוס. */
.search-results > li.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--focus); }

.course-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* שורת אשכול בלי מספר קורס — קורס אמיתי שהשנתון מדפיס כ"חדש" ועוד לא
   הקצה לו מספר. אין לה תיבת סימון, ולכן גם אין לה את היישור של שורה
   שיש בה אחת. בלי כלל צבע כאן בכוונה: ``.note`` שבתוכה כבר מעומעמת,
   וכל צבע נכתב פעם אחת ב-:root. */
.course-row--note {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.course-item:hover { border-color: var(--accent); }
/* ‏כרטיס נבחר: צבע הקורס כפס בצד ההתחלה וכגוון — אותו צבע שיהיה לו
   במערכת (‏‎.cN‎ מגדיר ‎--ev-*‎, כמו לבלוקים ברשת). הטקסט עובר ל-‎--ev-fg‎,
   שנבדק מול הגוון, כי ‎--muted‎ אינו עומד עליו ב-AA בכל הצבעים. */
.course-item.is-selected {
  background: var(--ev-bg, var(--accent-soft));
  border-color: var(--ev-bd, var(--accent));
  color: var(--ev-fg, inherit);
}
.course-item.is-selected .course-code,
.course-item.is-selected .course-meta,
.course-item.is-selected .course-credits { color: var(--ev-fg, var(--muted)); }

.course-item.is-unavailable {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--dead-line);
}

.course-main { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; flex: 1; }
.course-title { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.course-name { font-weight: 600; }
.course-code { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.course-meta { font-size: 13px; color: var(--muted); }
.course-credits {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.course-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 3px; }

.tag {
  font-size: 13px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--chip);
  color: var(--muted);
  white-space: nowrap;
}

/* ‏קטגוריה, לא מצב. ירוק כאן אמר לעין "הכול בסדר" בזמן שלא דווח דבר.
   ‏"בתוכנית" הוא גם המקרה הרגיל — רוב מה שברשימה נמצא בתוכנית — ולכן
   הוא השקט מבין השניים, ו-‎.tag--out-plan‎ נשאר צבוע כי הוא החריג
   שכדאי לשים לב אליו. אלה בדיוק ערכי ‎.tag‎ הבסיסיים, כתובים במפורש
   כדי שהשקט יהיה החלטה ולא היעדר כלל. */
.tag--in-plan  { border-color: var(--line-strong); background: var(--chip); color: var(--muted); }
.tag--out-plan { border-color: var(--info-line); background: var(--info-bg); color: var(--info-ink); }
.tag--tied     { border-color: var(--tie-line);  color: var(--tie-line); background: transparent; }
.tag--warn     { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.tag--dead     { border-color: var(--err-line);  background: var(--err-bg);  color: var(--err-ink); }
/* ‏"חובה בהתמחות X": גלולה במתאר ‎--ink‎, נפרדת מ"קורס צמוד". */
.tag--spec     { border-color: var(--ink); background: transparent; color: var(--ink); }
.course-item.is-selected .tag--spec { border-color: var(--ev-fg); color: var(--ev-fg); }

/* ==========================================================================
   8א. שלב 2 — קורסי הבחירה
   ========================================================================== */
.electives-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-block-start: 8px; }
.electives-title { margin: 0; font-size: 15px; font-weight: 800; }
#electives-needs-spec[hidden] { display: none; }
.electives-head-notes { display: grid; gap: 4px; }
.electives-head-notes:empty { display: none; }
.elective-chip .tag--spec { font-size: 12px; }
.elective-chip.is-selected .tag--spec { border-color: var(--ev-fg); color: var(--ev-fg); }

.electives-groups { display: grid; gap: 6px; }
/* ‏כל אשכול הוא שורה אחת שנפתחת בלחיצה (DESIGN.md, "Elective clusters",
   2026-10-05). השורה היא ה-<button>; השבבים וההערות מתקפלים מתחתיה. */
.elective-cluster {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.elective-cluster.is-open { border-color: var(--line-strong); }
.elective-cluster-heading { margin: 0; font-size: inherit; font-weight: inherit; }
/* ‏שורה אחת תמיד: שם ארוך נשבר בתוך המקום שלו (‎min-inline-size: 0‎),
   ולא דוחף את הספירה לשורה שנייה. שום דבר אינו נחתך. */
.elective-cluster-head {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 8px;
  align-items: center;
  inline-size: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.elective-cluster-head:hover { background: var(--panel-2); }
.elective-cluster-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.elective-cluster-title { margin: 0; font-size: 14px; font-weight: 700; flex: 0 1 auto; min-inline-size: 0; }
.elective-cluster-head .elective-pill { flex: none; }
/* ‏"נבחרו N" / "N קורסים" בסוף השורה, ואחריו החץ. */
.elective-cluster-count {
  flex: none;
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.elective-cluster-count.is-picked { color: var(--ink); font-weight: 600; }
/* ‏צדדים פיזיים בכוונה: ימין ותחתית מסובבים ב-45° הם חץ למטה בכל כיוון
   כתיבה. ב-‎inline-end‎ החץ פנה הצידה בעמוד RTL. */
.elective-caret {
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 350ms cubic-bezier(.2, .8, .2, 1);
}
.elective-cluster.is-open .elective-caret { transform: rotate(-135deg) translateY(-2px); }
/* ‏הקיפול: אותה תנועה ואותו תזמון כמו השלבים (‎.step-fold‎). סגור = נחתך
   לגובה אפס, ו-app.js שם על הגוף ‎hidden="until-found"‎ (הוחלט 2026-10-05):
   לא מצויר, מחוץ לסדר ה-Tab ולעץ הנגישות, ו-Ctrl+F עדיין מוצא אותו ופותח את
   האשכול (beforematch). בזמן תנועת הסגירה, ובדפדפן בלי until-found, העטיפה
   ‏‎inert‎ במקום זה. */
.elective-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(.2, .8, .2, 1);
}
.elective-cluster.is-open > .elective-fold { grid-template-rows: 1fr; }
.elective-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-block-size: 0;
  overflow: hidden;
  padding-inline: 12px;
  transition: padding-block 350ms cubic-bezier(.2, .8, .2, 1);
}
.elective-cluster.is-open .elective-body { padding-block: 2px 12px; }
/* ‏‎hidden="until-found"‎ חייב להישאר מוצג: הדפדפן מסתיר אותו ב-‎content-visibility‎
   ‏ומחפש בו ב-Ctrl+F. הכלל הכללי ‎[hidden] { display: none !important }‎ היה
   ‏מוציא אותו גם מהחיפוש. */
.elective-body[hidden="until-found"] { display: flex !important; }
@media (prefers-reduced-motion: reduce) {
  .elective-fold,
  .elective-body,
  .elective-caret { transition: none; }
}
.elective-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}
/* ‏✓ טורקיז: נבחר קורס מהאשכול בסמסטר הזה (DESIGN.md, "Elective clusters"). */
.elective-pill-check {
  margin-inline-start: 5px;
  color: var(--brand-wise);
  font-weight: 800;
}
.elective-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.elective-chip {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  max-inline-size: 100%;
  font: inherit;
  font-size: 13px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.elective-chip:hover { border-color: var(--accent); }
.elective-chip.is-selected {
  background: var(--ev-bg);
  border-color: var(--ev-bd);
  color: var(--ev-fg);
}
.elective-chip.is-selected .course-code { color: var(--ev-fg); }
.elective-chip.is-static { cursor: default; color: var(--muted); border-style: dashed; }
.elective-chip-name { min-inline-size: 0; }
/* ‏"אפשר לקחת רק אחד מ-…": שורה אחת בצבעי פתק הזהב. */
.elective-cluster-note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-ink);
}
.elective-cluster-note::before { content: "\2726"; margin-inline-end: 6px; }

/* ==========================================================================
   9. שלב 3 — כפתורי ימי הלימוד
   ========================================================================== */
.days-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ‏מקום לתווית "מינימום" שמתחת לכפתור. רק כשיש מינימום, כדי שלא יישאר
   רווח ריק לפני הפתירה הראשונה. */
.days-row.has-min { padding-block-end: 18px; }

.day-btn {
  position: relative;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

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

.day-btn[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ‏מתחת למינימום: מקווקו ומושתק (docs/DESIGN.md, Study days) — ועדיין לחיץ.
   ההחלטה (2026-09-24): בחירתו היא הדרך היחידה אל האזהרה ואל "מה יאפשר
   N ימים". ‏‎--sec‎ ולא ‎--mut‎ לספרה, כי זה פקד פעיל וצריך AA. כשהוא
   נבחר, מצב הבחירה גובר: מילוי דיו, והקונפליקט נאמר באזהרה ובסימן השלב. */
.day-btn.is-impossible {
  border-style: dashed;
  /* ‏גם המסגרת היא הקצה היחיד של הפקד: ‎--line-strong‎ (‏--sec), ‏3:1 לפחות
     ‏(DESIGN.md, Quality floor, 9C). המקווקו הוא מה שמבדיל אותו. */
  border-color: var(--line-strong);
  color: var(--sec);
}

.day-btn.is-impossible[aria-checked="true"] {
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ‏"מינימום" — מתחת לכפתור, מחוץ לעיגול. חלק מהכפתור, ולכן גם חלק מהשם
   הנגיש שלו: "4 מינימום". */
.day-min-tag {
  position: absolute;
  inset-block-start: calc(100% + 3px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--sec);
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   10. שלב 4 — מרצים (docs/DESIGN.md, "Lecturers")
   בלי מקרא: הפקדים מסבירים את עצמם. עיגול מקווקו ריק = "לחצו לדירוג",
   עיגול מלא ממוספר = הדירוג (לכל סוג בנפרד). כל קורס הוא אקורדיון בצבע שלו
   — אותו צבע שיהיה לו במערכת — ורק אחד פתוח בכל פעם.
   ========================================================================== */

/* ---- "איפוס": קישור טקסט קטן בכותרת השלב ---- */
.step-reset {
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.step-reset:disabled { color: var(--mut); text-decoration: none; cursor: default; }
.step.is-collapsed .step-reset,
.step.is-locked .step-reset { display: none; }

/* ---- "N שיעורים ללא חובת נוכחות": גלולה שנפתחת, ושורה אחת ---- */
.attendance-off { display: flex; flex-direction: column; gap: 6px; }
.att-off > summary { list-style: none; }
.att-off > summary::-webkit-details-marker { display: none; }
.att-off-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  inline-size: fit-content;
  padding: 4px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--sf);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.att-off-pill::after { content: "\25BE"; font-size: 12px; color: var(--sec); }
.att-off[open] > .att-off-pill::after { content: "\25B4"; }
.attendance-off-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 0;
  padding-inline-start: 14px;
  font-size: 13px;
}
.att-off-line { margin: 0; }

/* ---- הקורס: אקורדיון עם פס צבע ---- */
.lect-courses { display: flex; flex-direction: column; gap: 8px; }

/* ‏‎overflow: clip‎ ולא ‎hidden‎: שניהם חותכים לפינות המעוגלות, אבל ‎hidden‎
   ‏הופך את הכרטיס למיכל גלילה, ו-‎sticky‎ של הראש שלו היה נעצר בו ולא במסך. */
.lect-course {
  border: 1px solid var(--bd);
  border-inline-start: 4px solid var(--ev-bd, var(--bd));
  border-radius: 10px;
  background: var(--sf);
  overflow: clip;
}

.lect-course-h { margin: 0; font-size: inherit; font-weight: inherit; }

/* ‏Scroll behaviour, 3: ראש הקורס הפתוח נדבק מתחת לכותרת הדקה (ובראש המסך
   ברחב) כל עוד שורות הקבוצות שלו נגללות. ‏sticky נעצר בגבולות הכרטיס, ולכן
   הוא יוצא יחד איתו כשהקורס נגמר. */
.lect-course.is-open > .lect-course-h {
  position: sticky;
  inset-block-start: var(--sticky-top);
  z-index: 4;
  background: var(--sf);
  border-block-end: 1px solid var(--ln);
}

.lect-course-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  inline-size: 100%;
  padding: 10px 14px;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
.lect-course-head:hover { background: var(--panel-2); }
/* ‏‎.lect-course‎ הוא ‎overflow: clip‎, והטבעת הרגילה (‏2px מחוץ לכפתור) נחתכה
   ‏בו כולה. בפנים היא נשארת גלויה (DESIGN.md, Quality floor, 9C). */
.lect-course-head:focus-visible { outline-offset: -2px; }
.lect-course-title { font-size: 14px; font-weight: 600; }
/* ‏‎--sec‎ ולא ‎--mut‎ (‏2026-10-12): קוד ונ"ז הם טקסט, ו-‎--mut‎ נתן 2.51:1. */
.lect-course-meta { font-size: 13px; color: var(--sec); }
/* ‏הסיכום החי — "לא דורג" / "עדיפות: A ← B" / "הרצאה: A ← B · תרגול: C" — בסוף השורה. */
.lect-course-end {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-inline-start: auto;
}
.lect-course-choice {
  font-size: 13px;
  font-weight: 500;
  color: var(--sec);
}
.lect-course-caret { flex: none; font-size: 12px; color: var(--sec); }
.lect-course-caret::before { content: "\25BE"; }
.lect-course.is-open .lect-course-caret::before { content: "\25B4"; }

.lect-course-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 14px 14px;
  border-block-start: 1px solid var(--ln);
}

/* ---- חובת נוכחות: מתג לכל סוג רכיב, ו-ⓘ אחד ---- */
.lect-attendance { display: flex; flex-direction: column; gap: 6px; padding-block-start: 8px; }
.att-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

.att-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
/* ‏הקלט עצמו נשאר קלט אמיתי (לחיץ, ממוקד, ‎data-fk‎) — שקוף, מעל המסילה. */
.att-switch input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 20px;
  margin: 0;
  appearance: none;
  cursor: pointer;
}
.att-switch-track {
  position: relative;
  flex: none;
  inline-size: 34px;
  block-size: 20px;
  border-radius: 999px;
  /* ‏‎--mut‎ ולא ‎--bd‎ לכבוי: ‏‎--bd‎ על ‎--sf‎ כמעט נעלם במצב כהה. */
  background: var(--mut);
  transition: background-color .15s ease;
}
.att-switch-track::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--sf);
  transition: inset-inline-start .15s ease;
}
.att-switch input:checked + .att-switch-track { background: var(--ink); }
.att-switch input:checked + .att-switch-track::after { inset-inline-start: 16px; }
.att-switch input:focus-visible + .att-switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

.info-btn {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--sec);
  cursor: pointer;
}
.info-btn:hover,
.info-btn[aria-expanded="true"] { color: var(--ink); }

.att-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 13px;
  color: var(--sec);
}
.att-info[hidden] { display: none; }
.lect-course-note { margin: 0; }

/* ---- טבלת הקבוצות ---- */
.lect-table-wrap { overflow-x: auto; }
.lect-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lect-table th,
.lect-table td {
  padding: 8px 10px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--ln);
  white-space: nowrap;
}
.lect-table th {
  background: var(--sf);
  font-weight: 600;
  color: var(--sec);
  font-size: 12px;
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}
.lect-table tbody tr { cursor: pointer; transition: background-color .12s ease; }
.lect-table tbody tr:hover > td { background: var(--panel-2); }

.lect-table .th-rank,
.lect-table .cell-rank { inline-size: 1px; padding-inline-end: 4px; }

/* ‏עיגול הדירוג. ריק ומקווקו = "לחצו לדירוג"; מלא בדיו = הדירוג. */
.rank-circle {
  display: inline-grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  /* ‏‎--line-strong‎ (‏--sec) מאז 9C: המקווקו הוא הקצה היחיד של העיגול הריק. */
  border: 1px dashed var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sf);
}
.rank-circle.is-ranked { border: 1px solid var(--ink); background: var(--ink); }
/* ‏כפתור הדירוג סביב העיגול (DESIGN.md, Quality floor, 9C): השורה עדיין
   ‏לחיצה כולה, והכפתור הוא מה שמגיעים אליו במקלדת. 24px לפחות, והטבעת עגולה. */
.rank-btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin: -1px;
  padding: 1px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.rank-btn[aria-disabled="true"] { cursor: default; }
.rank-btn:focus-visible { outline-offset: 1px; border-radius: 50%; }
/* ‏קפיצה קצרה כשדירוג ניתן: 250ms, ל-1.2 וחזרה. תנועה מופחתת — פרק 14. */
.rank-circle.is-pop { animation: rank-pop 250ms ease-out; }
@keyframes rank-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.2); }
}

.cell-lect { white-space: normal; min-inline-size: 9rem; }
.row-sub { font-size: 12px; margin-block-start: 2px; }
/* ‏הודעת הידיעון על הקבוצה ("הקורס מלא") — מתחת לשם המרצה. */
.group-status { color: var(--warn-ink); font-weight: 500; }

/* ‏שורה שלא משאירה מערכת אפשרית: מעומעמת בצבע ולא ב-opacity (החלטה
   ‏2026-09-24 — ‏tests/test_no_opacity_on_text.py). הכול ב-‎--mut‎, העיגול
   דהוי, ושורה "לא משאיר מערכת אפשרית" מתחת לשם. לא לחיצה. */
.lect-table tbody tr.is-dead,
.lect-table tbody tr[aria-disabled="true"] { cursor: not-allowed; }
.lect-table tbody tr.is-dead > td,
.lect-table tbody tr[aria-disabled="true"] > td { color: var(--mut); }
.lect-table tbody tr.is-dead:hover > td,
.lect-table tbody tr[aria-disabled="true"]:hover > td { background: none; }
.lect-table tbody tr.is-dead .rank-circle { border-color: var(--bd); }
.lect-table tbody tr.is-dead .group-status { color: var(--mut); }

/* קישור בין קבוצות — סמל אחד עם תיאור */
.link-badge {
  margin-inline-start: .4em;
  font-size: 12px;
  cursor: help;
  display: inline-block;
}

/* יום ושעה בתא אחד */
.when-line { display: flex; gap: .45em; align-items: baseline; }
.when-day { font-weight: 600; }

/* ==========================================================================
   11. שלב 5 — החלופות, המקרא, והרשת השבועית
   ‏החלופות (DESIGN.md, "Results page", 2–3; שלב 6, 2026-10-01): שורת כותרת
   וכרטיס לכל חלופה. הן החליפו את הלשוניות ואת טבלת "מה ההבדל?".
   ========================================================================== */
.alt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--gap);
  align-items: center;
}

.alt-title { margin: 0; font-size: 18px; font-weight: 800; flex: 1 1 auto; }

.alt-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.alt-sort-select { min-inline-size: 0; padding: 5px 8px; font-size: 13px; }

.alt-nav { display: inline-flex; align-items: center; gap: 6px; }
.alt-pos { font-size: 13px; color: var(--ink); min-inline-size: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }

.alt-step {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.alt-step:hover:not(:disabled) { border-color: var(--ink); }
.alt-step:disabled { color: var(--mut); border-color: var(--bd); cursor: default; }
.alt-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ‏חמישה כרטיסים בשורה; בטלפון השורה נגללת בתוך עצמה ולא העמוד. */
.alt-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: 2px;
}

.alt-card {
  flex: 1 0 9.5rem;
  min-inline-size: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  font: inherit;
  text-align: start;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.alt-card:hover { border-color: var(--line-strong); }

/* ‏הנבחר: מסגרת ‎--ink‎ (DESIGN.md, פריט 3), בעובי 2px — ופיקסל אחד פחות
   ריפוד, כדי שהבחירה לא תזיז את התוכן. בלי צל: DESIGN אוסר צללים. */
.alt-card.is-selected { border: 2px solid var(--ink); padding: 7px; }
.alt-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.alt-card-name { font-size: 13px; font-weight: 700; }
.alt-card-facts { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.alt-card-label { font-size: 13px; color: var(--muted); line-height: 1.35; }

/* השבוע בקטן: עמודה ליום, בלוקים בצבעי הקורסים, בלי טקסט. */
.mini {
  display: flex;
  gap: 2px;
  block-size: 3.5rem;
  padding: 2px;
  border-radius: 4px;
  background: var(--panel-2);
}

.mini-day { position: relative; flex: 1 1 0; }

.mini-ev {
  position: absolute;
  border-radius: 2px;
  background: var(--ev-bg);
  border: 1px solid var(--ev-bd);
  box-sizing: border-box;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend:empty { display: none; }

.legend-chip {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  background: var(--chip);
  border-color: var(--line-strong);
  color: var(--ink);
  line-height: 1.7;
}

/* ---- מיכל הגלילה: הרשת נגללת בתוך עצמה, העמוד עצמו לעולם לא ---- */
.grid-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}

.grid-scroll:empty { display: none; }

/* ---- הרשת עצמה ----
   dir="rtl" גורם לעמודה 1 (השעות) לשבת מימין, ואחריה ימים א..ו נפרשים שמאלה.
   grid-column = day + 1 ;  שורה 1 = כותרות ; כל שורה נוספת = 15 דקות. */
.grid {
  display: grid;
  grid-template-columns: var(--time-col) repeat(6, minmax(var(--day-min), 1fr));
  grid-template-rows: auto;
  grid-auto-rows: var(--slot-h);
}

.grid:empty { min-block-size: 8rem; }

.hd {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  padding: 7px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--chip);
  border-block-end: 1px solid var(--line-strong);
}

/* ‏Scroll behaviour, 5, מסך צר: ‎app.js‎ מזיז את שורת הימים (‎--hd-shift‎)
   כך שתשב מתחת לכותרת הדקה כל עוד הרשת על המסך. ברחב המשתנה אינו מוצב
   ו-‎sticky‎ שלמעלה עושה את העבודה בתוך התיבה. מסך בלבד. */
@media screen {
  #schedule-grid .hd { transform: translateY(var(--hd-shift, 0px)); }
}

/* עמודת השעות נשארת גלויה גם כשגוללים את הימים */
.tl {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--panel);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  border-block-start: 1px dotted var(--line);
  border-inline-end: 1px solid var(--line-strong);
  padding-block-start: 1px;
}

.tl.hour { border-block-start: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; }

.slot {
  border-block-start: 1px dotted var(--line);
  border-inline-start: 1px solid var(--line);
}

.slot.hour { border-block-start: 1px solid var(--line-strong); }

.ev {
  z-index: 1;
  margin: 1.5px;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* ‏13px היא רצפת הגופן בבלוק. בלוק לא מקטין את הטקסט ולא מוותר על
     שורה: גובה השעה גדל עד שכל שלוש השורות נכנסות (sizeGrid ב-app.js). */
  font-size: 13px;
  line-height: 1.25;
  background: var(--ev-bg, var(--chip));
  border-color: var(--ev-bd, var(--line-strong));
  color: var(--ev-fg, var(--ink));
}

.ev b { font-size: 13px; font-weight: 700; }

/* ‏שורות הבלוק אינן מתכווצות. בלי זה בלוק נמוך דוחס את הילדים שלו במקום
   לגלוש, ו-‏scrollHeight נשאר שווה ל-clientHeight — כלומר גלישה הייתה
   נחתכת בשקט במקום להימדד. */
.ev > * { flex-shrink: 0; }

/* ‏שלוש השורות (DESIGN.md, "Results page", 5): שם; סוג · שעה; מרצה · חדר.
   כל אחת נשברת לשורה נוספת אם צריך, ואינה נחתכת. */
.ev .ev-line { display: block; white-space: normal; overflow-wrap: anywhere; }

/* ‏מדידה: לרגע אחד כל בלוק בגובהו הטבעי, כדי ש-sizeGrid() יידע כמה מקום
   הוא צריך. המחלקה יורדת באותה משימה, לפני שהדף נצבע. */
.grid.is-measuring .ev { align-self: start; block-size: auto; }
.ev-room { font-weight: 600; }
.ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* עשרת גווני הקורסים — אותו מיפוי כמו render.py (c0 .. c9) */
.c0 { --ev-bg: var(--course-0); --ev-bd: var(--course-0-bd); --ev-fg: var(--course-0-fg); }
.c1 { --ev-bg: var(--course-1); --ev-bd: var(--course-1-bd); --ev-fg: var(--course-1-fg); }
.c2 { --ev-bg: var(--course-2); --ev-bd: var(--course-2-bd); --ev-fg: var(--course-2-fg); }
.c3 { --ev-bg: var(--course-3); --ev-bd: var(--course-3-bd); --ev-fg: var(--course-3-fg); }
.c4 { --ev-bg: var(--course-4); --ev-bd: var(--course-4-bd); --ev-fg: var(--course-4-fg); }
.c5 { --ev-bg: var(--course-5); --ev-bd: var(--course-5-bd); --ev-fg: var(--course-5-fg); }
.c6 { --ev-bg: var(--course-6); --ev-bd: var(--course-6-bd); --ev-fg: var(--course-6-fg); }
.c7 { --ev-bg: var(--course-7); --ev-bd: var(--course-7-bd); --ev-fg: var(--course-7-fg); }
.c8 { --ev-bg: var(--course-8); --ev-bd: var(--course-8-bd); --ev-fg: var(--course-8-fg); }
.c9 { --ev-bg: var(--course-9); --ev-bd: var(--course-9-bd); --ev-fg: var(--course-9-fg); }

/* ‏שבב מקרא שהוא כפתור (במקרא של שלב 5): מדגיש את הקורס ברשת. ‏aria-pressed
   הוא המצב שנקבע בלחיצה או בהקשה; הריחוף אינו משנה את השבב עצמו. */
/* ‎‏font: inherit‎ מאפס גם את line-height — ולכן הוא מוחזר כאן ל-1.7 של השבב. */
button.legend-chip { font: inherit; font-size: 13px; line-height: 1.7; cursor: pointer; }
button.legend-chip[aria-pressed="true"] { outline: 2px solid var(--ev-bd, var(--ink)); outline-offset: 1px; }
/* ‏אחרי aria-pressed: שבב נעוץ שבפוקוס מקלדת מראה את טבעת הפוקוס. */
button.legend-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* שבב מקרא צבוע באותם טוקנים */
.legend-chip.c0, .legend-chip.c1, .legend-chip.c2, .legend-chip.c3, .legend-chip.c4,
.legend-chip.c5, .legend-chip.c6, .legend-chip.c7, .legend-chip.c8, .legend-chip.c9 {
  background: var(--ev-bg);
  border-color: var(--ev-bd);
  color: var(--ev-fg);
}

/* ---- מצב "אין פתרון" ---- */
.empty {
  padding: 16px 18px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.empty-title { font-size: 15px; }
.empty-sub { font-size: 13px; margin-block-start: 4px; }

.reasons,
.suggestions { margin-block-start: 10px; display: flex; flex-direction: column; gap: 5px; }

.reasons > li,
.suggestions > li {
  font-size: 13px;
  padding-inline-start: 1.1em;
  position: relative;
}

.reasons > li::before { content: "\2716"; position: absolute; inset-inline-start: 0; }
.suggestions > li::before { content: "\2192"; position: absolute; inset-inline-start: 0; }

/* ==========================================================================
   12. תחתית
   ========================================================================== */
.app-footer {
  padding: 12px clamp(12px, 3vw, 28px) 20px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.app-footer-line { margin: 0; line-height: 1.5; }
.app-footer-line:empty { display: none; }

.app-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer a:hover,
.app-footer a:focus-visible { color: var(--ink); }

/* ==========================================================================
   13. מסכים צרים — הרשת נשארת קריאה ונגללת בתוך המיכל שלה
   ========================================================================== */
@media (max-width: 640px) {
  :root { --slot-h: 20px; --time-col: 3.6rem; --day-min: 7.5rem; }
  .app-header { padding-block: 12px; }
  .header-side { inline-size: 100%; justify-content: space-between; }
  .brand-title { font-size: 23px; }
  .brand-icon { inline-size: 30px; block-size: 30px; }
}

@media (max-width: 380px) {
  :root { --day-min: 7rem; }
  .day-btn { inline-size: 2.6rem; block-size: 2.6rem; font-size: 15px; }
}

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

  .busy-bar > span { animation: none; inline-size: 100%; opacity: .6; }
}

/* ==========================================================================
   15. הדפסה — הרשת בלבד
   ========================================================================== */
/* ‏margin: 0 ואחריו ריפוד פנימי, ולא שוליים ב-@page: כשיש שוליים, הדפדפן
   מצייר בתוכם כותרת עליונה ותחתונה משלו — תאריך, כתובת הדף ומספור. אין
   ‏CSS שמכבה אותן, אבל בלי שוליים אין להן מקום להיכתב בו. הריפוד מחזיר
   את המרווח הוויזואלי, ובו־בזמן הוא זה שנבלע בשוליים שהמדפסת לא יכולה
   להדפיס — במקום שהמערכת עצמה תיחתך.

   ‏לאורך, לא לרוחב (DESIGN.md, "Results page", Print — 2026-09-30): שבוע
   שלם עם שלוש שורות בכל בלוק נכנס לעמוד לאורך בגופן גדול יותר מאשר לרוחב.
   נמדד על הנדסת תוכנה סמסטר 5: ‎10.5px לאורך, ו-10px לרוחב רק בקיצוץ
   כותרת היום הריק. */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  /* ‏הצבעים באים מ-‎--print-*‎ בפרק 1, ולא נכתבים כאן שוב. הגושים הכהים
     עטופים ב-‎screen‎, ולכן במצב כהה הדף פשוט נופל חזרה לערכי ‎:root‎
     הבהירים — ואין צורך לדרוס כאן את עשרת צבעי הקורס. */
  :root {
    --bg: var(--print-bg);
    --sf: var(--print-panel);
    --ln: var(--print-line);
    --bd: var(--print-line);
    --sec: var(--print-muted);
    --mut: var(--print-line-strong);
    --panel: var(--print-panel);
    --panel-2: var(--print-panel-2);
    --chip: var(--print-chip);
    --ink: var(--print-ink);
    --muted: var(--print-muted);
    --line: var(--print-line);
    --line-strong: var(--print-line-strong);
    --accent: var(--print-accent);
    --accent-ink: var(--print-accent-ink);
    --accent-soft: var(--print-accent-soft);
    --shadow: none;
    --shadow-sm: none;
    --slot-h: 17px;
    --time-col: 4rem;
    --day-min: 0;
  }

  body { background: #ffffff; font-size: 11.5px; padding: 8mm; }

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

     היתר, לא איסור. הגרסה הקודמת מנתה מזהים להסתרה, וכך כל אלמנט חדש
     דלף אל הנייר בשקט: שורת ההתקדמות וכפתור הבנייה היו כל תוכנו של
     העמוד המודפס הראשון, והמערכת עצמה התחילה בעמוד השני. רשימה
     שמתארת מה **כן** מודפס אינה יכולה לשכוח. */
  body > *:not(.steps) { display: none !important; }
  .steps > *:not(#step-schedule) { display: none !important; }
  #step-schedule > .step-head { display: none !important; }
  #step-schedule > .step-body > *:not(#grid-scroll):not(#print-head) {
    display: none !important;
  }

  /* שורת הכותרת: שם המערכת ותאריך, שורה אחת.
     ‏#id ולא .class: כלל ההסתרה למסך יושב בהמשך הקובץ, ובמפורש שווה לו
     ‏(0,1,0) — הוא היה מנצח בסדר. עוצמה גבוהה יותר, לא הסתמכות על מיקום. */
  #print-head {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #000;
  }

  .steps { padding: 0; gap: 0; max-inline-size: none; }

  #step-schedule {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #step-schedule .step-title::before { display: none; }
  /* שלב 5 אינו מתקפל, ובכל זאת: הדף המודפס הוא רק הוא, ודף ריק בגלל
     class שנשאר תקוע אינו כשל שרוצים לגלות מול המדפסת. */
  #step-schedule > .step-body { display: flex !important; }
  .step-caret { display: none !important; }
  .step-head { margin-block-end: 8px; }

  .grid-scroll {
    overflow: visible;
    border: 1px solid var(--line-strong);
    border-radius: 0;
  }

  .grid { grid-template-columns: var(--time-col) repeat(6, 1fr); }

  .hd,
  .tl { position: static; }

  .ev,
  .hd,
  .tl,
  .legend-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   16. שלב 1 של השכתוב — פעולה ראשית, פרטים טכניים, חובת נוכחות
   ========================================================================== */

/* הפעולה הראשית היחידה של מסך ההגדרות. */
.build-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--gap);
  align-items: baseline;
  padding: 0 clamp(12px, 3vw, 28px);
  max-inline-size: 1180px;
  margin-inline: auto;
}

/* ‏מלא ‎--ink‎ עם טקסט ‎--sf‎ בשני המצבים, ו-‎--ink-hover‎ בריחוף (DESIGN.md,
   Scroll behaviour, 4). הכפתור שבעמוד והכפתור שבסרגל התחתון זהים. */
.btn-build {
  font-size: 15px;
  padding: 10px 22px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sf);
}
.btn-build:hover:not(:disabled) {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  filter: none;
}

/* ‏"פרטים טכניים" — מקופל, שקט, ובתחתית. */
.tech-details {
  max-inline-size: 1180px;
  margin: 0 auto 24px;
  padding: 0 clamp(12px, 3vw, 28px);
  color: var(--muted);
  font-size: 13px;
}

.tech-summary { cursor: pointer; font-weight: 600; padding: 6px 2px; }
.tech-body { display: flex; flex-direction: column; gap: 10px; padding-block: 8px; }

.tech-facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.tech-facts:empty { display: none; }

/* שורות יומן בתוך באנר תקלה — מקוצרות, ניתנות לגלילה, וקריאות. */
.banner-more-log {
  margin: 0;
  max-block-size: 12rem;
  overflow: auto;
  font-family: ui-monospace, "Consolas", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ==========================================================================
   17. התוצאה — שורת ההגדרות, שבבי הנתונים, ומה הוריד מההתאמה
   ‏DESIGN.md, "Results page", פריטים 1 ו-4 (2026-09-30). מחליף את כותרת
   ההתאמה, את אריחי העובדות ואת פסי הקנסות.
   ========================================================================== */

/* ---- שורת ההגדרות: שבב לכל שלב, ו"עריכת ההגדרות" בסופה ---- */
.settings-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.settings-pill {
  font-size: 13px;
  line-height: 1.5;
  padding: 3px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
}

/* קישור טקסט, כמו "איפוס" בכותרת שלב המרצים — לא כפתור נוסף בשורה. */
.settings-edit {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.settings-edit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- שבבי הנתונים ---- */
.stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats:empty { display: none; }

.stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-pill[title] { cursor: help; }

/* ‏ההתאמה ראשונה, ובקו ‎--ink‎: היא מה שהמערכות מדורגות לפיו. */
.stat-pill.fit { border-color: var(--ink); }

.fit-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.fit-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ‏המערכת המדורגת ראשונה נושאת משפט במקום מספר. ‏700 ולא 600 — Heebo
   מגיע במשקלים האלה, אבל עברית ולטינית באותו שבב צריכות אותו משקל. */
.fit-value--best {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: normal;
}

.fit-note { font-size: 13px; color: var(--muted); }

/* ---- מה הוריד מההתאמה: שורה אחת ---- */
.fit-lost {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ‏מה כל רכיב מודד יושב בתווית ההצפה; קו תחתון מנוקד אומר שיש שם משהו. */
.fit-lost-item[title] {
  color: var(--ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

/* ---- תמרור "קבוצה מלאה", בכל מקום שאומר שקבוצה מלאה (app.js, warnSign) ----
   ‏בגובה הטקסט, על קו הבסיס שלו, והמרווח בצד שפונה אל הטקסט (inline-end, כלומר
   ‏משמאל ב-RTL). ‏overflow: visible — קו המתאר לא נחתך בקצה ה-viewBox. */
.warn-sign {
  display: inline-block;
  width: 1.1em;
  height: 1em;
  vertical-align: -0.14em;
  margin-inline-end: 0.3em;
  overflow: visible;
}
.warn-sign-tri {
  fill: var(--warn-sign-fill);
  stroke: var(--warn-sign-ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.warn-sign-mark { fill: var(--warn-sign-ink); }
/* ‏התמרור והמילה הראשונה אינם נפרדים בשבירת שורה (app.js, withWarnSign). */
.warn-sign-join { white-space: nowrap; }

/* ---- קבוצות מלאות בחלופה הנבחרת: שורה אחת מתחת לנתונים ----
   ‏--warn-ink, כמו מצב הקבוצה בשלב המרצים (.group-status): זו אותה עובדה. */
.fit-full {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warn-ink);
}

/* ---- קורס בלי מועד קבוע, מתחת למקרא ---- */
.unscheduled {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ==========================================================================
   18. נוסח חסר — נראה כתקלה, לא כעיצוב
   ========================================================================== */

/* ‏T() מחזיר ⟦path⟧ למפתח חסר, ו-markMissingStrings() ב-app.js מסמן את
   האלמנט שמכיל אותו. הכלל הזה עושה את התקלה בלתי אפשרית לפספוס: עד כה
   נוסח חסר נראה כתווית ריקה או כמילה "compactness", ושתיהן נקראות כמו
   עיצוב — כך אפשר היה לשלוח עמוד שלם בלי שאיש ישים לב. */
.missing-string {
  outline: 2px dashed var(--dead-line);
  background: var(--err-bg);
  color: var(--err-ink);
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 13px;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   20. שלב 4 — הרשת: פחות טקסט בבלוק, יום ריק צר, ופאנל פרטים
   ========================================================================== */

:root { --day-empty: 3.2rem; }

/* ---- הבלוק ---- */
/* ‏<button> ולא <div>, ולכן צריך לאפס את מראה הכפתור ולהשאיר את הפריסה. */
/* ‏<button> מביא גופן משלו, ולכן צריך לאפס אותו — אבל ‏font: inherit
   הוא קיצור שדורס גם את ה-font-size שנקבע למעלה, ואז גודל הטקסט בבלוק
   נקבע במקרה. רק המשפחה יורשת; המידה נשארת מוצהרת במקום אחד. */
.ev {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
  inline-size: auto;
}

/* ‏"אם זה לא נכנס, זה לא שייך לבלוק": אין חיתוך בשלוש נקודות. שורה
   שאין לה מקום נשברת לשורה נוספת, והשעה גדלה בהתאם — שום דבר אינו נחתך.
   שעה שנקטעה ל-"10:30–12:2" נראית שלמה, וזה בדיוק מה שהופך אותה למסוכנת:
   חדר "F 506" הוא חדר קיים אחר. לכן כל חלקי השורות נשברים ולא נחתכים. */
.ev span { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.ev b,
.ev .ev-kind,
.ev .cell-time,
.ev .ev-lect,
.ev .ev-room,
.ev .ev-room-note,
.ev .ev-full { white-space: normal; overflow-wrap: anywhere; }

.ev:hover { filter: brightness(1.06); }

/* ‏הבלוק שפרטיו פתוחים: קו מתאר בצבע הקורס (DESIGN.md, פריט 8). לפני
   ‎:focus-visible‎, כדי שטבעת הפוקוס תגבר כשהבלוק גם בפוקוס. */
.ev.is-selected { outline: 2px solid var(--ev-bd); outline-offset: 1px; }

.ev:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ‏הדגשה מהמקרא (פריט 7): הבלוקים של שאר הקורסים מאפירים — בצבע, לא
   ב-opacity. מילוי ומסגרת בטוקנים ניטרליים וטקסט ב-‎--mut‎, כמו קבוצה
   מעומעמת בשלב המרצים (‎.lect-table tr.is-dead‎). */
.ev.is-muted {
  background: var(--chip);
  border-color: var(--bd);
  color: var(--mut);
  filter: none;
}

.ev.is-muted .ev-badge { background: var(--chip); border-color: var(--bd); color: var(--mut); }

.ev { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* תג החפיפה. הוא יושב על כל אחד משני הבלוקים בחצי הרוחב — לא על
   בלוק ממוזג, שכבר אינו קיים. */
.ev-badge {
  /* ‏בסוף השורה השנייה, לא שורה רביעית משלו. */
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 4px;
  line-height: 1.2;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid var(--warn-line);
}

/* שורת הכותרת של הדף המודפס — קיימת רק על הנייר. על המסך אותו מידע
   כבר נמצא בכרטיסי החלופות ובכותרת הסעיף. */
.print-head { display: none; }

/* ---- יום ריק ---- */
.hd.is-empty { color: var(--muted); }
.hd.is-empty { font-size: 13px; }
.hd-empty { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.slot.is-empty { background: var(--panel-2); }

/* ---- כלי הרשת: מקרא ומתג השעות ---- */
.grid-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--gap);
  align-items: flex-start;
}

/* ‏המקרא ושורת "ללא מועד קבוע" מימין, ופאנל הפרטים לצדם (DESIGN.md,
   "Layout": legend | lesson details). במסך צר הם נערמים. */
.grid-tools-main { flex: 1 1 22rem; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.grid-tools > .detail { flex: 0 1 22rem; min-inline-size: 16rem; }

.grid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  flex: none;
}

.legend-chip--overlap {
  border-style: dashed;
  border-color: var(--warn-line);
  color: var(--warn-ink);
  background: var(--warn-bg);
}

/* ---- פאנל הפרטים ---- */
.detail {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail:focus { outline: none; }
.detail-head { display: flex; align-items: center; gap: var(--gap); }
.detail-title { font-size: 14px; flex: 1; }
.detail-body { display: flex; flex-direction: column; gap: 10px; }

.detail-item {
  border-inline-start: 4px solid var(--ev-bd, var(--line-strong));
  padding-inline-start: 10px;
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: 2px 12px;
  margin: 0;
  font-size: 13px;
}

.detail-list dt { color: var(--muted); font-size: 13px; }
.detail-list dd { margin: 0; }
/* ‏הרווח בין שם הקורס לקוד שלו — על השם, בצד שפונה אל הקוד. השם בתוך שורה
   ‏RTL, ולכן ‎inline-end‎ שלו הוא הצד השמאלי, שם יושב הקוד. על ‎.detail-code‎
   ‏(‎<bdi dir="ltr">‎) ‎margin-inline-start‎ נחת בקצה השמאלי שלו, הרחוק מהשם,
   ‏והשניים נצמדו (DEFERRED.md, נסגר 2026-10-05). */
.detail-name { margin-inline-end: .5em; }
.detail-code { color: var(--muted); font-size: 13px; }

.detail-overlap {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid var(--warn-line);
}

/* במסך צר הפאנל הופך לגיליון תחתון. */
@media (max-width: 700px) {
  .detail {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 75;
    border-radius: var(--radius) var(--radius) 0 0;
    max-block-size: 70vh;
    overflow: auto;
    /* ‏כאן הפאנל צף מעל הדף, והצל הוא מה שמפריד ביניהם. ליד המקרא אין צל. */
    box-shadow: var(--shadow);
  }
}

/* ‏מזהה לטיני בתוך שורה עברית — חדר, קבוצה, קוד קורס.
   ‏dir="ltr" יושב על האלמנט עצמו (ראו ltrCode ב-app.js); כאן רק הבידוד,
   כדי שהרצף לא יתערבב עם הטקסט שסביבו. */
.code {
  unicode-bidi: isolate;
  direction: ltr;
}

/* גם בהדפסה — הדף המודפס הוא המקום שבו קוד חדר הפוך עולה הכי ביוקר. */
@media print {
  .code,
  .cell-time,
  .gid { direction: ltr; unicode-bidi: isolate; }
}

/* ==========================================================================
   21. שלב 5 — מצב הסעיפים ורוחב שדות
   ========================================================================== */

/* ---- הסימון על הסעיף: שלושה מצבים, לא אחד ---- */
/* ‏✓ ירוק שמופיע על כל סעיף מהרגע הראשון אינו נושא מידע. מתאר ריק =
   ברירת מחדל, ‏✓ = נבחר, ‏! = יש בעיה שדורשת החלטה. */
.step.is-default .step-title::before {
  content: counter(step);
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
}

.step.is-conflict .step-title::before {
  content: "!";
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn-ink);
}

.step.is-conflict { border-color: var(--warn-line); }

/* ‏שלב שאושר ב"המשך" הוא ‏✓ גם כשהערכים בו הם ברירת המחדל — מרצים בלי
   דירוג, למשל. ההשלמה באה מהלחיצה, לא מהערכים (DESIGN.md, Flow). */
.step.is-complete.is-default .step-title::before {
  content: "\2713";
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sf);
}

/* ---- שדות לפי תוכן, לא ברוחב מלא ---- */
.field--sm { flex: 0 1 8rem; }
.field--md { flex: 0 1 13rem; }
.field--lg { flex: 0 1 22rem; }

/* ---- התמחות ומסלול (DESIGN.md, "Program, year and semester") ----
   ‏שורה שנייה בשלב 1, מתחת למסלול/שנה/סמסטר. תיבה שמוצגת היא חובה, ולכן
   מסגרת ‎--ink‎ כמו הפקד הפעיל — ולא ‎--line-strong‎ של שאר התיבות. */
.track-row { margin-block-start: var(--gap); }
.input--required { border-color: var(--ink); }
.track-deadline { margin-block-start: 6px; }

/* ==========================================================================
   22. תיקוני שלב 4 — סוג השיעור בבלוק, וחפיפה כשני חצאים
   ========================================================================== */

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

   ‏.ev .ev-kind ולא .ev-kind: הכלל ‎.ev span‎ הוא (0,1,1) ומנצח מחלקה
   בודדת בכל סדר. הצירוף נשאר גם אחרי ש-‎opacity‎ ירדה משתי השורות, כי
   הוא עדיין מה שמאפשר לכלל הזה לגבור על ‎.ev span‎. */
.ev .ev-kind {
  font-size: 13px;
  font-weight: 600;
}

/* שם המרצה, מלא. ‏13px כמו החדר והשעה ולא קטן מהם: לפי המרצה בוחרים,
   ולכן אין סיבה שיהיה הקשה ביותר לקריאה. שם ארוך נשבר לשתי שורות — עדיף
   מקוצר. */
.ev .ev-lect { font-size: 13px; }

/* ‏קבוצה מלאה, בסוף השורה השלישית (DESIGN.md, "Results page", 5): משקל,
   לא צבע — הצבע של הבלוק שייך לקורס. */
.ev .ev-full { font-weight: 700; }

/* חפיפה מכוונת: שני בלוקים זה לצד זה, כל אחד בחצי רוחב, ולכל אחד
   המסגרת המקווקוות שלו. מיזוג לבלוק אחד הסתיר אילו קורסים מתנגשים. */
.ev.is-soft {
  outline: 2px dashed var(--warn-line);
  outline-offset: -3px;
}

/* ‏בלוק חופף שפרטיו פתוחים מקבל את קו הבחירה בצבע הקורס, וכשהוא בפוקוס —
   את טבעת הפוקוס. בלי שני הכללים האלה הקו המקווקו גבר על שניהם (הוא בא
   מאוחר יותר בקובץ), והבחירה והפוקוס על בלוק חופף לא נראו. הקו המקווקו
   חוזר כשהבחירה מתבטלת. */
.ev.is-soft.is-selected { outline: 2px solid var(--ev-bd); outline-offset: 1px; }
.ev.is-soft:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ‏כאן עמד עד 2026-09-30 ‎.ev .ev-kind { display: block }‎ בהדפסה, כדי
   שסוג השיעור לא יירד מהנייר. שום שורה אינה יורדת עוד, והסוג יושב בתוך
   השורה השנייה לצד השעה — ‎display: block‎ היה שובר אותה לשתיים. */

/* ‏קוד חדר אינו נשבר באמצע: "L 706" נשאר בשורה אחת. מה שאחרי הקוד — "מע'
   רשתות" — עדיין רשאי להישבר, ולכן הוא אלמנט נפרד (ראו roomNode ב-app.js). */
.ev .ev-room .code--id { white-space: nowrap; overflow-wrap: normal; }

/* ‏החריג היחיד לרצפת ה-13px: גופן הבלוקים **בהדפסה בלבד** יורד בצעדים של
   ‎0.5px, עד 10px, עד שהשבוע נכנס לעמוד אחד. ‎fitGridToPage()‎ ב-app.js
   קובע את ‎--ev-font-print‎ על הרשת; בלעדיו הגופן נשאר 13px. על המסך
   הכלל הזה אינו חל. ‎.grid .ev *‎ ולא ‎.ev *‎: ‎.ev .ev-kind‎ ו-‎.ev .ev-lect‎
   הם (0,2,0), והכלל הזה צריך לגבור עליהם. */
@media print {
  .grid .ev,
  .grid .ev * { font-size: var(--ev-font-print, 13px); }

  /* ‏הדגשה מהמקרא וקו הבחירה הם עזרי מסך. על הנייר כל קורס בצבעו (המקרא
     שהיה מסביר את האפור אינו מודפס), ואין בלוק "נבחר". הקו המקווקו של
     חפיפה מכוונת נשאר — הוא מידע. */
  .ev.is-muted {
    background: var(--ev-bg);
    border-color: var(--ev-bd);
    color: var(--ev-fg);
  }

  .ev.is-selected { outline: none; }
  .ev.is-soft,
  .ev.is-soft.is-selected { outline: 2px dashed var(--warn-line); outline-offset: -3px; }
}


/* ==========================================================================
   23. ויתורים נמדדים — מצב "אין פתרון"
   ========================================================================== */

.relax { margin-block-start: 14px; }
.relax-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.relax-intro { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

.relax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  margin-block-end: 6px;
}

.relax-what { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.relax-what b { font-size: 13px; }

/* ‏זוג: שתי שורות וסוגר. הסוגר הוא גבול בצד ההתחלה — בעברית זהו הצד
   הימני — ולא תו סוגריים, כדי שהוא יימתח לגובה שתי השורות בכל גופן. */
.relax-pair {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--accent);
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
}
.relax-pair-line { font-size: 13px; font-weight: 700; }
.relax-pair-both {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-block-start: 2px;
}

.relax-opens { font-size: 13px; font-weight: 600; }
.relax-opens.is-quiet { font-weight: 400; color: var(--muted); }
.relax-cost { font-size: 13px; color: var(--muted); }
.relax-checked { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* הסיבות שמתקפלות: הראשונה גלויה, השאר בגילוי. */
.reasons-more-wrap { list-style: none; margin-inline-start: -1em; }
.reasons-more summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
}
.reasons-more[open] summary { margin-block-end: 4px; }

/* הודעת הביטול — לא במצב הריק, שנעלם ברגע שיש תוצאות. */
.relax-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--chip);
  font-size: 13px;
}
.relax-undo-text { color: var(--ink); }

@media print {
  .relax, .relax-undo { display: none !important; }
}


/* ---- שלב 3: מה יאפשר את יעד הימים ---- */
.days-relax { margin-block-start: 10px; }
/* ‏h3 מאז 9C (היה h4 ישר מתחת ל-h2); ‏line-height נשאר של הגוף, כמו קודם. */
.days-relax-title { margin: 0 0 3px; font-size: 13px; font-weight: 700; line-height: inherit; }
.days-relax-intro { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.days-relax-list { margin: 0; padding: 0; list-style: none; }
.days-relax-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  margin-block-end: 4px;
  font-size: 13px;
}
.days-relax-count { font-weight: 600; white-space: nowrap; }
.days-relax-count.is-quiet { font-weight: 400; color: var(--muted); }

@media print { .days-relax { display: none !important; } }

.days-relax-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* הסתייגות בתוך באנר — שורה שנייה, מושתקת. */
.banner-note {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  margin-block-start: 2px;
}

/* שורת המצב של החישוב: טקסט, ולידו דרך לצאת. */
#schedule-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#schedule-note:empty { display: none; }

/* ==========================================================================
   22. הפריסה הרחבה — DESIGN.md, "Layout" ו-Phase 7 (‏≥1200px), חלק א׳
   השלבים בעמודה של כ-400px בצד ההתחלה (ימין), והמערכת בשאר הרוחב:
   עמודה דביקה בגובה המסך בדיוק — כותרת, כרטיסים, שבבים, הרשת, מקרא.

   ‏‎@media screen‎ ולא רוחב בלבד: הדפסה מחלון רחב אינה פריסה רחבה. כך שום
   כלל כאן אינו מגיע לנייר, וההדפסה נשארת בדיוק כפי שהייתה (DESIGN.md,
   ‏"Print"). ‏app.js שואל את אותו תנאי בדיוק (WIDE_QUERY).
   ========================================================================== */

/* ‏יום ו׳ ריק: במסך צר ועל הנייר — העמודה הצרה של תמיד. */
:root { --day-empty-fri: var(--day-empty); }

/* ‏"מעדכן…" והשבוע הריק קיימים רק בפריסה הרחבה. */
.alt-updating { display: none; }
.week-empty { display: none; }

@media screen and (min-width: 1200px) {
  :root {
    /* צעד 1 של סדר ההתאמה: ליום ו׳ ריק אין עמודה. */
    --day-empty-fri: 0px;
    --wide-steps: 400px;
    /* ‏הכותרת נגללת עם העמוד, ולכן מה שנדבק נדבק לראש המסך. */
    --sticky-top: 0px;
  }

  /* ‏הכותרת נגללת עם העמוד; העמודה של המערכת היא שנדבקת. */
  .app-header { position: static; }

  /* ‏השלבים על המסך והמערכת תמיד עדכנית: אין כפתור בנייה, אין סרגל תחתון
     ‏ואין שורת הגדרות. הכותרת אינה מתכווצת ואין בה מספר שלב. */
  .build-row,
  .bottom-bar,
  .header-step,
  .app-header-spacer,
  .settings-pills { display: none !important; }

  /* ‏שתי עמודות. השורה האחרונה, ‎1fr‎, היא שסופגת את גובה המסך של עמודת
     המערכת — בלעדיה הגובה הזה היה מתחלק בין שורות השלבים ופותח רווחים
     ביניהם. ארבע שורות: ‎#build-row‎ מוסתר ואינו פריט ברשת. */
  .steps {
    display: grid;
    grid-template-columns: var(--wide-steps) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 1fr;
    align-items: start;
    gap: 8px 20px;
    max-inline-size: none;
  }

  .steps > .step--stepper { grid-column: 1; min-inline-size: 0; }

  /* ‏עמודה דביקה אינה יוצאת מאזור הרשת שלה, ולכן כל מה שמתחת ל-‎.steps‎ —
     הריפוד התחתון והתחתית — דחף אותה מעלה בסוף העמוד (‎91px‎ ב-1440×900;
     עם שלב אחד פתוח מגיעים לסוף העמוד כל הזמן). ברחב אין דבר מתחתיה:
     בלי ריפוד תחתון, התחתית יושבת בתחתית עמודת השלבים, והמקום שלה שמור
     בתוך הרשת — 40px הרווח שהיה, ועוד גובה התחתית (‎--footer-room‎,
     נמדד ב-app.js, כי הטקסט שלה ושבירת השורות משתנים). */
  body { position: relative; }
  .steps { padding-block-end: 0; }
  #step-lecturers { margin-block-end: calc(40px + var(--footer-room, 0px)); }
  /* ‏הרוחב: השוליים החיצוניים, עמודת השלבים והרווח בין העמודות (20px),
     בלי ריפוד צד — כדי שהשורה של מצב האירוח (‎427px‎) תישאר שורה אחת. */
  .app-footer {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: calc(clamp(12px, 3vw, 28px) + var(--wide-steps) + 20px);
    padding-inline: 0;
  }

  #step-schedule {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    padding-block: 12px;
  }

  /* ‏כותרת השלב אינה מוצגת, אבל נשארת לקורא מסך: ה-h2 הוא שם הסעיף
     ‏(aria-labelledby), ו-‎#step-schedule-state‎ הוא אזור חי. */
  #step-schedule > .step-head {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: 0;
  }

  /* כל חלק שומר על הגובה שלו; הרשת לוקחת את מה שנשאר. */
  #step-schedule > .step-body {
    flex: 1 1 auto;
    min-block-size: 0;
    gap: 10px;
  }

  #step-schedule > .step-body > * { flex: none; }

  /* ‏צעד 4: כשהשבוע גבוה מהתיבה, הרשת נגללת בתוכה. ‏.hd כבר sticky ביחס
     למיכל הזה, ולכן שורת הימים נשארת נעוצה. ‏scrollbar-gutter: גלילה
     שמופיעה לא מצרה את העמודות, ולכן גם לא משנה את גובה השעה. */
  #step-schedule > .step-body > #grid-scroll {
    flex: 0 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* ‏אין פתרון, חפיפות וביטול ויתור יושבים במקום הרשת; כשהם ארוכים
     מהתיבה, הם נגללים בתוכה ולא דוחפים את המקרא מהמסך. */
  #step-schedule > .step-body > #schedule-empty,
  #step-schedule > .step-body > #soft-conflicts {
    flex: 0 1 auto;
    min-block-size: 0;
    overflow-y: auto;
  }

  /* ‏צעד 1: יום ו׳ ריק אינו מוצג, וכותרת הימים היא שורה אחת. ‏"אין
     שיעורים" נשאר ב-DOM וב-title; העמודה המוצללת אומרת אותו דבר. */
  #schedule-grid > .is-fri { display: none; }
  #schedule-grid .hd-empty { display: none; }
  #schedule-grid .hd { white-space: nowrap; }

  /* ‏שורת הכותרת: "5 מערכות מובילות", ולידה "מעדכן…" בזמן חישוב. */
  .alt-title { flex: none; }
  /* ‏‎--sec‎ ולא ‎--mut‎ מאז 9C (‏2026-10-12): ‏--mut נתן 2.51:1. */
  .alt-updating:not([hidden]) { display: inline; font-size: 13px; color: var(--sec); }
  .alt-sort { margin-inline-start: auto; }

  /* ‏פרטי השיעור במקום המקרא, בגובה שלו, והשדות זה לצד זה (פריט 8). הפאנל
     מונח מעל ‎.grid-tools‎ ואינו תופס מקום משלו — לכן פתיחתו אינה משנה את
     גובה הרשת, את ‎--slot-h‎ או מיקום של בלוק. הגובה המזערי הוא מה שהפאנל
     צריך, כדי שמקרא של שורה אחת לא יחתוך אותו. */
  .grid-tools {
    position: relative;
    flex-wrap: nowrap;
    min-block-size: 4.75rem;
  }

  .grid-tools:has(> .detail:not([hidden])) > .grid-tools-main { visibility: hidden; }

  .grid-tools > .detail {
    position: absolute;
    inset: 0;
    min-inline-size: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap);
    padding: 8px 12px;
    overflow: auto;
  }

  .grid-tools > .detail .detail-head {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .grid-tools > .detail .detail-title { flex: none; }

  .grid-tools > .detail .detail-body {
    flex: 1 1 auto;
    min-inline-size: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* ‏כל שדה הוא עמודה: התווית מעל הערך, והשדות זה לצד זה. */
  .grid-tools > .detail .detail-list {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0 18px;
  }

  /* ‏לפני שנבחר קורס: שבוע ריק, א׳–ה׳, ושורה אחת. במקום הרשת, ולכן במקום
     ההערה "יש לסמן לפחות קורס אחד" שאומרת את אותו דבר. */
  #step-schedule .week-empty:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-block-size: 8rem;
  }

  .week-empty-days {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
  }

  .week-empty-day { border-inline-start: 1px solid var(--line); }
  .week-empty-day:first-child { border-inline-start: 0; }

  .week-empty-hd {
    display: block;
    padding: 7px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    background: var(--chip);
    border-block-end: 1px solid var(--line-strong);
  }

  .week-empty-line {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
  }

  #step-schedule .week-empty:not([hidden]) ~ #schedule-note { display: none; }
}

/* ==========================================================================
   23. הפריסה הרחבה, חלק ב׳ — צעדים 2 ו-3 של סדר ההתאמה (DESIGN.md, "Layout")
   ‏app.js (fitScreenGrid) מחליט איזה צעד חל ורושם אותו ב-data-fit; כאן רק
   המראה של כל צעד. גם כאן הכל ב-‎@media screen‎: שום כלל אינו מגיע לנייר,
   גם אם מחלקה נשארה על אלמנט כשההדפסה התחילה.
   ========================================================================== */

/* ‏התווית המבדילה בשורת הכותרת קיימת רק ברצועה הדקה. */
.alt-head-label { display: none; }

@media screen and (min-width: 1200px) {
  /* ‏צעד 2: כל כרטיס הוא שמו והשבוע המוקטן שלו בשורה אחת. "N ימים, עד
     HH:MM" יורד (שבבי הנתונים אומרים אותו), והתווית עוברת לשורת הכותרת. */
  #step-schedule.is-strip .alt-card {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
  }

  #step-schedule.is-strip .alt-card.is-selected { padding: 3px 7px; }
  #step-schedule.is-strip .alt-card-name { flex: none; white-space: nowrap; }
  #step-schedule.is-strip .alt-card .mini { flex: 1 1 auto; block-size: 1.6rem; }

  #step-schedule.is-strip .alt-card-facts,
  #step-schedule.is-strip .alt-card-label { display: none; }

  /* ‏שורה אחת, תמיד: בסיס 0 כדי שתווית ארוכה לא תשבור את שורת הכותרת.
     המלאה ב-title, ובשם הנגיש של הכרטיס הנבחר. */
  #step-schedule.is-strip .alt-head-label:not(:empty) {
    display: block;
    flex: 1 1 0;
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--muted);
  }

  /* ‏צעד 3: בלוק נמוך מוותר על שורה שלמה — שורה 3 (מרצה · חדר) ואחריה
     שורה 2 (סוג · שעה). שם הקורס לעולם אינו יורד. ‏fit-m2/fit-m1 הן מצבי
     המדידה של אותן שתי ירידות, על כל הרשת לרגע אחד. */
  #schedule-grid .ev[data-lines="2"] > .ev-who,
  #schedule-grid .ev[data-lines="1"] > .ev-who,
  #schedule-grid .ev[data-lines="1"] > .ev-when,
  #schedule-grid.fit-m2 .ev > .ev-who,
  #schedule-grid.fit-m1 .ev > .ev-who,
  #schedule-grid.fit-m1 .ev > .ev-when { display: none; }

  /* ‏בגובה שעה נמוך תווית השעה גבוהה מהמשבצת שלה. המשבצות שמתחתיה ריקות,
     ולכן היא נצבעת מעליהן במקום להיחתך ברקע שלהן. */
  #step-schedule[data-fit="3"] #schedule-grid .tl.hour {
    overflow: visible;
    z-index: 3;
  }
}

/* ==========================================================================
   24. שורת הכותרת בטלפון, ו"צפייה במערכת המלאה ⤢"
   (DESIGN.md, "Results page", 2; שלב 8, חלק ג׳, 2026-10-07/08)
   ========================================================================== */

/* ‏"הדפסה" ו"צפייה במערכת המלאה" יחד. ברחב — בשורת הכותרת. */
.alt-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.btn-full { display: inline-flex; align-items: center; gap: 6px; }
.btn-full-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ‏מסך צר: "5 מערכות מובילות", המיון ו-‹ 1/5 › בשורה אחת; שני הכפתורים
   בשורה משלהם מתחתיה. נמדד ב-2026-10-08: ‏334.6px מתוך 340px ב-390px.
   ‏max-width ‏1199.98px — המשלים המדויק של הפריסה הרחבה (‎min-width: 1200px‎). */
@media screen and (max-width: 1199.98px) {
  .alt-head { column-gap: 8px; }
  .alt-title { flex: none; font-size: 15px; white-space: nowrap; }
  .alt-sort { margin-inline-start: auto; }
  /* ‏התווית נשארת השם הנגיש של ה-select (הוא בתוך ה-<label>). */
  .alt-sort-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .alt-pos { min-inline-size: 0; }
  .alt-actions { flex-basis: 100%; }
}

/* ‏מתחת ל-385px רק המיון יורד לשורה שנייה; הכותרת והדפדוף נשארים יחד
   בראשונה, ושום דבר אחר אינו מוקטן. ‏385 ולא 380: השורה צריכה 334.6px,
   ועם שוליים של 25px מכל צד היא נכנסת רק מ-384.6px. ב-380–384 הדפדוף
   לבדו היה גולש לשורה שנייה. */
@media screen and (max-width: 384.98px) {
  .alt-nav { order: 1; margin-inline-start: auto; }
  .alt-sort { order: 2; flex-basis: 100%; margin-inline-start: 0; }
  .alt-actions { order: 3; }
}

/* ---- השכבה ---- */
html.has-sheet { overflow: hidden; }

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.sheet-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: var(--sf);
  border-block-end: 1px solid var(--bd);
}

.sheet-title { margin: 0; margin-inline-end: auto; font-size: 17px; font-weight: 800; }

#sheet-zoom[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sf); }

.sheet-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--sf);
}

.sheet-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ‏שתי הרשתות של השכבה מקבלות מה שגוש ההדפסה (פרק 15) משנה ברשת, באותם
   ערכים: עמודת שעות של ‎4rem‎, ימים בלי רוחב מזערי, יום ו׳ ריק כעמודה הצרה,
   כותרות שאינן דביקות, וגופן הבלוקים ‎--ev-font-print‎ שקובע fitFontToPage().
   את הצבעים השכבה לוקחת מהמצב הנוכחי, בהיר או כהה. */
.sheet-fit,
.sheet {
  --time-col: 4rem;
  --day-min: 0;
  --day-empty-fri: var(--day-empty);
}

:is(.sheet-fit, .sheet) .hd,
:is(.sheet-fit, .sheet) .tl { position: static; }

:is(.sheet-fit, .sheet) .grid .ev,
:is(.sheet-fit, .sheet) .grid .ev * { font-size: var(--ev-font-print, 13px); }

:is(.sheet-fit, .sheet) .ev { cursor: default; }
:is(.sheet-fit, .sheet) .ev:hover { filter: none; }

/* ‏התאמה (ברירת המחדל): השבוע ממלא את החלון שמתחת לסרגל, בלי שוליים של
   דף ובלי שורת כותרת. ‏fitSheetToWindow() מודד את הגובה של ‎.sheet-fit‎. */
.sheet-fit { border-block-end: 1px solid var(--line-strong); }

/* ‏בגובה שעה נמוך תווית השעה גבוהה מהמשבצת שלה (כמו בצעד 3 של הפריסה
   הרחבה). השעה כולה מכילה אותה — fitSheetToWindow() מבטיח — ולכן היא
   נצבעת מעל המשבצות הריקות שמתחתיה במקום להיחתך ברקע שלהן. */
.sheet-fit .tl.hour {
  position: relative;
  z-index: 3;
  overflow: visible;
}

/* ‏גיליון ה-A4: אותה פריסה שגוש ההדפסה נותן לדף — רוחב 210mm, ריפוד 8mm,
   שורת כותרת אחת. בהתאמה הוא קיים רק למדידה (גודל ההדפסה): מוסתר ב-
   visibility ולא ב-display, ו-fixed — כדי שלא ייצור גלילה בשכבה. */
.sheet {
  box-sizing: border-box;
  inline-size: 210mm;
  padding: 8mm;
  font-size: 11.5px;
  background: var(--sf);
}

.sheet-layer:not(.is-zoomed) .sheet {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ‏"הגדלה": הגיליון בגודל ההדפסה, בגודלו האמיתי, ונגלל; הרשת המותאמת יוצאת. */
.sheet-layer.is-zoomed .sheet-fit { display: none; }
.sheet-layer.is-zoomed .sheet { margin-inline: auto; }
.sheet-layer.is-zoomed .sheet-scroll { background: var(--bg); }

/* ‏גובה עמוד רק אחרי ההתאמה: בזמן המדידה הגיליון בגובה התוכן שלו. */
.sheet.is-fitted { min-block-size: 297mm; }

.sheet-head { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink); }

.sheet-grid-box { border: 1px solid var(--line-strong); }

/* ==========================================================================
   25. רשימת הימים — המערכת שבדף מתחת ל-1000px (DESIGN.md, "Results page", 5)
   ========================================================================== */
.day-list { display: flex; flex-direction: column; gap: 14px; }
.day-list:focus { outline: none; }

.dl-day-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }

/* יום בלי שיעורים: שורה אחת, "שני · אין שיעורים". */
.dl-day.is-empty .dl-day-title { margin: 0; font-weight: 500; color: var(--muted); }

.dl-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-item { display: flex; flex-direction: column; gap: 6px; }

/* ‏החלון בין שני שיעורים: שורה דקה ושקטה, ואחריה קו שיער. */
.dl-gap {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline-start: 14px;
  font-size: 13px;
  color: var(--muted);
}

.dl-gap::after { content: ""; flex: 1; border-block-start: 1px solid var(--line); }

/* ‏השיעור: פס בצבע הקורס בצד ההתחלה ומילוי הקורס כרקע — אותם ‎--course-N‎
   של השבבים ושל בלוקי הרשת (‎.cN‎ קובע את ‎--ev-*‎). ‏<button>, ולכן הגופן
   והיישור מאופסים כמו ב-‎.ev‎. */
.dl-lesson {
  display: flex;
  flex-direction: column;
  gap: 1px;
  inline-size: 100%;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  border: 1px solid var(--ev-bd, var(--line-strong));
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--ev-bg, var(--chip));
  color: var(--ev-fg, var(--ink));
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dl-lesson:hover { filter: brightness(1.06); }

.dl-line { display: block; overflow-wrap: anywhere; }
.dl-hours { font-weight: 600; }
.dl-name { font-size: 14px; font-weight: 700; }
.dl-kind { font-weight: 600; }
.dl-full { font-weight: 700; }
.dl-lesson .ev-room .code--id { white-space: nowrap; overflow-wrap: normal; }

/* ‏אותו סימון חפיפה כמו בבלוק (‎.ev.is-soft‎ ותג "חפיפה"), אותו קו בחירה
   ואותה טבעת פוקוס — ובאותו סדר, כדי שהבחירה והפוקוס יגברו על הקו המקווקו. */
.dl-lesson.is-soft { outline: 2px dashed var(--warn-line); outline-offset: -3px; }
.dl-lesson.is-selected { outline: 2px solid var(--ev-bd); outline-offset: 1px; }
.dl-lesson:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ‏הדגשה מהמקרא (פריט 7) — בצבע, לא ב-opacity, כמו ‎.ev.is-muted‎. */
.dl-lesson.is-muted {
  background: var(--chip);
  border-color: var(--bd);
  color: var(--mut);
  filter: none;
}

.dl-lesson.is-muted .ev-badge { background: var(--chip); border-color: var(--bd); color: var(--mut); }

/* ‏מתחת ל-1000px הרשת אינה על המסך, ומ-1000px ומעלה הרשימה אינה —
   אחרי ‎.day-list‎ שלמעלה, שאחרת גובר עליהם בסדר הקובץ. ‎@media
   screen‎ בשני הכיוונים: הנייר הוא תמיד הרשת, מכל רוחב מסך. אותו קו כמו
   ‏LIST_QUERY ב-app.js. */
@media screen and (max-width: 999.98px) {
  .grid-scroll { display: none; }
}

@media screen and (min-width: 1000px) {
  .day-list { display: none; }
}

@media print {
  .day-list { display: none !important; }
}