/* ============================================================
   styles.css — כל העיצוב במקום אחד.
   מחשב ומובייל מבודדים: .desktop ו-.mobile, מתחלפים במדיה-קוורי
   יחיד. אי אפשר ששינוי באחד ישבור את השני.
   ============================================================ */

:root{
  --rose:#b85c66; --rose-deep:#9c4651; --soft:#f3dfe1; --pale:#faf2f3;
  --ink:#2c2226; --muted:#7a6a6e; --line:#ecdcde; --paper:#fffdfd;
  --wa:#25a366;
  --sheet-grid:#d8dee4; --sheet-head:#e8eef2; --sheet-ink:#1f2937;
  --divider:#e9d4d7;
  /* פס "ערב" במובייל — אפור נייטרלי, לא מתחרה בצבעי הרמות */
  --eve-line:#c7c0b9; --eve-chip:#ece7e1; --eve-chip-bd:#dbd4cc; --eve-ink:#5f5852;
  /* מערכת רווחים אחת — כל רווח הוא כפולה של היחידה */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-card:13px; --r-day:16px;
  --field:#f7eef0;     /* רקע "שדה" עדין לאזור הלוח */
}

*{margin:0; padding:0; box-sizing:border-box;}
body{
  font-family:'Assistant',sans-serif; color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%,#fbeef0,#f6e6e8 42%,#f0dce0) fixed;
  min-height:100vh; padding:24px 14px 60px;
}
.wrap{max-width:1280px; margin:0 auto;}

/* ---------- כותרת עליונה + הסבר (מוקאפ בלבד) ---------- */
.head{text-align:center; margin-bottom:18px;}
.head .t{font-family:'Heebo'; font-weight:800; font-size:21px; color:var(--rose-deep);}
.head .s{font-size:13px; color:var(--muted); margin-top:3px;}
.explain{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 18px; margin-bottom:24px; box-shadow:0 10px 30px -18px rgba(120,60,70,.4);}
.explain h2{font-family:'Heebo'; font-weight:800; font-size:15px; color:var(--rose-deep); margin-bottom:9px;}
.steps{display:flex; gap:12px; flex-wrap:wrap;}
.step{flex:1 1 200px; background:var(--pale); border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.5;}
.step b{font-family:'Heebo'; display:block; color:var(--ink); font-size:13px; margin-bottom:2px;}
.step .n{display:inline-block; width:20px; height:20px; border-radius:50%; background:var(--rose-deep); color:#fff; font-family:'Heebo'; font-weight:800; font-size:11px; text-align:center; line-height:20px; margin-left:5px;}

.section-tag{font-family:'Heebo'; font-weight:800; font-size:13px; letter-spacing:1px; color:#fff; background:var(--rose-deep); display:inline-block; padding:5px 14px; border-radius:8px 8px 0 0; margin-top:26px;}
.section-sub{font-size:11.5px; color:var(--muted); margin:5px 2px 11px;}

/* ---------- חיקוי הגיליון (מוקאפ בלבד) ---------- */
.sheetwrap{background:#fff; border:1px solid var(--sheet-grid); border-radius:0 12px 12px 12px; overflow:hidden; box-shadow:0 14px 40px -22px rgba(40,50,70,.35);}
.sheetbar{display:flex; align-items:center; gap:8px; background:#f6f8fa; border-bottom:1px solid var(--sheet-grid); padding:8px 12px; font-size:12px; color:#5b6b7b;}
.sheetbar .dot{width:10px; height:10px; border-radius:50%;}
.sheetbar .g{background:#3aa757;} .sheetbar .y{background:#f4c020;} .sheetbar .r{background:#ec5b56;}
.sheetbar .nm{font-family:'Heebo'; font-weight:700; color:#374151; margin-right:6px;}
table.sheet{width:100%; border-collapse:collapse; font-size:12px;}
table.sheet th{background:var(--sheet-head); color:#374151; font-family:'Heebo'; font-weight:700; font-size:11.5px; padding:7px 9px; border:1px solid var(--sheet-grid); white-space:nowrap; text-align:right;}
table.sheet td{padding:6px 9px; border:1px solid var(--sheet-grid); color:var(--sheet-ink); text-align:right; white-space:nowrap;}
table.sheet td.time{direction:ltr; text-align:right;}
.lvlpill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px;}
.stat{display:inline-block; padding:2px 10px; border-radius:6px; font-family:'Heebo'; font-weight:700; font-size:11px;}
.stat.act{background:#dff0e4; color:#2f7a47;} .stat.draft{background:#fde9c8; color:#9a6a16;}
tr.draftrow td{background:#fff7ec; color:#9a8a6a; font-style:italic;}
.draftnote{background:#fff7ec; border:1px solid #f0dcb0; border-radius:8px; padding:8px 12px; margin-top:9px; font-size:12px; color:#8a6a20;}
.draftnote b{color:#7a5510;}

/* ---------- מסגרת הלוח ---------- */
.board{background:var(--paper); border:1px solid var(--line); border-radius:0 16px 16px 16px; overflow:hidden;}

/* ---------- באנר ---------- */
.banner{background:linear-gradient(180deg,#fff,var(--pale)); padding:16px 20px 13px; border-bottom:1px solid var(--line); text-align:center;}
.banner img{height:64px;}
.banner h1{font-family:'Heebo'; font-weight:800; font-size:21px; color:var(--ink); margin-top:6px;}
.banner .yr{font-family:'Heebo'; font-weight:600; font-size:11px; color:var(--rose-deep); letter-spacing:2px; margin-top:2px;}
.slogan{display:flex; gap:13px; justify-content:center; margin-top:8px; font-family:'Heebo'; font-weight:600; font-size:11.5px; color:var(--muted);}
.slogan span{display:flex; align-items:center; gap:5px;}
.slogan i{width:5px; height:5px; border-radius:50%; background:var(--rose);}

/* ---------- מקרא רמות ---------- */
.legend{display:flex; flex-wrap:wrap; gap:6px 13px; justify-content:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); font-size:11px; color:var(--muted);}
.legend b{display:flex; align-items:center; gap:5px; font-weight:600;}
.sw{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.06);}

/* ============================================================
   LANE + CARD  —  משותף למחשב ולמובייל (זהה בשניהם)
   ============================================================ */
.lane{display:flex; flex-direction:column; padding:var(--s3) 5px var(--s4); min-width:0; overflow:hidden;}
.lane-empty{display:flex; align-items:center; justify-content:center; min-height:90px; color:#cbbdc0; font-size:11px; font-style:italic;}

.card{
  position:relative;
  border-radius:var(--r-card); padding:var(--s3) 7px; border:none;
  box-shadow:0 1px 2px rgba(120,60,70,.10), 0 6px 16px -10px rgba(120,60,70,.30);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;            /* סבב 3: כל הטקסט במשבצת ממורכז אופקית (בנוסף לאנכי) */
  overflow:hidden;
}
/* היררכיה טיפוגרפית קבועה: מורה עדין → שם גיבור → שעה שקטה */
.card .teacher{
  font-family:'Heebo'; font-weight:600; font-size:10.5px; line-height:1.2;
  color:rgba(44,34,38,.62); letter-spacing:.1px;
  overflow-wrap:normal; word-break:keep-all;
}
.card .name{
  font-family:'Heebo'; font-weight:800; font-size:12px; line-height:1.22;
  color:#241a1e; margin-top:var(--s1);
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card .time{
  font-family:'Heebo'; font-weight:700; font-size:11px; line-height:1;
  color:rgba(44,34,38,.70); direction:ltr; white-space:nowrap;
  margin-top:var(--s2);
}

/* רצף: שני כרטיסים צמודים נוגעים, עם קו מפריד דק כמו ב-Google */
.card.touch-top{border-top-left-radius:5px; border-top-right-radius:5px;}
.card.touch-top::before{content:""; position:absolute; top:0; inset-inline:0; height:1.5px; background:rgba(40,20,25,.16);}

/* רמז לחלון פנוי גדול — טקסט ממורכז, נשבר בעת הצורך, לא מותח את העמודה */
.gap-hint{display:flex; align-items:center; justify-content:center; text-align:center; color:#b58e94; font-family:'Heebo'; font-weight:600; font-size:9px; font-style:italic; padding:var(--s1) var(--s2); line-height:1.35;}
.gap-hint .gh-txt{white-space:normal;}
.gap-hint .rng{unicode-bidi:isolate; white-space:nowrap;}

/* ============================================================
   תצוגת מחשב — כל יום הוא כרטיס נפרד עם נשימה לבנה ביניהם
   ============================================================ */
.desktop .cal{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  background:var(--field); padding:10px;
}
.desktop .day-col{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-day);
  overflow:hidden; box-shadow:0 8px 22px -16px rgba(120,60,70,.40);
}
.desktop .day-head{
  background:linear-gradient(180deg,var(--rose-deep),#8d3f49); color:#fff;
  font-family:'Heebo'; font-weight:800; font-size:14px; text-align:center;
  padding:var(--s3) var(--s1) 0;
}
.desktop .day-head .subs{display:grid; grid-template-columns:1fr 1fr; margin-top:var(--s2);}
.desktop .day-head .subs span{font-family:'Heebo'; font-weight:700; font-size:9.5px; color:rgba(255,255,255,.82); padding:var(--s1) 0; letter-spacing:.2px;}
.desktop .day-head .subs span:last-child{border-inline-start:1px solid rgba(255,255,255,.22);}
.desktop .day-body{display:grid; grid-template-columns:1fr 1fr;}
.desktop .day-body .lane:last-child{border-inline-start:1px dashed var(--divider);}

/* ציר הזמן: רצועה ממוקמת עם קווי שעה דקים */
.lane-axis{
  position:relative; min-width:0;
  background-image:repeating-linear-gradient(to bottom,
    rgba(40,20,25,.06) 0, rgba(40,20,25,.06) 1px,
    transparent 1px, transparent var(--hour));
  background-position:0 var(--pad);
}
.lane-axis:last-child{border-inline-start:1px dashed var(--divider);}
.lane-axis .card.abs{
  position:absolute; inset-inline:4px;
  justify-content:center;   /* סבב עיצוב — תיקון 1: טקסט ממורכז אנכית במשבצת */
}
.lane-empty-abs{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#cbbdc0; font-size:11px; font-style:italic;
}
.gap-hint-abs{
  position:absolute; inset-inline:0; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#b58e94; font-family:'Heebo'; font-weight:600;
  font-size:9px; font-style:italic; line-height:1.35; pointer-events:none; padding:0 6px;
}
.gap-hint-abs .gh-txt{white-space:normal;}
.gap-hint-abs .rng{unicode-bidi:isolate; white-space:nowrap;}
.card .name .nb{white-space:nowrap;}

/* ============================================================
   תצוגת מובייל
   ============================================================ */
.daytabs{display:flex; gap:var(--s1); padding:var(--s3) var(--s2) var(--s2); background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;}
.daytabs button{flex:1 1 0; min-width:0; font-family:'Heebo'; font-weight:700; font-size:12px; border:none; background:var(--pale); color:var(--rose-deep); padding:var(--s2) 2px; border-radius:11px; cursor:pointer; line-height:1.2; transition:background .15s;}
.daytabs button.on{background:var(--rose-deep); color:#fff;}
.daytabs button.empty{opacity:.4;}
.m-day{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
.m-col{background:var(--paper);}
.m-col .m-sb{font-family:'Heebo'; font-weight:800; font-size:11px; color:#fff; background:linear-gradient(180deg,var(--rose-deep),#8d3f49); padding:var(--s2); text-align:center; letter-spacing:.2px;}

/* ---------- פריסת ההדגמה (מחשב מלא + טלפון מתחת) ---------- */
.showcase{margin-top:6px;}
.showcase .col-d{margin-bottom:30px;}
.phone{width:332px; margin:0 auto; background:#1d1418; border-radius:34px; padding:10px; box-shadow:0 22px 55px -20px rgba(80,40,50,.6);}
.phone .scr{background:var(--paper); border-radius:24px; overflow:hidden; overflow-y:auto; max-height:690px;}

/* ---------- מתג רספונסיבי יחיד בין שתי התצוגות (mobileBreakpoint = 1100) ----------
   מעל 1100 — ציר הזמן (.view-desktop). מתחת — בורר הימים והבלוקים (.view-mobile).
   רק אחת מהן גלויה בכל רגע; שתיהן נבנות מאותן פונקציות רינדור, ללא שינוי. */
.view-mobile{display:none;}                          /* ברירת מחדל: תצוגת מחשב */

/* במובייל מסירים את מסגרת הטלפון הדקורטיבית (שהיתה רק להמחשה במוקאפ):
   התוכן ממלא את רוחב המסך, ו-.scr מפסיק להיות תיבת-גלילה כדי ששורת הימים
   (position:sticky) תידבק לראש העמוד האמיתי. אין נגיעה בלוח או בלוגיקת הרינדור. */
.view-mobile .phone{width:100%; max-width:520px; margin:0 auto; background:transparent; padding:0; box-shadow:none; border-radius:0;}
.view-mobile .phone .scr{max-height:none; overflow:visible; border-radius:0;}

/* מתחת ל-1100px (לפטופ קטן / טאבלט) הלוח מצטמצם בעדינות, בלי גלילה אופקית.
   12 העמודות נשארות 1fr ולכן אף פעם לא נוצר גלגל אופקי. */
@media (max-width:1100px){
  .view-desktop{display:none;}
  .view-mobile{display:block;}
  .desktop .card .name{font-size:11.5px;}
  .desktop .day-head{font-size:12px;}
}

/* ---------- רצועת ווטסאפ + פוטר ---------- */
.wacta{display:flex; justify-content:center; padding:14px 16px 4px; background:var(--rose-deep);}
.wacta a{display:inline-flex; align-items:center; gap:8px; background:var(--wa); color:#fff; font-family:'Heebo'; font-weight:800; font-size:14px; text-decoration:none; padding:11px 22px; border-radius:30px; box-shadow:0 6px 16px -6px rgba(0,0,0,.4);}
.wacta svg{width:20px; height:20px; fill:#fff;}
.foot{background:var(--rose-deep); color:#fff; padding:8px 16px 14px; text-align:center;}
.social{display:flex; gap:13px; justify-content:center; margin:8px 0 9px;}
.social a{width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; transition:background .2s;}
.social a:hover{background:rgba(255,255,255,.28);}
.social svg{width:16px; height:16px; fill:#fff;}
.foot .contact{font-family:'Heebo'; font-weight:600; font-size:12.5px; line-height:1.7;}
.foot .contact a{color:#fff; text-decoration:none;}
.foot .ph{direction:ltr; display:inline-block; font-weight:700;}
.todo{font-size:10px; color:#ffd9c2; margin-top:4px;}

.connlabel{text-align:center; font-family:'Heebo'; font-weight:700; font-size:12px; color:var(--rose); margin:0 0 9px;}
.loading{padding:40px; text-align:center; color:var(--muted); font-family:'Heebo'; font-weight:600;}

/* הודעת fallback עדינה — נתונים שמורים. צבעים מהמותג הקיים, בלי טוקנים חדשים. */
.data-notice{
  max-width:900px; margin:0 auto 16px; padding:10px 16px;
  background:#fff; border:1px solid #EBD1DE; border-radius:10px;
  color:var(--rose-deep); font-family:'Assistant'; font-weight:600; font-size:14px;
  text-align:center;
}

/* ============================================================
   סבב עיצוב — design-round-1
   רק טוקנים/CSS, אותם צבעים וגופנים מהחוזה. כל שינוי ממוקד-תצוגה
   (.view-desktop / .view-mobile) כדי לשמור על בידוד מלא בין השתיים.
   ============================================================ */

/* ---------- מחשב · אזור עליון — רקע לבן נקי, תוכן גדול ----------
   סבב 3 · שיפור 1: הוסר הגרדיאנט "המלוכלך" → רקע לבן נקי. החלל מתמלא בתוכן
   גדול, לא ברקע. שיפור 2: הלוגו עוגן לפינה השמאלית-עליונה (יוצא מהזרימה
   הממורכזת). שיפור 3: כותרת/שנה/סלוגן גדלים משמעותית, ממורכזים אופקית,
   וממלאים את גובה המלבן (min-height קבוע) בלי להגדיל אותו. */
.view-desktop .banner{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:176px; padding:20px 24px;
  background:#fff; border-bottom:1px solid var(--line);
}
.view-desktop .banner img{
  position:absolute; top:16px; left:24px;   /* שמאלה ולמעלה */
  height:112px;                              /* מעט גדול יותר; מקור 382×620 → חד */
  margin:0;
}
.view-desktop .banner h1{font-size:50px; margin:0; letter-spacing:.2px; line-height:1.05;}
.view-desktop .banner .yr{font-size:18px; letter-spacing:3px; margin-top:8px;}
.view-desktop .slogan{font-size:19px; gap:24px; margin-top:14px;}
.view-desktop .slogan i{width:7px; height:7px;}

/* שיפור 4: המקרא נפרס על כל הרוחב — שש עמודות שוות, ריבועים וטקסט גדולים וברורים */
.view-desktop .legend{
  display:grid; grid-template-columns:repeat(6,1fr);
  justify-items:center; align-items:center; gap:12px 8px;
  padding:16px; font-size:16px; color:var(--muted); background:#fff;
}
.view-desktop .legend b{gap:8px; font-weight:600;}
.view-desktop .sw{width:20px; height:20px; border-radius:5px;}

/* ---------- טלפון · מקרא רשת 3×2 — סבב 2 · שיפור 3: בלי שורה שבורה ----------
   הקטנת פונט מתונה (11px) + מרווח עמודה רחב יותר נותנים לתווית הארוכה
   "קורסים וקבוצות יצירה" לשבת בשורה אחת ב-430. כל ששת התאים אחידים. */
.view-mobile .legend{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; justify-items:start; align-items:center;
  padding:8px; font-size:11px;
}
.view-mobile .sw{width:12px; height:12px;}

/* ---------- תיקון 4 · טלפון — ניצול מסך מלא, פחות אוויר מת ----------
   אזור עליון מהודק, טקסט גדול יותר בתוך אותו גובה משבצת (84px נעול),
   קצב אחיד בין המשבצות. אין הארכת גלילה משמעותית. ריווחים על הסולם. */
/* סבב 3 · שיפור 6: לוגו שמאלה-למעלה, כותרת ושנה גדולות יותר, ניצול רוחב.
   המקרא במובייל (3×2) לא נגע — הוא כבר תקין. */
.view-mobile .banner{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:96px; padding:12px 16px;
}
.view-mobile .banner img{position:absolute; top:10px; left:12px; height:64px; margin:0;}  /* שמאלה ולמעלה */
.view-mobile .banner h1{font-size:28px; margin:0;}
.view-mobile .banner .yr{font-size:14px; margin-top:6px;}
.view-mobile .slogan{font-size:13px; gap:12px; margin-top:8px;}
.view-mobile .daytabs{padding:8px;}
.view-mobile .daytabs button{font-size:12.5px;}
.view-mobile .lane{padding:8px 5px 12px;}
.view-mobile .card .teacher{font-size:11.5px;}
.view-mobile .card .name{font-size:14px;}
.view-mobile .card .time{font-size:12px;}

/* ---------- פס "ערב" (מובייל בלבד) ----------
   מפריד בין שיעורי הבוקר לשיעורים מ-16:00. שבבון אפור מרוכז על קו דק שנעלם
   לצדדים. נוסף כפריט flex בתוך ה-lane; לא נוגע במחשב (שם הרינדור עובר ב-laneAxis). */
.view-mobile .m-evening{display:flex; align-items:center; gap:7px; padding:7px 2px 5px;}
.view-mobile .m-evening::before,
.view-mobile .m-evening::after{content:""; flex:1; height:1.5px; border-radius:2px; background:linear-gradient(to left, transparent, var(--eve-line) 45%);}
.view-mobile .m-evening::after{background:linear-gradient(to right, transparent, var(--eve-line) 45%);}
.view-mobile .m-evening span{
  display:inline-flex; align-items:center;
  font-family:'Heebo'; font-weight:800; font-size:12.5px; letter-spacing:.6px;
  color:var(--eve-ink); background:var(--eve-chip); border:1px solid var(--eve-chip-bd);
  border-radius:20px; padding:4px 16px; white-space:nowrap;
}