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

/* 🔴 כלל בטיחות. ‎[hidden]‎ הוא רק ‎display:none‎ מגיליון ברירת המחדל,
   וכל כלל משלנו שקובע ‎display‎ לאלמנט מנצח אותו בשקט — אז קוד שכתב
   ‎el.hidden = true‎ נראה נכון והאלמנט המשיך להיות מצויר. נתפס פעמיים:
   בורר החיפוש, וכפתור "חיפוש בכל הכנס" שהשאיר קופסה ריקה מתחת לשדה. */
[hidden]{display:none !important}

:root{
  /* ---- נייר ודיו ---- */
  --paper:#FCF9F2; --paper-2:#F4EEDF; --paper-3:#EAE2D2; --surface:#fff;
  --navy:#080D2F; --ink:#29304B; --dim:#66708E;
  --line:rgba(8,13,47,.13); --line-2:rgba(8,13,47,.07);
  --shadow:0 2px 10px -6px rgba(8,13,47,.28);
  --shadow-lg:0 18px 44px -20px rgba(8,13,47,.35);

  /* ---- הדגש היחיד ---- */
  --orange:#F38420; --orange-dark:#D96D0C; --orange-soft:#FFE8CE;
  /* 🔴 נמדד: לבן על הכתום הזה נותן 2.6:1 ונכשל. נייבי נותן 6.6:1.
     ולכן כל שטח כתום נושא טקסט נייבי, בדיוק כמו בדפי המכירה. */
  --on-orange:#080D2F;

  --ok:#0FA98D; --ok-ink:#0B7A65; --warn:#92400E; --bad:#C0392B;

  /* 🔴 כרטיסים "הפוכים" צבעו את עצמם ב-‎--navy‎ עם טקסט לבן. במצב כהה
     ‎--navy‎ הופך לכמעט־לבן, ואז אלה היו קלף בהיר עם טקסט לבן עליו,
     כלומר בלתי קריא. ‎--navy‎ הוא **צבע דיו**, לא "כהה". משטח הפוך
     צריך טוקן משלו שנשאר כהה בשני המצבים. */
  --invert:#080D2F; --on-invert:#ffffff; --on-invert-2:rgba(255,255,255,.72);

  /* גובה הבאר העליון. הוא אפס בטלפון, כי שם הבאר אינו נעול, וכל מי
     שנצמד מתחתיו קורא אותו מכאן במקום לנחש. */
  --head-h:0px;
  --bg:var(--paper);
  --safe-b:env(safe-area-inset-bottom,0px);
  --radius:18px; --radius-sm:12px;
  --bar-h:0px;          /* גובה הבאר התחתון. נדרס בטלפון */
  --mini-h:0px;         /* גובה הנגן המיני כשהוא פתוח */
  --dock-h:0px;         /* גובה פס הבקרה הצמוד במסך הצפייה */

  --f-head:Rubik,'Heebo',system-ui,sans-serif;
  --f-body:Alef,'Heebo',system-ui,sans-serif;
}

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

   🔴 היה כאן חסר: המצב הנפוץ ביותר אינו "בהיר" ואינו "כהה" אלא
   "לפי המערכת", ואז אין שום סימון על השורש. בלי שאילתת המדיה הזאת
   מכשיר שכל הממשק שלו כהה קיבל כאן דף נייר בוהק. ההגנה
   ‎:not([data-theme="light"])‎ מבטיחה שבחירה מפורשת בבהיר עדיין מנצחת
   את המערכת. */
:root[data-theme="dark"]{
  --paper:#0B1024; --paper-2:#121936; --paper-3:#1B2447; --surface:#111834;
  --navy:#F2F5FF; --ink:#DDE3F5; --dim:#98A2C4;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
  --shadow:0 2px 10px -6px rgba(0,0,0,.6);
  --shadow-lg:0 18px 44px -20px rgba(0,0,0,.8);
  --orange:#F79A45; --orange-dark:#FFB266; --orange-soft:rgba(243,132,32,.16);
  --on-orange:#0B1024;
  --ok:#2ECFAE; --ok-ink:#2ECFAE; --warn:#F0B85E; --bad:#F0685A;
  --invert:#1B2447; --on-invert:#F2F5FF; --on-invert-2:rgba(242,245,255,.7);
}

/* אותם טוקנים בדיוק, הפעם לפי העדפת המערכת. זה המצב הנפוץ ביותר:
   רוב האנשים לא נגעו במתג ולכן אין שום סימון על השורש, ובלי הבלוק הזה
   מכשיר כהה קיבל כאן דף נייר בוהק. ההגנה מבטיחה שמי שבחר בהיר במפורש
   מקבל בהיר גם על מערכת כהה. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B1024; --paper-2:#121936; --paper-3:#1B2447; --surface:#111834;
    --navy:#F2F5FF; --ink:#DDE3F5; --dim:#98A2C4;
    --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
    --shadow:0 2px 10px -6px rgba(0,0,0,.6);
    --shadow-lg:0 18px 44px -20px rgba(0,0,0,.8);
    --orange:#F79A45; --orange-dark:#FFB266; --orange-soft:rgba(243,132,32,.16);
    --on-orange:#0B1024;
    --ok:#2ECFAE; --ok-ink:#2ECFAE; --warn:#F0B85E; --bad:#F0685A;
  --invert:#1B2447; --on-invert:#F2F5FF; --on-invert-2:rgba(242,245,255,.7);
  }
  :root:not([data-theme="light"]) :focus-visible{outline-color:#FFB266}
}

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

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

   ברירת המחדל היא **אין תכונה**, כלומר בדיוק מה שיש היום.

   🔴 והבורר הוא ‎body:has(...)‎ ולא ‎#screen-watch‎ עצמו, משתי סיבות
   שנמדדו: הבאר העליון והתחתון חיים **מחוץ** למסך, ובלעדיהם נשאר תפר
   של קרם מעל משטח כהה; ו-‎body‎ מחשב ‎color:var(--ink)‎ פעם אחת, כך
   שהגדרה מחדש של הטוקן **בתוך** העץ אינה משנה צבע שכבר נורש — כותרות
   ההרצאות ברשימה נשארו ‎#29304B‎ על ‎#0E1117‎, כלומר בלתי קריאות.
   הגדרת הטוקנים על ‎body‎ פותרת את שניהם בבת אחת. שאר המסכים מוסתרים
   בזמן צפייה, ולכן הם אינם מושפעים. */
body:has(#screen-watch.is-active[data-skin="cinema"]){
  --paper:#0E1117; --paper-2:#161B24; --paper-3:#212836; --surface:#151A23;
  --navy:#F5F7FA; --ink:#DFE4EC; --dim:#98A1B3;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.06);
  --shadow:0 2px 10px -6px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.9);
  --orange:#F79A45; --orange-dark:#FFB266; --orange-soft:rgba(247,154,69,.15);
  --on-orange:#0E1117;
  --invert:#1E2532; --on-invert:#F5F7FA; --on-invert-2:rgba(245,247,250,.72);
  --bg:#0E1117;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);
     line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--navy);letter-spacing:-.02em;
  text-wrap:balance;font-weight:800}
/* מספרים ברוחב אחיד, ותמיד משמאל לימין כמו שעון */
.num,time,.t2 span+span{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}

/* טבעת מיקוד אחת לכל האלמנטים שאפשר להגיע אליהם במקלדת.
   🔴 לעולם לא כתום על כתום: על שטח כתום הטבעת נייבי, ובכהה ענבר. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:8px}
[style*="background:var(--orange)"]:focus-visible,
.btn.cta:focus-visible,.tab.on:focus-visible{outline-color:var(--navy)}
:root[data-theme="dark"] :focus-visible{outline-color:#FFB266}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:200;background:var(--surface);
  border:2px solid var(--orange-dark);border-radius:10px;padding:10px 16px;font-weight:700;
  color:var(--ink);text-decoration:none;transition:top .15s}
.skip:focus{top:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- שער ---------- */
/* ---------- מסך הכניסה ----------
   זה הדבר הראשון שרוכש רואה, ולכן הוא לא שדה סיסמה על נייר ריק.
   בצד ההתחלה ההתחברות, בצד השני קיר הפנים של הכנס. בטלפון הקיר
   יורד לרצועה אחת מתחת לטופס, כי שם הגובה הוא המשאב היקר. */
#gate{position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;grid-template-columns:1fr;overflow:auto}
/* 🔴 פריט בגריד הוא ‎min-width:auto‎ כברירת מחדל, ולכן העמודה גדלה
   עד רוחב התוכן המזערי — 469 פיקסל על מסך של 390, וכל מסך הכניסה
   יצא מהחלון שמאלה. ‎min-width:0‎ הוא כל התיקון. */
.gate-form{display:flex;align-items:center;justify-content:center;min-width:0;
  padding:clamp(20px,5vw,48px) clamp(18px,5vw,44px);min-height:100%}
#gate>*{min-width:0}
.gate-in{width:100%;max-width:430px}
.gate-kicker{display:inline-block;font:700 12.5px/1 var(--f-head);letter-spacing:.14em;
  color:var(--orange-dark);background:var(--orange-soft);border-radius:999px;
  padding:7px 13px;margin-bottom:16px}
#gate h1{font-weight:900;font-size:clamp(1.9rem,6.2vw,2.6rem);color:var(--navy);
  margin:0 0 8px;line-height:1.1;letter-spacing:-.02em}
#gate #gate-help{color:var(--dim);margin:0 0 20px;font-size:15.5px;max-width:34ch;line-height:1.55}

.gate-pts{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 22px}
.gate-pts li{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);
  border-radius:14px;padding:11px 12px;box-shadow:var(--shadow)}
/* 🔴 ‎flex:1‎ בלי ‎min-width:0‎ אינו מתכווץ מתחת לרוחב הטקסט, ולכן
   שלוש הקופסאות דחפו את כל מסך הכניסה אל מחוץ לחלון בטלפון. */
.gate-pts b{display:block;font:800 19px/1 var(--f-head);color:var(--navy)}
.gate-pts span{display:block;font-size:11.5px;color:var(--dim);margin-top:5px;line-height:1.3}

.gate-card{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;
  padding:20px;box-shadow:var(--shadow-lg)}
.gate-lbl{display:block;font:700 13.5px var(--f-head);color:var(--navy);margin-bottom:10px}
.cboxes{display:flex;gap:8px;justify-content:space-between}
.cbox{flex:1;min-width:0;height:58px;font:800 22px/1 var(--f-head);text-align:center;
  border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--navy);
  padding:0;outline:none;text-transform:uppercase;caret-color:var(--orange);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.cbox:focus{border-color:var(--orange);background:var(--surface);
  box-shadow:0 0 0 3px var(--orange-soft)}
.cbox.full{border-color:var(--navy)}
/* השדה האמיתי. הוא לא מוסתר ב-display כדי שיישאר בר-מיקוד למנהל
   סיסמאות ולמילוי אוטומטי, אבל הוא לא תופס מקום ולא נראה. */
.code-mirror{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  border:0;padding:0;margin:0}
#gate button{background:var(--orange);color:var(--on-orange);border:0;padding:15px 32px;
  font-size:1.05rem;font-weight:800;border-radius:14px;width:100%;
  cursor:pointer;min-height:54px;font-family:var(--f-head);margin-top:14px;
  transition:background .15s ease,transform .12s ease}
#gate button:hover{background:var(--orange-dark)}
#gate button:active{transform:translateY(1px)}
#gate button[disabled]{opacity:.6;cursor:default}
#gate .err{color:var(--bad);margin-top:12px;font-weight:700;visibility:hidden;
  font-size:14.5px;line-height:1.45}
/* 🔴 12.5px. רוכשת ששילמה וכתבה לאריה "לא קיבלתי שום לינק" עמדה
   מול המסך הזה: שש משבצות ריקות, כפתור כתום גדול שאי אפשר ללחוץ
   עליו, והדרך היחידה החוצה באותיות קטנות מהאזהרה המשפטית שמתחת.
   אותו גודל של שורת השגיאה, כי זה אותו תפקיד. */
.gate-ask{color:var(--dim);font-size:14.5px;margin:14px 0 0;line-height:1.55}
/* כפתור שנראה כמו קישור. הוא חלק ממשפט, ולכן הוא לא יכול להיות מלבן.
   ⚠️ הבורר כולל ‎#gate‎ בכוונה: הכלל ‎#gate button‎ צובע כל כפתור במסך
   הכניסה בכתום וברוחב מלא, ומזהה בלבד אינו מנצח אותו. */
#gate .linkbtn,.linkbtn{background:none;border:0;padding:0;margin:0;width:auto;
  min-height:0;font:inherit;font-weight:800;font-family:var(--f-head);
  color:var(--orange-dark);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;border-radius:0}
#gate .linkbtn:hover,.linkbtn:hover{background:none;color:var(--navy)}
/* ── רכשתי ולא קיבלתי קישור ── */
.claim{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.claim[hidden]{display:none}
.claim input{width:100%;min-height:52px;padding:0 14px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--navy);
  font:600 1rem var(--f-head);direction:ltr;text-align:start;unicode-bidi:isolate}
.claim input:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-soft)}
/* הפעולה הראשית במסך הזה היא "כניסה". הכפתור כאן משני, ולכן מתאר
   ולא ממולא: שני כפתורים כתומים זה על זה מבטלים זה את זה. */
#gate .claim .btn.cta{width:100%;margin-top:10px;min-height:50px;
  background:var(--surface);color:var(--navy);border:1.5px solid var(--orange)}
#gate .claim .btn.cta:hover{background:var(--orange-soft)}
.claim-msg{margin-top:10px;font-size:13px;line-height:1.5;min-height:1px}
.claim-msg.bad{color:var(--bad);font-weight:700}
.claim-msg.ok{color:var(--ok);font-weight:700}
.gate-legal{color:var(--dim);font-size:12px;margin:18px 0 0;line-height:1.55;max-width:36ch}

/* קיר הפנים */
.gate-art{display:none;position:relative;overflow:hidden;background:var(--invert)}
/* הקיר גולש למעלה ולמטה בכוונה, אבל לא הצידה: כיתוב שנחתך באמצע
   מילה נקרא כתקלה, לא כמסגרת. */
.gate-art .wall{position:absolute;inset:-9% 14px;display:grid;gap:11px;
  grid-template-columns:repeat(3,1fr);align-content:center;transform:rotate(-2deg)}
.gate-art figure{margin:0;position:relative;border-radius:12px;overflow:hidden;
  background:var(--paper-3);aspect-ratio:16/9;opacity:0;animation:artIn .5s ease forwards}
@keyframes artIn{to{opacity:1}}
.gate-art img{width:100%;height:100%;object-fit:cover;display:block}
.gate-art figcaption{position:absolute;inset-inline:0;bottom:0;padding:16px 9px 6px;
  font:700 11.5px var(--f-head);color:#fff;
  background:linear-gradient(to top,rgba(8,13,47,.86),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-art .veil{position:absolute;inset:0;background:rgba(8,13,47,.42)}
.gate-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%,transparent 30%,rgba(8,13,47,.7) 100%)}
.gate-art .say{position:absolute;inset-inline:0;bottom:0;padding:30px 32px;color:#fff}
.gate-art .say b{display:block;font:800 clamp(19px,2vw,26px)/1.25 var(--f-head);margin-bottom:6px}
.gate-art .say span{font-size:13.5px;color:rgba(255,255,255,.74)}

@media (min-width:900px){
  #gate{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .gate-art{display:block}
  .gate-in{max-width:460px}
}
@media (max-width:899px){
  .gate-form{padding-bottom:26px}
  .gate-pts{gap:8px}
  .gate-pts li{padding:9px 10px}
  .cbox{height:52px;font-size:20px}
}
@media (max-width:420px){
  /* שלוש קופסאות על 390 פיקסל הן שלוש מילים חתוכות. שורה אחת
     קוראת טוב יותר ותופסת פחות גובה. */
  .gate-pts{display:block;background:var(--surface);border:1px solid var(--line-2);
    border-radius:14px;padding:11px 13px;box-shadow:var(--shadow)}
  .gate-pts li{display:inline;padding:0;border:0;background:none;box-shadow:none;font-size:13.5px}
  .gate-pts li+li::before{content:' · ';color:var(--dim)}
  .gate-pts b,.gate-pts span{display:inline;font-size:13.5px;margin:0}
  .gate-pts b{padding-inline-end:.34em;color:var(--navy);font-weight:800}
  .gate-pts span{color:var(--dim)}
  .cboxes{gap:6px}
  .cbox{height:48px;font-size:18px;border-radius:11px}
}
@media (prefers-reduced-motion:reduce){
  .gate-art figure{animation:none;opacity:1}
}

/* רגע הכניסה. חצי שנייה עם השם, ואז פנימה. */
#hello{position:fixed;inset:0;z-index:110;background:var(--paper);
  display:grid;place-items:center;text-align:center;animation:helloIn .3s ease both}
#hello b{display:block;font:800 clamp(26px,7vw,42px)/1.15 var(--f-head);color:var(--navy);margin-top:6px}
#hello span{font:600 14px var(--f-head);color:var(--orange-dark);letter-spacing:.1em}
@keyframes helloIn{from{opacity:0}to{opacity:1}}

/* ---------- שלד ---------- */
/* 🔴 1180 היה נכון לשתי עמודות. בשלוש הוא משאיר לווידאו בערך 500
   פיקסל, וזה גרוע ממה שהיה. ברוחב הזה נשארים לו כ-900.
   🔴 ואז 1560 הפך בעצמו לתקרה מיותרת. ב-1920 על 1080 — הרזולוציה
   הנפוצה ביותר — הטור הראשי יוצא 1366 ותקרת הגובה של 16:9 היא 1387.
   שני האילוצים נפגשים בתוך 21 פיקסל, ולכן 1800 הוא בדיוק הרוחב שבו
   מסך כזה מוגבל ברוחב ולא בגובה, בלי לבזבז אף צד. מתחת ל-1560 שום
   דבר לא זז. המסכים שאינם רוצים את הרוחב הזה נחסמים בנפרד למטה. */
#app{display:none;max-width:1800px;margin:0 auto;overflow-x:clip;
  padding:16px 16px calc(32px + var(--safe-b) + var(--bar-h) + var(--mini-h) + var(--dock-h))}
/* ---------- הבאר העליון ----------
   בטלפון: זהות בלבד, כי הניווט יושב בבאר התחתון.
   במחשב: זהות, ניווט וכרטיס התוכנית בשורה אחת שנדבקת לראש המסך. */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;flex-wrap:wrap}
.appbar h1{font-weight:900;font-size:1.35rem;color:var(--navy)}
.appbar .sub{color:var(--dim);font-size:.88rem}
.hbrand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.msp-top{display:none}

/* מסכים. אחד פעיל בכל רגע, והמעבר ביניהם הוא החלפת מחלקה בלבד. */
.screen{display:none}
.screen.is-active{display:block}
/* 🔴 המסך הזה מחזיק את הנגן, ולכן הוא לעולם לא נמחק מהתצוגה.
   נמדד בכרום: display:none על אב של video אינו עוצר את הניגון
   (הווידאו התקדם 2.50 שניות בדיוק ב-2.5 שניות שעון). אבל בספארי
   באייפון זה לא נבדק כאן, ושם רוב הצופים. לכן במקום למחוק מהתצוגה,
   המסך מוזז אל מחוץ לחלון, וכך הניגון מובטח בכל מנוע. */
/* 🔴 הניסיון הראשון היה ‎top:-200vh‎, וזה נכשל בעין: המסך הזה גבוה
   מ-200vh (44 שורות), ולכן הזנב שלו חזר לתוך החלון ודלף מעל דף
   ההעמקה. הזזה לא מספיקה כשלא יודעים את הגובה. לכן קיצוץ לגובה
   פיקסל אחד עם ‎overflow:hidden‎: האלמנט נשאר בעץ הרינדור והניגון
   ממשיך, ואין שום דבר לראות. */
#screen-watch:not(.is-active){display:block;position:fixed;top:0;
  inset-inline-start:0;width:100%;height:1px;overflow:hidden;opacity:0;
  pointer-events:none;z-index:-1}

/* ‎minmax(0,1fr)‎ ולא ‎1fr‎: לעמודת גריד יש רוחב מינימלי אוטומטי, ולכן
   שם מרצה ארוך מותח את כל הפריסה מעבר לרוחב המסך. נמדד בטלפון —
   375 פיקסל נראים, 533 בפועל, וחצי מהנגן יוצא מהמסך. */
/* ---------- הפריסה ----------
   🔴 קודם היו כאן שתי עמודות, והרשימה ישבה משמאל וגללה עם כל הדף.
   כלומר במסך רחב הכול נדד יחד והנגן ברח למעלה.

   עכשיו: הרשימה **נעולה מימין** וגוללת בתוך עצמה, התוכן באמצע,
   וכרטיס התוכנית נעול משמאל. העמודה השמאלית מופיעה רק מ-1400 ומעלה,
   כי מתחת לזה היא באה על חשבון רוחב הווידאו, וזה הפסד. */
/* 🔴 העמודה השמאלית ירדה. היא החזיקה כרטיס אחד וגזלה 250 פיקסל
   לאורך כל הדף; הכרטיס עבר לבאר העליון, שם הוא נוכח כל הזמן ואינו
   לוקח שורה אחת מהתוכן. נשארו שתי עמודות, והתוכן קיבל את ההפרש. */
/* 🔴 הווידאו קיבל עמודה צרה כי הסיכום היה חייב להיכנס מתחתיו
   אל תוך המסך הראשון. ברגע שהסיכום עומד **לצדו**, החישוב הזה מיותר:
   הווידאו לוקח כמעט את כל הרוחב, והחלון משמאל רחב מספיק לקריאה. */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  grid-template-areas:"main" "panel" "search" "side" "left"}
#player{grid-area:main;min-width:0}
#panel{grid-area:panel;min-width:0}
#search{grid-area:search;min-width:0}
.side{grid-area:side;min-width:0}
.rail-l{grid-area:left;min-width:0}
@media(min-width:1000px){
  /* 🔴 בסבב הקודם הרשימה נדחפה אל תוך החלון שמשמאל, מתחת לסיכום —
     כלומר 44 ההרצאות ירדו אל מתחת ל-3,700 פיקסל של טקסט, והנגן קיבל
     את כל הצד השני. יוסף, בסיור המוקלט: "מצד ימין עדיין רציתי שיהיה
     כמו שהיה לפני זה, בגרסה שעדיין יש במה שרץ" — ובאותה נשימה,
     "כאן יהיה את הסיכום, ואפילו אולי יהיה יותר רחב".

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

     כל האזורים מוגדרים גם כאן. אזור שאין לו מקום בתבנית פותח עמודה
     מרומזת, וזה מה שכיווץ את הנגן ל-331 פיקסל. */
  .layout{grid-template-columns:clamp(320px,26vw,380px) minmax(0,1fr);
    grid-template-areas:"side main" "side panel" "side search" "left left";
    align-items:start;gap:22px}
  /* נעולה מתחת לבאר העליון, וגוללת בתוך עצמה. ‎overscroll-behavior‎
     מונע מהדף להמשיך לזוז ברגע שהרשימה נגמרה. */
  .layout > .side{position:sticky;top:calc(var(--head-h) + 12px);
    max-height:calc(100vh - var(--head-h) - 24px);
    overflow-y:auto;overscroll-behavior:contain;padding-inline-end:4px;
    scroll-behavior:smooth}
  #panel{position:static;max-height:none;overflow:visible}
  /* הכרטיס עצמו כבר בבאר, ולכן העמודה שהחזיקה אותו מיותרת. */
  .rail-l{display:none}
}

/* ---------- נגן ---------- */
/* המסגרת: תמונה ופס בקרה על משטח כהה אחד. ‎.pic‎ הוא ה-16:9, והפס
   רתום מתחתיו בזרימה. ‎container-type‎ כאן כדי שגודל הכתוביות
   (‎cqw‎) והתווית של כפתור הכתוביות יימדדו מרוחב המסגרת. */
.stage-wrap{position:relative;width:100%;background:#05070F;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);container-type:inline-size}
.pic{position:relative;width:100%;aspect-ratio:16/9;background:#05070F}
.stage-mount{position:absolute;inset:0}
.pic video,.pic iframe{width:100%;height:100%;display:block;border:0}
.drive-cover{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  cursor:pointer;background:#000 center/cover no-repeat;display:flex;
  align-items:center;justify-content:center}
.drive-cover::after{content:'';position:absolute;inset:0;background:rgba(5,7,15,.32)}
.drive-play{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;
  background:var(--orange);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.drive-play::before{content:'';position:absolute;top:50%;left:50%;
  transform:translate(-46%,-50%);border-style:solid;border-width:15px 0 15px 24px;
  border-color:transparent transparent transparent #080D2F}
.drive-cover:hover .drive-play{background:#FF9838}

/* ההרחקה יחסית לגובה התמונה (‎.pic‎), לא למסגרת כולה: הפס שמתחת
   לא נספר, אחרת הכתובית הייתה עולה לאמצע הפנים בטלפון. */
.cap-layer{position:absolute;inset-inline:0;bottom:5%;display:flex;justify-content:center;
           pointer-events:none;padding:0 4%;z-index:2}
/* הגודל נגזר מרוחב הבמה ולא מרוחב החלון, אחרת אותה כתובית ענקית על
   במה קטנה. שלוש המדרגות הן בחירת הצופה ונשמרות במכשיר. */
.cap-layer .cap{
  background:rgba(8,13,47,.62);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  color:#fff;
  font-size:clamp(.72rem,3.6cqw,1.15rem);
  font-weight:400;line-height:1.45;letter-spacing:-.01em;
  padding:.3em .7em;border-radius:10px;
  text-align:center;max-width:min(100%,44ch);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
:root[data-cap="s"] .cap-layer .cap{font-size:clamp(.62rem,3.0cqw,.98rem)}
:root[data-cap="l"] .cap-layer .cap{font-size:clamp(.86rem,4.5cqw,1.45rem)}
.stage-wrap:fullscreen{width:100vw;height:100vh;border-radius:0}
.stage-wrap:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}
/* במסך מלא התמונה ממלאת את המסך והפס מרחף עליה. */
.stage-wrap.fs .pic{position:absolute;inset:0;aspect-ratio:auto}
.stage-wrap:fullscreen video{object-fit:contain}
.stage-wrap:fullscreen .cap-layer{bottom:8%}
.cap-layer:empty{display:none}

/* ---------- הפס בתוך המסגרת ----------
   🔴 הפס היה כרטיס לבן נפרד מתחת לבמה, ובמסך מלא עבר לתוכה פיזית.
   עכשיו הוא חי בתוך המסגרת תמיד, מתחת לתמונה. מה שמשתנה הוא רק
   הטוקנים: אותו רכיב בדיוק על משטח כהה, וכל בן שלו נצבע נכון בלי אף
   כלל נוסף. במסך מלא משתנים רק המיקום, הגרדיאנט וההיעלמות. */
.stage-wrap .pbar{
  --surface:transparent; --ink:#fff; --navy:#fff;
  --dim:rgba(255,255,255,.74);
  --paper:rgba(255,255,255,.08);
  --paper-2:rgba(255,255,255,.16); --paper-3:rgba(255,255,255,.26);
  --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.14);
  --orange-soft:rgba(243,132,32,.26);
  margin:0;border:0;border-radius:0;box-shadow:none;color:#fff;
  padding:4px 14px 8px;background:linear-gradient(to bottom,#0A0E1F,#05070F)}
.stage-wrap .pbar .seek{height:22px}
.stage-wrap .pbar .seek .knob{border-color:rgba(255,255,255,.55)}
.stage-wrap .pbar .seek .ch{background:#fff;opacity:.55}
.stage-wrap .pbar .chaps .cname b{color:#fff}
.stage-wrap .pbar .row2{margin-top:4px}
.stage-wrap .pbar .chaps{margin-top:4px;padding-top:4px}
.stage-wrap .pbar .cbtn.cc .st{color:rgba(255,255,255,.74)}
.stage-wrap .pbar .cbtn.cc.on .st{color:#FFB266}
.stage-wrap.fs .pbar{position:absolute;inset-inline:0;bottom:0;z-index:6;
  padding:34px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
  background:linear-gradient(to top,rgba(3,5,14,.92),rgba(3,5,14,.72) 55%,transparent);
  transform:translateY(102%);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .22s}
.stage-wrap.fs.ui .pbar,.stage-wrap.fs.hold .pbar{transform:none;opacity:1;pointer-events:auto}
.stage-wrap.fs .chaplist{max-height:44vh;overflow:auto}
/* כותרת עליונה: מה מתנגן, ויציאה. בלעדיה מסך מלא הוא וידאו בלי הקשר
   ובלי דלת. */
.fs-top{position:absolute;inset-inline:0;top:0;z-index:6;display:flex;align-items:center;
  gap:10px;color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 30px;
  background:linear-gradient(to bottom,rgba(3,5,14,.86),transparent);
  transform:translateY(-102%);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .22s}
.stage-wrap.fs.ui .fs-top{transform:none;opacity:1;pointer-events:auto}
.fs-top .ft{flex:1;min-width:0;display:block}
.fs-top .ft b{display:block;font-family:var(--f-head);font-weight:800;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-top .ft span{display:block;font-size:.78rem;color:rgba(255,255,255,.72)}
/* על שחור, כפתור בלי רקע נעלם. */
.fs-top .cbtn{color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fs-top .cbtn:hover{background:rgba(255,255,255,.26);color:#fff}
/* העכבר נעלם יחד עם השליטה. */
.stage-wrap.fs{cursor:none}
.stage-wrap.fs.ui{cursor:auto}
/* הכתובית מתרוממת מעל הפס כשהוא גלוי, אחרת הפס יושב עליה. */
.stage-wrap.fs .cap-layer{bottom:8%;transition:bottom .3s}
/* הגובה נמדד בזמן אמת ב-‎fsShowUI‎, כי רשימת פרקים פתוחה משלשת את
   גובה הפס. אחוז קבוע השאיר את הכתובית מתחתיו. */
.stage-wrap.fs.ui .cap-layer{bottom:calc(var(--fsbar,20%) + 12px)}
@media (prefers-reduced-motion:reduce){
  .stage-wrap.fs .pbar,.fs-top,.stage-wrap.fs .cap-layer{transition:none}
}

/* הבזק הלחיצה על התמונה. מופיע וגווע לבד, ואינו מקבל אירועי עכבר. */
.tapf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,13,47,.55);color:#fff;pointer-events:none;opacity:0;z-index:3}
.tapf svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tapf.go{animation:tapf .55s ease-out}
@keyframes tapf{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@media (prefers-reduced-motion:reduce){.tapf.go{animation:none}}
.placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
             text-align:center;padding:24px;background:#080D2F;font-family:var(--f-head)}
.placeholder small{color:#98A2C4;display:block;margin-top:8px;font-family:var(--f-body)}

/* ---------- פס הבקרה שלנו ----------
   הנגן של הדפדפן נראה אחרת בכל מערכת הפעלה, וציר הזמן שלו מתהפך
   בעברית. לכן פס משלנו, וכל הפס כולו LTR כמו שעון. */
.pbar{margin-top:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 12px 10px;box-shadow:var(--shadow);
  display:none}
.pbar.live{display:block}
.pbar .seek{direction:ltr;position:relative;height:26px;display:flex;align-items:center;
  cursor:pointer;touch-action:none}
.pbar .seek .rail{position:absolute;inset-inline:0;height:6px;border-radius:3px;
  background:var(--paper-3);overflow:hidden}
.pbar .seek .buf{position:absolute;inset-block:0;left:0;background:var(--line);width:0}
.pbar .seek .fill{position:absolute;inset-block:0;left:0;background:var(--orange);width:0}
.pbar .seek .knob{position:absolute;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--orange);border:2.5px solid var(--surface);
  box-shadow:0 2px 6px rgba(8,13,47,.35);transform:translateX(-50%);pointer-events:none}
/* סימוני הפרקים יושבים על הפס עצמו, כי שם העין כבר נמצאת.
   🔴 קודם הם היו קווים אפורים דקים בלי שום הסבר, ומי שראה אותם לא ידע
   מה הם. עכשיו הם בצבע ההדגשה, ומתחת לפס יש רצועת פרקים בשמות. */
.pbar .seek .ch{position:absolute;top:50%;width:2px;height:13px;margin-top:-6.5px;
  background:var(--navy);opacity:.34;pointer-events:none;border-radius:1px}

/* רצועת הפרקים: השם של הפרק הנוכחי, וקדימה־אחורה בין פרקים. */
.pbar .chaps{display:flex;align-items:center;gap:4px;margin-top:4px;
  border-top:1px solid var(--line-2);padding-top:5px}
.pbar .chaps .rate{margin-inline-start:auto}
.pbar .chaps .cname{flex:1;min-width:0;font-size:12.5px;color:var(--dim);
  font-family:var(--f-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:none;border:0;text-align:start;cursor:pointer;padding:4px 2px;min-height:44px}
.pbar .chaps .cname b{color:var(--navy);font-weight:700}
/* 44 ולא 34. השער מודד את זה, ו-34 נופל. */
.pbar .chaps .cnav{width:44px;height:44px;border-radius:11px;border:0;background:none;
  color:var(--ink);cursor:pointer;display:grid;place-items:center;flex:none}
.pbar .chaps .cnav:hover{background:var(--paper-2)}
.pbar .chaps .cnav svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbar .chaps .cnav[disabled]{opacity:.3;cursor:default}

/* רשימת הפרקים נפתחת במקום, מתחת לפס.
   🔴 היה כאן גובה מרבי של 230 פיקסל, כלומר קופסה שגוללים בתוכה בתוך
   דף שגם הוא נגלל. אין הרצאה עם יותר מתשעה פרקים, ולכן היא נפתחת
   שלמה, והדף גולל אליה. הגובה המרבי חוזר רק במסך מלא, שם באמת אין
   לאן לגלול. */
.chaplist{margin-top:8px;border-top:1px solid var(--line-2);padding-top:8px;
  /* בלי זה הדפדפן "מפצה" על התוכן שנוסף וגולל את הדף בגובה הרשימה,
     כלומר הפס עצמו קופץ מתחת לאצבע ברגע הפתיחה. */
  overflow-anchor:none}
/* הכפתור הפתוח נראה פתוח. */
.pbar .chaps .cnav.on{background:var(--orange-soft);color:var(--orange-dark)}
.pbar .chaps.open .cname b{color:var(--orange-dark)}
.chaplist button{display:flex;width:100%;gap:10px;align-items:baseline;background:none;
  border:0;text-align:start;padding:9px 6px;border-radius:10px;cursor:pointer;
  color:var(--ink);font-size:14px;min-height:44px}
.chaplist button:hover{background:var(--paper-2)}
.chaplist button.on{background:var(--orange-soft);color:var(--navy);font-weight:700}
.chaplist button time{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;
  color:var(--dim);font-size:12.5px;flex:none;font-family:var(--f-head)}
/* 🔴 שורת הכפתורים הייתה רשימה: הפעלה בקצה, ואחריה עוד שישה דברים
   באותו משקל. עכשיו שלוש קבוצות בשלושה עמודים, וההפעלה **באמצע ממש**
   כי שני העמודים הצדדיים שווים ברוחבם. הקבוצה האמצעית כולה LTR, כי
   ציר הזמן שלנו רץ שמאלה־ימינה, ו"אחורה" חייב לשבת משמאל. */
.pbar .row2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:6px;margin-top:6px}
.pbar .cg{display:flex;align-items:center;gap:2px;min-width:0}
.pbar .cg-end{justify-content:flex-end}
.pbar .cg-mid{direction:ltr;gap:6px}
.pbar .time{direction:ltr;font-family:var(--f-head);font-size:12.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
.pbar .time b{color:var(--navy);font-weight:700}
/* מתחת ל-360 פיקסל שלוש הקבוצות נצמדות. הכפתורים מצטמצמים ולא
   נשברים לשורה שנייה. */
@media(max-width:359px){
  .cbtn{width:40px;height:40px}
  .pbar .cg{gap:0}
  .pbar .time{font-size:11.5px}
}
/* יעד מגע: 44 ולא 38. נמדד בשער, ו-38 נכשל. */
.cbtn{background:none;border:0;padding:0;width:44px;height:44px;border-radius:11px;
  cursor:pointer;color:var(--ink);display:grid;place-items:center;flex:none}
.cbtn:hover{background:var(--paper-2);color:var(--navy)}
.cbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* כפתור ההפעלה אינו עוד כפתור בשורה. הוא הפעולה, ולכן הוא מלא,
   עגול וגדול יותר מכל השאר. הטקסט עליו נייבי ולא לבן, כי לבן על
   הכתום הזה נכשל בניגודיות. */
.cbtn.play{width:54px;height:54px;border-radius:50%;background:var(--orange);
  color:var(--on-orange);box-shadow:0 4px 14px -4px rgba(243,132,32,.75)}
.cbtn.play:hover{background:var(--orange-dark);color:var(--on-orange)}
.cbtn.play svg{width:25px;height:25px;stroke-width:2.4}
.cbtn.on{color:var(--orange-dark);background:var(--orange-soft)}
/* ‎1×‎ בהקשר עברי מתהפך ל-‎×1‎. חייב כיוון מפורש. */
.cbtn.rate{width:auto;min-width:44px;padding:0 8px;font-family:var(--f-head);
  font-weight:700;font-size:13.5px;direction:ltr;unicode-bidi:isolate}

/* ---------- בקרת הכתוביות ----------
   כפתור אחד שאומר את מצבו במילה. ב-390 לקבוצת הצד יש 84 פיקסל, ולכן
   המילה יושבת מתחת לאייקון; כשהמסגרת רחבה מ-640 היא נפתחת לצדו. */
.pbar .cbtn.cc{width:auto;min-width:44px;padding:0 5px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;line-height:1}
.pbar .cbtn.cc svg{width:18px;height:18px}
.pbar .cbtn.cc .lbl{display:none}
.pbar .cbtn.cc .st{font:800 10px/1 var(--f-head);color:var(--dim);font-style:normal;white-space:nowrap}
.pbar .cbtn.cc.on .st{color:var(--orange-dark)}
@container (min-width:640px){
  .pbar .cbtn.cc{flex-direction:row;gap:7px;padding:0 12px}
  .pbar .cbtn.cc .lbl{display:inline;font:700 13px var(--f-head)}
  .pbar .cbtn.cc .st{font-size:12px}
  .pbar .cbtn.cc .st::before{content:'· '}
}
.ccwrap{position:relative;display:inline-flex}
/* החלון הוא משטח הפוך בכוונה, בשני הערכות: הוא מרחף מעל הפס ומעל
   התמונה, ומשטח כהה נקרא כחלון בקרה ולא ככרטיס תוכן. */
.ccpop{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:8;min-width:224px;
  background:var(--invert);color:var(--on-invert);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:8px;box-shadow:0 18px 44px -12px rgba(0,0,0,.8)}
.ccrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--on-invert);
  font:700 .92rem var(--f-head);cursor:pointer;text-align:start}
.ccrow:hover{background:rgba(255,255,255,.1)}
.ccrow .sw{width:40px;height:24px;border-radius:99px;background:rgba(255,255,255,.26);position:relative;flex:none}
.ccrow .sw::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .2s}
.ccrow[aria-checked="true"] .sw{background:var(--orange)}
/* ‎RTL‎: המתג פתוח = הכפתור נוסע שמאלה. */
.ccrow[aria-checked="true"] .sw::after{transform:translateX(-16px)}
.ccsize{display:flex;gap:4px;margin-top:6px;padding:4px;border-radius:12px;background:rgba(255,255,255,.08)}
.ccsize [role=radio]{flex:1;min-height:40px;border:0;border-radius:9px;background:none;
  color:var(--on-invert-2);font:700 13px var(--f-head);cursor:pointer}
.ccsize [role=radio]:hover{color:var(--on-invert)}
.ccsize [role=radio][aria-checked="true"]{background:var(--orange);color:var(--on-orange)}
.pbar .grow{flex:1}
.pbar .chip{font-size:12px;color:var(--dim);font-family:var(--f-head);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}

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

/* ---------- רצועת התוכן ----------
   מתחת למסגרת: מה מתנגן, ואז צ'יפים שאומרים מה מחכה למטה ומביאים
   לשם בלחיצה. "סמן כנצפה" בקצה, כי היא פעולה משנית. */
/* 🔴 רצועות הערוץ נקראות גם הן ‎.strip‎, ומכיוון שהן מוגדרות
   בהמשך הקובץ הן דרסו את הגריד הזה: הכותרת והצ'יפים נדחסו לשורה
   אחת שגלשה מהמסגרת. הרצועה כאן נבחרת במזהה, ולכן היא לא נדרסת. */
#strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;
  margin-top:12px}
#strip .now{margin:0;grid-column:1 / -1;align-items:center}
#strip .now .face{width:48px;height:48px;border-radius:12px}
#strip .now h2{font-size:1.1rem;line-height:1.3;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
#strip .anchors{grid-column:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  min-width:0;padding:2px 0}
#strip .anchors::-webkit-scrollbar{display:none}
#strip #b-done{grid-column:2}
.anchor{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;
  border-radius:99px;background:var(--surface);border:1px solid var(--line);cursor:pointer;
  font:700 .86rem var(--f-head);color:var(--navy);white-space:nowrap}
.anchor b{font-weight:800;color:var(--orange-dark);font-variant-numeric:tabular-nums}
.anchor svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.anchor:hover{border-color:var(--orange);background:var(--orange-soft)}
/* בטלפון הצ'יפים מקבלים שורה שלמה, ו"סמן כנצפה" יורד מתחתיהם. */
@media(max-width:559px){
  #strip{grid-template-columns:1fr}
  #strip .anchors,#strip #b-done{grid-column:1}
  #strip #b-done{justify-self:start}
}
.btn{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 15px;
     font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink);white-space:nowrap;
     font-family:var(--f-head);min-height:44px}
.btn:hover{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-dark)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn.primary:hover{background:var(--ink);color:var(--paper)}
@media(min-width:520px){.btn.primary{margin-inline-start:auto}}
/* שורת הפעולות המשניות מתחת לנגן. שני כפתורים קטנים באותו משקל,
   ולא כפתור ענק שגונב את העין מכפתור ההפעלה. */
.btn.small{padding:8px 13px;font-size:.84rem;min-height:40px;border-radius:10px}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#04231D}
.btn.ok:hover{background:var(--ok);border-color:var(--ok);color:#04231D;filter:brightness(1.06)}
.btn.primary.done{background:var(--ok);border-color:var(--ok);color:#04231D}
.btn.cta{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.btn.cta:hover{background:var(--orange-dark);color:var(--on-orange)}
.notice{margin-top:12px;background:var(--orange-soft);border:1px solid var(--orange);
        color:var(--warn);border-radius:12px;padding:10px 14px;font-size:.88rem;display:none}
.notice.show{display:block}
.notice{position:relative;padding-inline-end:44px}
.notice .nx{position:absolute;inset-inline-end:4px;top:2px;background:none;border:0;
  color:var(--warn);font-size:15px;cursor:pointer;min-width:44px;min-height:44px;
  border-radius:10px}
.notice .nx:hover{background:rgba(146,64,14,.1)}

/* ---------- מה מתנגן עכשיו ---------- */
.now{margin-top:16px;display:flex;gap:14px;align-items:flex-start}
.now .face{width:56px;height:56px;border-radius:14px;flex:none;object-fit:cover;
  background:var(--paper-3);box-shadow:var(--shadow)}
.now .nt{flex:1;min-width:0}
.now h2{font-size:1.2rem;font-weight:800;line-height:1.3}
.now .who{color:var(--dim);font-size:.9rem;margin-top:2px}
/* ── הדרך חזרה, מעל הווידאו ──
   כפתור אחד עם חץ, ולצדו הנושא והיום כדי שיהיה ברור לאן חוזרים. */
.backbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:44px;
  flex-wrap:wrap}
.backbar:empty{display:none}
.backcat{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:44px;
  padding:0 15px;border-radius:99px;background:var(--surface);
  border:1px solid var(--line);cursor:pointer;box-shadow:var(--shadow);
  font:800 .9rem var(--f-head);color:var(--navy);white-space:nowrap;
  transition:border-color .15s,background .15s}
.backcat svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.backcat:hover{border-color:var(--orange);background:var(--orange-soft)}
.bbcat,.bbday{font:700 .82rem var(--f-head);color:var(--dim);white-space:nowrap}
.bbcat{color:var(--orange-dark)}
.bbcat::after{content:'·';margin-inline-start:10px;color:var(--dim)}
.now .note{margin-top:.5rem;font-size:.84rem;line-height:1.5;color:var(--dim);
  border-inline-start:3px solid var(--orange);padding-inline-start:.6rem}

/* ---------- הקטלוג ----------
   "הכנס" הוא קטלוג: פוסטר לכל הרצאה, פנים, אורך, והתקדמות על הפוסטר.
   השורות של הרשימה הצדדית נשארות למסך הצפייה; כאן העין בוחרת מתמונה. */
/* שורת בקרה אחת: חיפוש, סדר, וכמה נצפו. בלי כותרת שחוזרת על הבאר. */
.chead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
.chead .filter{flex:1 1 220px;max-width:420px;margin:0}
.chead .filter input{padding:10px 38px 10px 12px;font-size:.9rem}
.chead .segs{margin:0;flex:0 0 auto;padding:3px}
.chead .segs .seg{flex:0 0 auto;white-space:nowrap;padding:7px 12px;min-height:38px;font-size:13px}
.chead .cprog{flex:1 1 160px;display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--dim);
  font-family:var(--f-head);min-width:0;justify-content:flex-end}
.chead .cprog b{color:var(--navy);font-weight:800}
.chead .cprog .bar2{flex:1 1 60px;max-width:140px;height:6px;border-radius:3px;background:var(--paper-3);
  overflow:hidden;display:block}
.chead .cprog .bar2 i{display:block;height:100%;background:var(--orange)}
.chead .cprog span:last-child{white-space:nowrap}
.chead #cat-all{flex:1 1 100%}
#hintslot:empty{display:none}
/* הרמז הוא שורה, לא כרזה: הוא מציע, לא תופס את המסך. */
#hintslot .starthint{grid-template-columns:auto 1fr auto;gap:10px;background:var(--surface);
  border-color:var(--line);box-shadow:var(--shadow);padding:9px 10px 9px 12px;margin:12px 0 0}
#hintslot .starthint span{grid-column:2;font-size:.84rem;font-weight:400;font-family:var(--f-body);
  color:var(--ink)}
#hintslot .starthint .btn{grid-column:3;grid-row:1;width:auto;min-height:38px;padding:7px 14px;
  font-size:.82rem;background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
#hintslot .starthint .hx{grid-column:1;grid-row:1;width:32px;height:32px}
@media(max-width:559px){
  #hintslot .starthint{grid-template-columns:auto 1fr}
  #hintslot .starthint .btn{grid-column:1 / -1;grid-row:2;width:100%}
}
.wallsec{margin-top:26px}
.wall-h{display:flex;align-items:baseline;gap:10px;font-size:1.05rem;font-weight:800;
  margin:0 0 12px}
.wall-h small{font-family:var(--f-body);font-weight:400;font-size:.83rem;color:var(--dim)}
.wall{display:grid;gap:20px 12px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
@media(min-width:900px){.wall{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:26px 16px}}
/* 🔴 כפתור נמתח לגובה השורה בקיר, והדפדפן ממרכז את תוכנו
   אנכית. כרטיס עם שורה אחת פחות היה מוריד את הפוסטר שלו ב-50 פיקסל,
   והקיר נראה מדורג. עמודת פלקס נועלת את כל הפוסטרים לאותו גובה. */
.pc{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  width:100%;text-align:start;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;border-radius:14px}
.pc .pcimg{position:relative;display:block;flex:none;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#05070F;box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s}
.pc .pcimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
/* גרדיאנט תחתון: המשך והאורך נקראים על כל פריים, גם בהיר. */
.pc .pcimg::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(5,7,15,.72),transparent)}
.pc .pcplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.88);
  width:46px;height:46px;border-radius:50%;background:var(--orange);color:var(--on-orange);
  display:grid;place-items:center;opacity:0;transition:opacity .18s,transform .18s;
  box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:1}
.pc .pcplay svg{width:19px;height:19px;fill:currentColor;stroke:none}
.pc .pcdur{position:absolute;inset-inline-end:7px;bottom:7px;z-index:1;background:rgba(5,7,15,.72);color:#fff;
  font:800 11.5px/1 var(--f-head);padding:4px 7px;border-radius:6px;font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pc .pcbar{position:absolute;inset-inline:0;bottom:0;height:4px;background:rgba(255,255,255,.28);z-index:1}
.pc .pcbar i{display:block;height:100%;background:var(--orange)}
.pc .pctick{position:absolute;top:7px;inset-inline-start:7px;z-index:1;width:24px;height:24px;border-radius:50%;
  background:var(--ok);color:#04231D;display:grid;place-items:center}
.pc .pctick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pc.done .pcimg img{opacity:.68}
.pc .pcb{display:flex;gap:9px;align-items:flex-start;margin-top:9px}
.pc .pcface{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-3)}
.pc .pct{min-width:0}
.pc .t1{display:block;font:700 .92rem/1.32 var(--f-head);color:var(--navy);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pc .t2{display:block;font-size:.76rem;color:var(--dim);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* 🔴 קיר של 44 פוסטרים אומר מי מדבר ולא על מה. שורת הפתיחה של כל
   הרצאה היא מה שמייצר חשק לצפות, והיא כבר קיימת בנתונים. */
.pc .pchook{display:block;margin-top:7px;padding-inline-start:9px;border-inline-start:2px solid var(--orange);
  font:400 .82rem/1.45 var(--f-body);color:var(--ink);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(hover:hover){
  .pc:hover .pcimg{box-shadow:0 0 0 2px var(--orange),var(--shadow-lg);transform:translateY(-3px)}
  .pc:hover .pcimg img{transform:scale(1.045)}
  .pc:hover .pcplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* ---------- הקיר במחשב ----------
   שני שינויים, ושניהם על אותו רעיון: שהפוסטר יהיה הכרטיס.
   🔴 במנוחה כל כרטיס הראה פוסטר, פנים, כותרת בשתי שורות, מרצה **וגם**
   שתי שורות הוק. זה קיר של טקסט עם תמונות בתוכו, וזה ההפך ממה שקורה
   בשירות סטרימינג. ההוק עולה **מעל** הפוסטר בריחוף בלבד. הוא יוצא
   מהזרימה, ולכן כל הכרטיסים מתקצרים באותה מידה ואף אחד לא קופץ.
   הגובה ‎56.25cqw‎ הוא בדיוק היחס 16:9 של רוחב הכרטיס, כלומר גובה
   הפוסטר עצמו — בלי אלמנט חדש ובלי מדידה בקוד. */
@media(min-width:1400px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:30px 20px}
}
@media(hover:hover) and (min-width:1000px){
  .pc{position:relative;container-type:inline-size}
  .pc .pchook{position:absolute;inset-inline:0;top:0;height:56.25cqw;margin:0;
    padding:14px 13px;border:0;z-index:2;color:#fff;
    display:flex;align-items:flex-end;
    background:linear-gradient(to top,rgba(5,7,15,.88) 38%,rgba(5,7,15,.25) 78%,transparent);
    border-radius:14px;
    opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s}
  .pc:hover .pchook,.pc:focus-visible .pchook{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .pc .pchook{transition:none}
}
.pc:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .pc:hover .pcimg,.pc:hover .pcimg img{transform:none}
  .pc .pcimg,.pc .pcimg img,.pc .pcplay{transition:none}
}

/* ---------- מפת ההרצאה ----------
   🔴 "הסיכום והמשימות מסתכמות במילים בלבד". המפה היא המידע עצמו
   בצורה שאפשר לקרוא בשנייה: כל פרק ברוחב שלו באמת, נקודה כתומה בכל
   מקום שיצאה ממנו משימה, וראש נע שאומר איפה הווידאו נמצא עכשיו. */
.dmap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px 14px;box-shadow:var(--shadow);margin:0 0 16px}
.dmap-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:800 .72rem var(--f-head);letter-spacing:.06em;color:var(--dim);margin-bottom:9px}
.dmap-k b{color:var(--orange-dark);font-size:.86rem;letter-spacing:0}
/* המקרא. הדגימה זהה בצורה ובצבע לסיכה עצמה, אחרת היא מקרא של כלום. */
.dmap-lg{display:inline-flex;align-items:center;gap:6px;margin-inline-start:11px;
  font-style:normal;font-weight:700;letter-spacing:.04em;color:var(--dim)}
.dmap-lg i{width:11px;height:11px;border-radius:50%;border:2px solid var(--orange);
  background:var(--surface);flex:none;box-sizing:border-box}
.dmap-bar{position:relative;display:flex;gap:2px;height:40px;border-radius:8px;overflow:hidden;
  background:var(--paper-3)}
.dseg{flex:1;min-width:0;background:var(--paper-2);overflow:hidden;
  color:var(--dim);font:800 .74rem var(--f-head);display:grid;place-items:center;
  transition:background .15s,color .15s}
.dseg.on{background:var(--navy);color:#fff}
/* החריץ יושב על הפס עצמו ולא מעליו, ולכן ברור שהוא מקום בזמן. הוא
   עובר גם מעל מקטע בהיר וגם מעל המקטע הפעיל הכהה, ולכן יש לו טבעת
   לבנה שמפרידה אותו מהרקע בשני המקרים. */
/* ---------- הסיכות של המשימות ----------
   כל סיכה היא כפתור אמיתי: לחיצה קופצת לרגע בהרצאה שממנו המשימה
   נולדה. המספר עליה הוא בדיוק המספר שלה ברשימה שמתחת, והיא מתמלאת
   כשמסמנים אותה כבוצעה. סיכה מלאה היא משימה שנסגרה.

   🔴 העיגול הנראה הוא 28 פיקסל, אבל **הכפתור עצמו 40 על 44** והעיגול
   רק יושב בתוכו. סיכה בגודל שלה עצמה נפלה בשער יעדי המגע, ובצדק:
   22 פיקסל זה מתחת לכל תקן, ואצבע לא פוגעת בזה. תיבות המגע של שתי
   סיכות סמוכות חופפות מעט, והעיגולים הנראים לא, ולכן מי שמכוון למה
   שהוא רואה פוגע נכון. */
/* 🔴 בטלפון הפס צר, ושש סיכות בשורה אחת חייבו להזיז אותן עד שלוש
   דקות מהמקום האמיתי שלהן. סיכה שמראה זמן לא נכון היא בדיוק השקר
   שהמפה אמורה למנוע. לכן כשצפוף הן נופלות לשתי שורות מדורגות: כל
   אחת נשארת על השנייה שלה, ורק המרווח בתוך אותה שורה נאכף. */
.dmap-pins{position:relative;height:44px;transition:height .15s}
.dmap-pins.two{height:76px}
.dpin.lo{height:76px}
.dpin{position:absolute;top:0;transform:translateX(50%);
  width:40px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:end center}
[dir="ltr"] .dpin{transform:translateX(-50%)}
.dpin i{width:28px;height:28px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--orange);background:var(--surface);color:var(--orange-dark);
  font:800 .78rem/1 var(--f-head);font-style:normal;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  /* טבעת בצבע הכרטיס. נראית רק במקום שבו שתי סיכות נוגעות, ושם היא
     מפרידה ביניהן. */
  box-shadow:0 0 0 2px var(--surface);
  transition:background .15s,color .15s,transform .15s}
/* הרגל שמחברת את הסיכה לפס. בלעדיה הסיכה מרחפת, וזו בדיוק הבעיה
   שהייתה בגרסה הראשונה. ממורכזת פיזית, ולכן נכונה בשני הכיוונים. */
.dpin::before{content:'';position:absolute;top:0;bottom:28px;left:50%;margin-left:-1px;
  width:2px;background:var(--orange);opacity:.55}
.dpin.done i{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
.dpin:hover i{transform:translateY(-1px)}
.dpin:focus-visible{outline:none}
.dpin:focus-visible i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--orange-dark)}
/* בטלפון הפס צר פי שלושה. עיגול קטן יותר שומר על שתי משימות סמוכות
   כשתי סיכות ולא ככתם אחד. תיבת המגע נשארת 40. */
@media(max-width:700px){.dpin i{width:26px;height:26px;font-size:.74rem}
  .dpin::before{bottom:26px}}
@media (prefers-reduced-motion:reduce){.dpin i{transition:none}}
.dmap-hit{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;
  cursor:pointer;padding:0}
.dmap-bar:hover .dseg{background:var(--orange-soft);color:var(--orange-dark)}
.dmap-bar:hover .dseg.on{background:var(--navy);color:#fff}
.dmap-now{position:absolute;top:0;bottom:0;width:2px;background:var(--orange);
  box-shadow:0 0 0 2px rgba(243,132,32,.28);pointer-events:none;transform:translateX(50%)}
[dir="ltr"] .dmap-now{transform:translateX(-50%)}
.dmap-t{margin:9px 0 0;font:700 .9rem/1.4 var(--f-head);color:var(--navy)}
.dstat{display:flex;gap:16px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.dstat span{display:flex;flex-direction:column;font-size:.74rem;color:var(--dim)}
.dstat b{font:900 1.15rem var(--f-head);color:var(--navy);font-variant-numeric:tabular-nums}

/* ---------- הפרקים ככרטיסים ---------- */
.dsec{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.dsec small{font-family:var(--f-body);font-weight:400;font-size:.82rem;color:var(--dim)}
.dchs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dch{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;
  transition:border-color .15s}
.dch.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.dch-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dch-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper-3);color:var(--navy);
  display:grid;place-items:center;font:800 .76rem var(--f-head)}
.dch.on .dch-n{background:var(--orange);color:var(--on-orange)}
.dch-h h3{flex:1;min-width:0;font:800 .95rem/1.35 var(--f-head);color:var(--navy);margin:0}
.dch-len{flex:none;font:700 .74rem var(--f-head);color:var(--dim);font-variant-numeric:tabular-nums}
.dch p{margin:8px 0 0;font-size:.88rem;line-height:1.6;color:var(--ink)}
/* יעד מגע מלא, בלי שהריבוע עצמו יגדל: הכפתור 40 והריבוע 22 בתוכו. */
.tchk{flex:none;border:0;background:none;padding:0;margin:-9px -9px -9px -9px;cursor:pointer;
  width:40px;height:40px;display:grid;place-items:center;border-radius:10px}
.tchk:hover{background:var(--paper-2)}
.tb-wrap{flex:1;min-width:0}
.task .th .tn-n{margin-inline-end:7px}
.tn-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--paper-3);color:var(--navy);font:800 .7rem var(--f-head);margin-inline-end:6px;
  vertical-align:1px}
.task.done .tn-n{background:var(--ok);color:#04231D}

/* ---------- כרטיסים ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:15px;box-shadow:var(--shadow)}
.search{margin-top:18px}
.search h3{font-size:1rem;margin-bottom:10px}
.search input,.qbox input{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;font-size:1rem;outline:none;background:var(--paper);color:var(--ink);
  min-height:46px}
.search input:focus,.qbox input:focus{border-color:var(--orange)}
.hits{max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain;
  margin-top:10px;display:flex;flex-direction:column;gap:8px}
.hit{padding:10px 12px;background:var(--paper);border:1px solid transparent;border-radius:10px;
     cursor:pointer;font-size:.9rem;text-align:right;font:inherit;color:inherit;
     font-size:.9rem;width:100%}
.hit:hover{border-color:var(--orange);background:var(--orange-soft)}
.hit b{display:block;color:var(--orange-dark);font-size:.78rem;margin-bottom:3px;font-weight:800;
  font-family:var(--f-head);font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.hit mark{background:var(--orange-soft);color:var(--orange-dark);border-radius:3px;padding:0 2px;
  font-weight:700}
.hit .where{display:block;color:var(--dim);font-size:.76rem;margin-top:4px}
.hit.other{background:var(--surface);border-color:var(--line)}
.hits-head{font-size:.8rem;color:var(--dim);font-weight:700;margin:12px 0 2px;
  padding-top:10px;border-top:1px solid var(--line);font-family:var(--f-head)}

/* ---------- רשימת השיעורים ---------- */
/* 🔴 "אין הפרדה בין הבלוקים": כל האזורים ישבו באותו מרחק זה מזה, ולכן
   נקראו כרשימה אחת ארוכה. עכשיו יש שלוש דרגות מרווח, וקו אחד שמפריד
   בין הכרום לתוכן. */
.side{display:flex;flex-direction:column;gap:14px}
.side-h{font-size:1.05rem;font-weight:800;margin:10px 0 2px;padding-top:18px;
  border-top:1px solid var(--line)}
.side-h small{display:block;font-family:var(--f-body);font-weight:400;font-size:.83rem;
  color:var(--dim);margin-top:2px}
.side .msp-card{margin-bottom:2px}
/* כותרת הקבוצה נשארת על המסך בזמן גלילה, כדי שתמיד ידוע איפה נמצאים. */
.day-top{position:sticky;top:0;z-index:1;background:var(--surface);
  padding-block:2px;margin-inline:-2px;padding-inline:2px}
/* 🔴 ‎#daylist‎ לא היה מוגדר בכלל, ולכן קבוצות הימים נערמו זו על גב זו
   בלי מרווח: שישה כרטיסים בעלי גבול שנוגעים זה בזה נקראים ככרטיס אחד
   ארוך. יוסף העיר על זה פעמיים ("אין כאן הפרדות בין האלמנטים של כל יום
   או קטגוריה, תתקן את זה"), וזו הסיבה. המרווח הוא ההפרדה; הקו והרקע
   הבהיר מתחת לכותרת אומרים איפה מתחילה קבוצה חדשה. */
#daylist{display:flex;flex-direction:column;gap:18px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)}
.day+.day{position:relative;margin-top:4px}
.day+.day::before{content:'';position:absolute;inset-inline:16px;top:-12px;height:1px;
  background:var(--line)}
.day-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.day-top h3{font-size:1.02rem;font-weight:800}
.day-top h3::before{content:'';display:inline-block;width:4px;height:15px;border-radius:2px;
  background:var(--orange);margin-inline-end:8px;vertical-align:-2px}
.day-top span{font-size:.8rem;color:var(--dim);font-weight:700;font-family:var(--f-head);
  font-variant-numeric:tabular-nums}
.track{height:6px;background:var(--paper-3);border-radius:3px;overflow:hidden;margin-bottom:12px}
.track i{display:block;height:100%;background:var(--orange);width:0;transition:width .3s}
/* שורת הרצאה היא button ולא div: 44 השורות היו בלתי נגישות מהמקלדת
   ומקורא המסך, וזה הכשל הנגישותי הגדול ביותר שהיה כאן. */
.row{display:flex;align-items:center;gap:11px;padding:9px;border-radius:13px;cursor:pointer;
     border:1px solid transparent;background:var(--paper);margin-bottom:7px;width:100%;
     text-align:right;font:inherit;color:inherit;min-height:60px;
     transition:border-color .15s,background .15s}
.row:hover{border-color:var(--orange);background:var(--orange-soft)}
.row.active{border-color:var(--orange);background:var(--orange-soft);
  box-shadow:inset 0 0 0 1px var(--orange)}
.row[hidden]{display:none}
/* תצלום המרצה במקום פריים מהווידאו. הפריים הראשון של הקלטה חיה
   הוא כמעט תמיד המרצה הקודם או שקופית ריקה. */
.row .thumb{display:block;width:46px;height:46px;border-radius:12px;flex:0 0 auto;
  overflow:hidden;background:var(--paper-3)}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row .txt{display:block;flex:1 1 auto;min-width:0}
.row .t1{display:block;font-size:.92rem;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .t2{font-size:.77rem;color:var(--dim);display:flex;gap:8px;margin-top:1px}
.row .t2 > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row .t2 > span + span{flex:0 0 auto;margin-inline-start:auto;font-family:var(--f-head);
  font-variant-numeric:tabular-nums}
.row .tick{width:21px;height:21px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;
           display:grid;place-items:center;font-size:11px;color:#fff;font-weight:800}
.row.done .tick{background:var(--ok);border-color:var(--ok)}
.row.done .tick::after{content:'✓'}
.mini{display:block;height:3px;background:var(--line);border-radius:2px;margin-top:5px;
  overflow:hidden}
.mini i{display:block;height:100%;background:var(--orange);width:0}

/* ---------- התקנת האפליקציה ---------- */
.install-chip{display:flex;align-items:flex-start;gap:4px;width:100%;
  background:var(--orange-soft);border:1.5px dashed var(--orange);border-radius:var(--radius);
  padding:6px;margin:0 0 14px;color:var(--ink)}
.install-chip .ic-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  text-align:right;background:none;border:0;padding:4px 6px;cursor:pointer;
  font:inherit;color:inherit}
.install-chip img{border-radius:10px;flex:none}
.install-chip .c1{font-weight:700;font-family:var(--f-head)}
.install-chip .c2{font-size:13px;color:var(--dim)}
.install-chip .ic-x{flex:none;background:none;border:0;color:var(--dim);
  font-size:16px;line-height:1;min-width:44px;min-height:44px;cursor:pointer;border-radius:9px}
.install-chip .ic-x:hover{background:rgba(8,13,47,.08);color:var(--ink)}
.sheet-backdrop{position:fixed;inset:0;background:rgba(8,13,47,.55);z-index:120;
  display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop[hidden]{display:none}
.sheet{background:var(--surface);width:min(560px,100%);border-radius:22px 22px 0 0;
  padding:10px 20px calc(24px + var(--safe-b));max-height:88dvh;overflow:auto}
.sheet-handle{width:44px;height:5px;border-radius:99px;background:var(--line);margin:6px auto 14px}
.sheet h3{margin:0 0 6px;font-size:19px}
.sheet .faint{color:var(--dim);font-size:14px}
.ig-step{display:flex;gap:12px;align-items:flex-start;margin:12px 0;line-height:1.55}
.ig-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange);
  color:var(--on-orange);font-weight:800;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-family:var(--f-head)}
.ig-glyph{display:inline-flex;vertical-align:-4px;color:#0A84FF;margin:0 3px}
.ig-glyph svg{width:19px;height:19px}
.ig-cta{display:block;width:100%;margin-top:14px;background:var(--orange);color:var(--on-orange);
  border:0;border-radius:12px;padding:14px;font:inherit;font-weight:800;font-size:16px;
  cursor:pointer;min-height:48px;font-family:var(--f-head)}
.ig-x{display:block;width:100%;margin-top:8px;background:none;border:0;color:var(--dim);
  font:inherit;font-size:14px;cursor:pointer;padding:12px;min-height:44px;border-radius:10px}
.ig-x:hover{background:var(--paper-2);color:var(--ink)}

/* ---------- הובלה למאסטר ספיקר פרו ---------- */
.msp-card{background:var(--invert);color:var(--on-invert);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.msp-card .mark{font-weight:800;font-size:15px;letter-spacing:.06em;direction:ltr;text-align:right;
  font-family:var(--f-head)}
.msp-card .mark b{color:var(--orange)}
.msp-card p{margin:8px 0 12px;font-size:14px;line-height:1.55;color:#C7CDEA}
.msp-card p span{display:block;margin-top:7px;color:var(--orange);font-family:var(--f-head);
  font-weight:700}
.msp-card a{display:block;text-align:center;background:var(--orange);color:#080D2F;font-weight:800;
  border-radius:999px;padding:12px 16px;text-decoration:none;font-size:15px;font-family:var(--f-head)}

/* ---------- סיכום ומשימות ---------- */
.docbar{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.docbar a{flex:1;min-width:150px;text-align:center;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 14px;text-decoration:none;color:var(--ink);font-weight:700;background:var(--surface);
  min-height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);
  font-size:.92rem}
.docbar a:hover{border-color:var(--orange);color:var(--orange-dark);background:var(--orange-soft)}
.foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);text-align:center;
  font-size:13px;color:var(--dim)}
.foot a{color:var(--dim);display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  border-radius:10px}
.foot a:hover{color:var(--ink);background:var(--surface)}

/* ---------- מסנן הרשימה ---------- */
.filter{position:relative;margin-bottom:12px}
.filter input{width:100%;padding:12px 40px 12px 14px;border:1px solid var(--line);
  border-radius:12px;font-size:.95rem;background:var(--surface);outline:none;min-height:46px;
  color:var(--ink)}
.filter input:focus{border-color:var(--orange)}
.filter .fx{position:absolute;inset-inline-start:4px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--dim);font-size:15px;cursor:pointer;
  min-width:38px;min-height:38px;border-radius:9px;display:none}
.filter.has .fx{display:block}
.filter .fx:hover{background:var(--paper-2);color:var(--ink)}
.filter-none{padding:14px;text-align:center;color:var(--dim);font-size:.9rem}

/* ---------- התקדמות כוללת ---------- */
.overall{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:.85rem;
  color:var(--dim);flex-wrap:wrap}
.overall .bar2{flex:1 1 140px;height:8px;background:var(--paper-3);border-radius:4px;overflow:hidden}
@media(max-width:520px){.overall .bar2{flex-basis:100%}}
.overall .bar2 i{display:block;height:100%;background:var(--ok);width:0;transition:width .3s}
.overall b{color:var(--navy);font-weight:800;font-family:var(--f-head)}

.allbtn{display:block;width:100%;margin-top:10px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:12px;font:inherit;
  font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer;min-height:46px;
  font-family:var(--f-head)}
.allbtn:hover{border-color:var(--orange);background:var(--orange-soft);color:var(--orange-dark)}
.allbtn[disabled]{opacity:.55;cursor:progress}

/* ============================================================
   הבאר התחתון והנגן המיני
   הבאר קיים בטלפון בלבד. במחשב יש מקום לשתי עמודות, ובאר תחתון שם
   הוא רעש. הנגן המיני הוא מה שהופך את הבאר לאפשרי בכלל: בלעדיו כל
   מעבר בין מסכים היה הורג את הניגון.
   ============================================================ */
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);box-shadow:0 -6px 24px -14px rgba(8,13,47,.4)}
.tabbar ul{display:flex;list-style:none;margin:0;padding:0}
.tabbar li{flex:1;display:flex}
.tab{flex:1;background:none;border:0;padding:7px 2px 6px;cursor:pointer;color:var(--dim);
  display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;
  font-family:var(--f-head);font-size:11.5px;font-weight:700;position:relative}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--orange-dark)}
.tab.on::before{content:'';position:absolute;top:0;inset-inline:22%;height:3px;
  border-radius:0 0 3px 3px;background:var(--orange)}
.tab .dot{position:absolute;top:5px;inset-inline-end:calc(50% - 17px);width:7px;height:7px;
  border-radius:50%;background:var(--orange);display:none}
.tab.has-dot .dot{display:block}

.miniplayer{position:fixed;inset-inline:0;z-index:59;display:none;
  background:var(--invert);color:var(--on-invert);align-items:center;gap:10px;padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.1)}
.miniplayer.live{display:flex}
/* מסגרת קבועה: כאן יושב או התצלום או הווידאו עצמו. הגודל אחיד כדי
   שהרצועה לא תקפוץ ברגע שהווידאו נכנס. */
.miniplayer .mvid{flex:none;width:72px;height:41px;border-radius:8px;overflow:hidden;
  background:#05070F;display:block;position:relative;cursor:pointer}
.miniplayer .mvid.has img{display:none}
.miniplayer .mvid video{width:100%;height:100%;display:block;object-fit:cover;border:0}
.miniplayer img{width:100%;height:100%;border-radius:0;object-fit:cover;display:block;
  background:#1B2447}
.miniplayer .mt{flex:1;min-width:0}
.miniplayer .m1,.miniplayer .m2{display:block}
.miniplayer .m1{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-family:var(--f-head)}
.miniplayer .m2{font-size:11.5px;color:var(--on-invert-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#mini-x{opacity:.72}
#mini-x:hover{opacity:1}
#mini-x svg{width:17px;height:17px}
.miniplayer button{background:none;border:0;color:#fff;cursor:pointer;width:40px;height:40px;
  border-radius:10px;display:grid;place-items:center;flex:none}
.miniplayer button:hover{background:rgba(255,255,255,.12)}
.miniplayer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.miniplayer .mprog{position:absolute;inset-inline:0;top:0;height:2px;background:rgba(255,255,255,.14)}
.miniplayer .mprog i{display:block;height:100%;background:var(--orange);width:0}

/* ---------- הרצועה העליונה, למחשב ----------
   🔴 עד כאן הבאר היה קיים בטלפון בלבד, ובמחשב פשוט לא הייתה שום דרך
   להגיע לבית, לחיפוש, ל"שלי" ולנושאים. הכול נבנה והיה נעול. */
.topnav{display:none;margin:0 0 18px}
.topnav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0 0 10px;
  border-bottom:1px solid var(--line)}
.topnav .tab{flex-direction:row;gap:8px;min-height:44px;padding:0 15px;
  border-radius:12px;font-size:.92rem;background:none}
.topnav .tab svg{width:19px;height:19px}
.topnav .tab:hover{background:var(--paper-2);color:var(--navy)}
.topnav .tab.on{background:var(--invert);color:var(--on-invert)}
.topnav .tab.on::before{display:none}
.topnav .tab .dot{top:9px;inset-inline-end:6px}

@media(min-width:900px){
  .topnav{display:block}
  /* הרצועה התחתונה קיימת גם במחשב, כי הווידאו נוסע גם שם.
     בלי ‎bottom‎ מפורש אלמנט ‎fixed‎ נשאר במקום שבו הוא נכתב בדף. */
  .miniplayer{bottom:0}
  .miniplayer.live ~ #app,body:has(.miniplayer.live){--mini-h:62px}
}

@media(max-width:899px){
  :root{--bar-h:56px}
  .tabbar{display:block}
  .miniplayer{bottom:calc(56px + var(--safe-b))}
  .miniplayer.live ~ #app,body:has(.miniplayer.live){--mini-h:58px}
}

/* ============================================================
   מסך "הכנס": בורר תצוגה וקטגוריות
   ============================================================ */
.segs{display:flex;gap:6px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:13px;padding:4px;margin-bottom:14px;
  /* במחשב בורר של שתיים או שלוש אפשרויות נמתח על אלף פיקסלים, והמצב
     הפעיל נראה כמו כרזה. בסרגל הצד הוא ממילא צר מזה. */
  max-width:560px}
.seg{flex:1;background:none;border:0;border-radius:10px;padding:9px 6px;cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:13.5px;color:var(--dim);min-height:42px}
.seg:hover{color:var(--navy)}
.seg.on{background:var(--surface);color:var(--navy);box-shadow:var(--shadow)}

/* ---------- כרטיסי הנושאים ----------
   אייקון שמבדיל, טקסט שמסביר, ופס שאומר כמה כבר נעשה. הכרטיס מסתיים
   בחץ קבוע, כי כרטיס בלי סימן כניסה נקרא כטקסט על נייר. */
.cats{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.cat{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 14px 13px 40px;text-align:right;cursor:pointer;
  font:inherit;color:inherit;box-shadow:var(--shadow);display:flex;gap:12px;
  align-items:flex-start;overflow:hidden;transition:border-color .15s,transform .1s}
.cat::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--orange);opacity:0;transition:opacity .15s}
.cat:hover{border-color:var(--orange)}
.cat:hover::before{opacity:1}
.cat:active{transform:scale(.99)}
.cat .ci{flex:none;width:40px;height:40px;border-radius:13px;background:var(--orange-soft);
  color:var(--orange-dark);display:grid;place-items:center}
.cat .ci svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cat .cb{flex:1;min-width:0;display:block}
.cat .ct,.cat .cd,.cat .cp,.cat .cc{display:block}
.cat .ct{font-family:var(--f-head);font-size:1rem;font-weight:800;line-height:1.3;
  display:flex;align-items:center;gap:7px}
/* המספר הוא תג ולא שורה בפני עצמה. שורה שכל תוכנה "תשע הרצאות"
   מאריכה את הכרטיס בעשרים אחוז ואומרת מה שהתג אומר בחצי מבט. */
.cat .cn{flex:none;font-size:.72rem;font-weight:800;color:var(--dim);
  background:var(--paper-2);border-radius:99px;padding:2px 8px;
  font-variant-numeric:tabular-nums}
.cat .cd{font-size:.81rem;color:var(--dim);line-height:1.5;margin-top:3px}
.cat .cp{height:4px;border-radius:2px;background:var(--paper-3);margin:9px 0 5px;
  overflow:hidden}
.cat .cp i{display:block;height:100%;background:var(--ok);border-radius:2px}
.cat .cc{font-size:.76rem;color:var(--dim);font-weight:700;font-family:var(--f-head);
  font-variant-numeric:tabular-nums}
.cat .go{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--dim);
  display:grid;place-items:center}
.cat:hover .go{background:var(--orange);color:var(--on-orange)}
.cat .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* נושא שהושלם אינו עוד כרטיס ברשימה. */
.cat.full .ci{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-ink)}
.cat.full .cc{color:var(--ok-ink)}
.backlink{background:none;border:0;color:var(--dim);font:inherit;font-weight:700;
  cursor:pointer;padding:8px 0;min-height:44px;font-family:var(--f-head);font-size:.9rem}
.backlink:hover{color:var(--navy)}

/* ---------- כרטיס "להמשיך" ---------- */
.resume{background:var(--invert);color:var(--on-invert);border-radius:var(--radius);padding:16px;
  margin-bottom:16px;display:flex;gap:13px;align-items:center;text-align:right;
  width:100%;border:0;font:inherit;cursor:pointer}
.resume img{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none;background:#1B2447}
.resume .rt{flex:1;min-width:0}
/* ‎span‎ הוא inline כברירת מחדל, ובלי ההצהרה הזאת שלוש השורות רצות
   אחת על השנייה. נתפס בעין בטלפון. */
.resume .r0,.resume .r1,.resume .r2,.resume .rbar{display:block}
.resume .r0{font-size:11.5px;letter-spacing:.1em;color:var(--orange);font-weight:800;
  font-family:var(--f-head);margin-bottom:3px}
.resume .r1{font-size:1rem;font-weight:800;font-family:var(--f-head);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.resume .r2{font-size:12.5px;color:#98A2C4;margin-top:2px}
.resume .rbar{height:4px;background:rgba(255,255,255,.16);border-radius:2px;margin-top:8px;
  overflow:hidden}
.resume .rbar i{display:block;height:100%;background:var(--orange);width:0}

/* המעשה האחד הגדול בראש הבית. הוא לא עוד כרטיס: הוא כהה, הוא רחב,
   ויש בו סמל הפעלה כדי שיהיה ברור בלי לקרוא מילה שלוחצים עליו. */
.hero{display:flex;align-items:center;gap:13px;width:100%;text-align:start;
  background:var(--invert);color:var(--on-invert);border:0;border-radius:var(--radius);
  padding:15px 16px;cursor:pointer;box-shadow:var(--shadow-lg);font:inherit;
  margin-bottom:14px}
.hero:hover{filter:brightness(1.08)}
.hero:active{transform:scale(.994)}
.hero .hface{width:60px;height:60px;border-radius:15px;object-fit:cover;flex:none}
.hero .ht{flex:1;min-width:0}
.hero .hk,.hero .hh,.hero .hs{display:block}
.hero .hk{font-family:var(--f-head);font-size:11.5px;font-weight:800;letter-spacing:.09em;
  color:var(--orange-dark)}
:root[data-theme="dark"] .hero .hk{color:#FFB266}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero .hk{color:#FFB266}}
.hero .hh{font-family:var(--f-head);font-weight:800;font-size:1.02rem;line-height:1.3;
  margin:2px 0 2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.hero .hs{font-size:.8rem;color:var(--on-invert-2)}
.hero .hbar{display:block;height:4px;border-radius:2px;background:rgba(127,140,190,.32);
  margin-top:8px;overflow:hidden}
.hero .hbar i{display:block;height:100%;background:var(--orange)}
.hero .hgo{flex:none;width:44px;height:44px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center;color:var(--on-orange)}
.hero .hgo svg{width:20px;height:20px}

/* ── הגיבור הוויזואלי ──
   🔴 עד כאן הבית לא הראה אף פריים מתוך 44 הסרטונים. הגיבור נושא את
   הפריים של ההרצאה, ולכן הדבר הראשון על המסך הוא **מה יש כאן** ולא
   תיאור של מה יש כאן. במחשב התמונה בצד ההתחלה והטקסט לצדה; בטלפון
   התמונה למעלה ברוחב מלא, כי שם 16:9 לצד טקסט משאיר לשניהם כלום. */
.hero-v{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0;
  align-items:stretch;overflow:hidden;position:relative}
.hero-v .hv-pic{position:relative;display:block;aspect-ratio:16/9;background:#05070F;
  overflow:hidden}
.hero-v .hv-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* מסכה כהה בתחתית התמונה בלבד: היא מחזיקה את הכפתור ומונעת פריים בהיר
   שבולע אותו, בלי להכהות את הפנים בחצי העליון. */
.hero-v .hv-pic::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(5,7,15,.72),transparent);pointer-events:none}
.hero-v .hv-play{position:absolute;inset-inline-end:12px;bottom:12px;z-index:1;
  width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--on-orange);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hero-v .hv-play svg{width:22px;height:22px}
.hero-v:hover .hv-play{background:var(--orange-dark)}
.hero-v .ht{padding:15px 16px 16px}
.hero-v .hs{display:flex;align-items:center;gap:8px;margin-top:5px}
.hero-v .hface{width:34px;height:34px;border-radius:11px;object-fit:cover;flex:none}
@media(min-width:700px){
  .hero-v{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center}
  .hero-v .hv-pic{height:100%;aspect-ratio:auto;min-height:168px}
  .hero-v .ht{padding:18px 20px}
  .hero-v .hh{font-size:1.24rem}
}
/* 🔴 במחשב רחב זו הייתה תמונה של 300 פיקסל ליד 1118 פיקסל של טקסט:
   הגיבור של דף הבית היה בעיקר כיתוב. התמונה לוקחת את רוב הרוחב
   וחוזרת ליחס 16:9, כמו כל פריים אחר במוצר. */
@media(min-width:1200px){
  .hero-v{grid-template-columns:minmax(0,58%) minmax(0,1fr)}
  .hero-v .hv-pic{aspect-ratio:16/9;height:auto;min-height:0}
  .hero-v .ht{padding:26px 30px}
  .hero-v .hh{font-size:1.5rem}
}

/* ── רצועת הפוסטרים ──
   גלילה אופקית עם עצירה על כרטיס, ובלי פס גלילה גלוי. זו אותה שפה
   של הקטלוג, ולכן אין כאן רכיב חדש ללמוד. */
.hrow{margin-top:6px}
.hrow .sec-h{margin-top:18px}
/* 🔴 רצועה שגוללת לרוחב **בעברית** דלפה החוצה: המסמך כולו נמתח ל-1612
   פיקסלים על מסך של 390, הדפדפן התכווץ כדי להכיל אותו, וכל האפליקציה
   נראתה זעירה. הסיבה היא שבכיוון ימין-לשמאל אזור הגלילה של המיכל מתפרש
   **שמאלה**, אל מחוץ למסמך, ושם אין מה שיחתוך אותו.

   נמדד, ארבע דרכים: ‎overflow:clip‎ על ההורה — 1612. על מסך הבית — 1612.
   על ‎body‎ — 1612. ‎contain:paint‎ על המיכל עצמו — 390. כלומר רק בידוד
   הציור של המיכל עוצר את הדליפה, ולא שום חיתוך של אב.
   ‎direction:ltr‎ גם פותר, ולכן ברור שזה הכיוון ולא התוכן. */
.hscroll{display:flex;max-width:100%;contain:paint;
  gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:2px 0 10px;margin-inline:-16px;padding-inline:16px;
  scrollbar-width:none}
.hscroll>*{flex:0 0 216px;max-width:216px}
@media(min-width:700px){.hscroll>*{flex:0 0 236px;max-width:236px}}
/* בבית של 1440 זה ארבעה כרטיסים והצצה על החמישי, וההצצה היא מה
   שאומר לעין שיש עוד. */
@media(min-width:1400px){.hscroll>*{flex:0 0 288px;max-width:288px}}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>.pc{scroll-snap-align:start}
.hrow-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hrow-top .sec-h{margin-bottom:11px;flex:1;min-width:0}
.hrow-all{flex:none;margin-bottom:13px;min-height:38px;padding:0 14px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;
  font:800 .82rem var(--f-head);color:var(--navy);white-space:nowrap}
.hrow-all:hover{border-color:var(--orange);background:var(--orange-soft)}

/* פני המרצים שבתוך הנושא. שלוש תמונות חופפות במקום עוד שורת טקסט. */
.cfaces{display:flex;margin-top:9px}
.cfaces img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface);margin-inline-start:-9px}
.cfaces img:first-child{margin-inline-start:0}

.hgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.hgrid{grid-template-columns:1fr 1fr}}
/* 🔴 הכרטיסים נראו כמו טקסט על נייר ולא כמו משהו שלוחצים עליו.
   שלושה סימנים מוסיפים את זה בלי להוסיף רעש: חץ קבוע בקצה, קו הדגשה
   שנדלק בריחוף, ותגובה פיזית ללחיצה. */
.tile{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 46px 15px 16px;text-align:right;font:inherit;
  color:inherit;cursor:pointer;box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .15s,transform .1s}
.tile::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--orange);opacity:0;transition:opacity .15s}
.tile:hover{border-color:var(--orange)}
.tile:hover::before{opacity:1}
.tile:active{transform:scale(.99)}
.tile[disabled]{opacity:.55;cursor:default}
.tile .go{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--paper-2);color:var(--dim);
  display:grid;place-items:center}
.tile:hover .go{background:var(--orange);color:var(--on-orange)}
.tile .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tile .k{font-size:11.5px;letter-spacing:.1em;color:var(--orange-dark);font-weight:800;
  font-family:var(--f-head);display:block;margin-bottom:5px}
.tile h3{font-size:1.02rem;font-weight:800;margin-bottom:3px}
.tile p{font-size:.85rem;color:var(--dim);line-height:1.5}
.sec-h{font-size:1.05rem;font-weight:800;margin:22px 0 11px}
.sec-h small{display:block;font-family:var(--f-body);font-weight:400;font-size:.83rem;
  color:var(--dim);margin-top:2px}

/* ---------- "שלי" ---------- */
.mine .card{margin-bottom:12px}
.mine h3{font-size:1rem;margin-bottom:4px}
.mine .lead{font-size:.86rem;color:var(--dim);margin-bottom:11px;line-height:1.55}
.bigstat{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.bigstat b{display:block;font-family:var(--f-head);font-weight:900;font-size:1.7rem;
  color:var(--navy);font-variant-numeric:tabular-nums;direction:ltr;text-align:right;line-height:1.1}
.bigstat span{font-size:.78rem;color:var(--dim)}
.code{font-family:var(--f-head);font-weight:900;font-size:1.5rem;letter-spacing:.16em;
  color:var(--orange-dark);direction:ltr;text-align:right;background:var(--orange-soft);
  border-radius:11px;padding:11px 16px;display:inline-block}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line-2)}
.switch:first-of-type{border-top:0}
.switch .sl,.switch .ss{display:block}
.switch .sl{font-size:.92rem;font-weight:700}
.switch .ss{font-size:.79rem;color:var(--dim);margin-top:1px}
/* מתג בעברית: הידית במנוחה בצד ימין ונוסעת שמאלה, כמו במערכת ההפעלה.
   כאן משתמשים במאפיינים פיזיים בכוונה — האפליקציה כולה ‎dir=rtl‎ —
   כי ‎inset-inline-end‎ עם ‎translateX‎ שלילי הוציא את הידית מהמסילה. */
.toggle{position:relative;width:50px;height:29px;border-radius:99px;background:var(--paper-3);
  border:0;cursor:pointer;flex:none;transition:background .2s}
.toggle::after{content:'';position:absolute;top:3px;right:3px;width:23px;height:23px;
  border-radius:50%;background:var(--surface);box-shadow:0 1px 4px rgba(8,13,47,.3);
  transition:transform .2s}
.toggle[aria-pressed="true"]{background:var(--orange)}
.toggle[aria-pressed="true"]::after{transform:translateX(-21px)}
.danger{background:none;border:1.5px solid var(--bad);color:var(--bad);border-radius:11px;
  padding:11px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:46px;
  font-family:var(--f-head);font-size:.9rem}
.danger:hover{background:var(--bad);color:#fff}

/* ---------- השאלון ---------- */
.quiz{max-width:600px;margin:0 auto;text-align:center;padding:10px 0 30px}
.quiz .qn{font-family:var(--f-head);font-size:12px;letter-spacing:.12em;color:var(--orange-dark);
  font-weight:800;margin-bottom:10px}
.quiz h2{font-size:clamp(1.25rem,4.4vw,1.75rem);font-weight:900;line-height:1.25}
.quiz .qs{color:var(--dim);font-size:.92rem;margin-top:8px}
.qopts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.qopt{background:var(--surface);border:1.5px solid var(--line);border-radius:15px;
  padding:15px 17px;text-align:right;font:inherit;color:inherit;cursor:pointer;
  box-shadow:var(--shadow);min-height:56px}
.qopt:hover{border-color:var(--orange);background:var(--orange-soft)}
.qopt b{display:block;font-family:var(--f-head);font-weight:800;font-size:1rem}
.qopt span{display:block;font-size:.83rem;color:var(--dim);margin-top:2px;line-height:1.45}
.qdots{display:flex;gap:6px;justify-content:center;margin-top:24px}
.qdots i{width:7px;height:7px;border-radius:50%;background:var(--paper-3)}
.qdots i.on{background:var(--orange);width:20px;border-radius:4px}
.route{text-align:right}
.route .rh{background:var(--invert);color:var(--on-invert);border-radius:var(--radius);padding:20px;
  margin-bottom:16px}
.route .rh .k{font-family:var(--f-head);font-size:11.5px;letter-spacing:.12em;
  color:var(--orange);font-weight:800;margin-bottom:6px}
.route .rh h2{font-size:1.4rem;font-weight:900;color:#fff}
.route .rh p{color:#C7CDEA;font-size:.92rem;margin-top:8px;line-height:1.6}

/* ---------- דף העמקה ---------- */
.deep{max-width:760px;margin:0 auto}
.deep .dh{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.deep .dh img{width:88px;height:88px;border-radius:20px;object-fit:cover;flex:none;
  background:var(--paper-3);box-shadow:var(--shadow-lg)}
.deep .dh .k{font-family:var(--f-head);font-size:11.5px;letter-spacing:.12em;
  color:var(--orange-dark);font-weight:800;margin-bottom:5px}
.deep .dh h1{font-size:clamp(1.35rem,4.2vw,2rem);font-weight:900;line-height:1.18}
.deep .dh .who{color:var(--dim);font-size:.9rem;margin-top:4px}
.deep .lede{font-size:1.06rem;line-height:1.75;color:var(--ink);margin-bottom:22px}
.deep blockquote{background:var(--orange-soft);border:0;border-inline-start:4px solid var(--orange);
  border-radius:0 15px 15px 0;padding:18px 20px;margin:22px 0;
  font-family:var(--f-head);font-weight:700;font-size:1.12rem;line-height:1.6;color:var(--navy)}
.deep blockquote footer{font-family:var(--f-body);font-weight:400;font-size:.83rem;
  color:var(--orange-dark);margin-top:7px}
.deep h2{font-size:1.15rem;font-weight:800;margin:26px 0 8px;line-height:1.35}
.deep p{margin-bottom:14px;line-height:1.8}
/* ---------- חותמת זמן ----------
   🔴 היא נראתה כמו מספר צבעוני. עכשיו יש בה משולש הפעלה ומסגרת, ולכן
   היא נקראת ככפתור עוד לפני שקוראים את המספר. */
/* ריווח נדיב אנכית, כי זה יעד מגע בתוך משפט. הוא פטור מכלל 40
   הפיקסלים לפי החריג לתוכן בתוך שורה, והשער מתעד את הפטור. */
.ts{border:1px solid color-mix(in srgb,var(--orange) 42%,transparent);padding:3px 9px 3px 7px;border-radius:99px;
  cursor:pointer;font-family:var(--f-head);font-weight:700;font-size:.8em;
  color:var(--orange-dark);background:var(--orange-soft);
  display:inline-flex;align-items:center;gap:4px;vertical-align:.08em;
  line-height:1.7;white-space:nowrap}
.ts span{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ts svg{width:.85em;height:.85em;flex:none;opacity:.9}
.ts:hover{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}

/* ---------- תנאי שימוש ----------
   לא אותיות קטנות ולא קופסה אפורה: מסגרת ברורה עם סמל, כי המסר הזה
   אמור להיקרא ולא להיבלע. */
.legal-note{display:flex;gap:10px;align-items:flex-start;margin-top:10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;font-size:.82rem;line-height:1.6;color:var(--ink)}
.legal-note svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;
  stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.legal-note b{font-family:var(--f-head)}

/* ההסבר על החותמות. פעם אחת, בראש, לפני החותמת הראשונה. */
.tshint{display:flex;align-items:center;gap:9px;background:var(--orange-soft);
  border-radius:12px;padding:10px 13px;margin:14px 0 6px;font-size:.84rem;
  color:var(--orange-dark);font-weight:700;line-height:1.5}
.tshint svg{width:15px;height:15px;flex:none;fill:currentColor;stroke:none}

/* ---------- רצועת היציאה של דף ההעמקה ----------
   נדבקת לראש המסך, כי דף שאורכו אלף מילים בולע יציאה שנגללת. */
/* אותו רוחב כמו המאמר שמתחתיו. בלי זה הרצועה נמתחת על אלף פיקסלים
   וכפתור החזרה נראה כמו פס, לא ככפתור. */
.deep-top{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:8px;
  max-width:760px;margin:0 auto 6px;padding:6px 0 8px;background:var(--paper);
  border-bottom:1px solid var(--line-2)}
.deep-top button{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:0 13px;min-height:44px;
  font:inherit;font-family:var(--f-head);font-weight:700;font-size:.86rem;
  color:var(--ink);cursor:pointer}
.deep-top button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.deep-top .dback{flex:1;justify-content:flex-start}
.deep-top .dback:hover{border-color:var(--orange);color:var(--orange-dark)}
.deep-top .dplay{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.deep-top .dplay svg{fill:currentColor;stroke:none;width:15px;height:15px}
.deep-top .dplay:hover{background:var(--orange-dark)}
.action{background:var(--invert);color:var(--on-invert);border-radius:var(--radius);padding:18px 20px;
  margin:22px 0}
.action .k{font-family:var(--f-head);font-size:11.5px;letter-spacing:.12em;color:var(--orange);
  font-weight:800;margin-bottom:7px}
.action p{font-size:1.08rem;font-weight:700;font-family:var(--f-head);line-height:1.5;margin:0}
.tasks{list-style:none;margin:12px 0 0}
.task{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;margin-bottom:9px;cursor:pointer;
  text-align:right;font:inherit;color:inherit;width:100%}
.task:hover{border-color:var(--orange)}
.task .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:12px;color:#fff;font-weight:800;margin-top:1px}
.task.done .box{background:var(--ok);border-color:var(--ok)}
.task.done .box::after{content:'✓'}
.task.done .tb{opacity:.55;text-decoration:line-through}
/* 🔴 שניהם היו ‎span‎ בלי ‎display‎, ולכן הכותרת והגוף רצו זה
   לתוך זה בשורה אחת: "לכתוב את כל השיטכתבו רשימה". */
.task .th{display:block;font-family:var(--f-head);font-weight:800;font-size:.97rem;margin-bottom:3px}
.task .tb{display:block;font-size:.88rem;color:var(--dim);line-height:1.55}
.ring{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.ring svg{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bgc{stroke:var(--paper-3)}
.ring .fgc{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .3s}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;font-size:.8rem;color:var(--dim);font-family:var(--f-head);font-weight:700}

/* ---------- תזכורת, קישור אישי והודעות ---------- */
/* שבעה עיגולים ברוחב 44 אינם נכנסים ל-318 פיקסלים ולכן נשברו לשתי
   שורות. גובה 44 נשמר כיעד מגע, והרוחב מתחלק. */
.days{display:flex;gap:5px;margin:10px 0 12px;
  /* במחשב שבעה כפתורים נמתחים על אלף פיקסלים ונראים כמו טבלה. */
  max-width:430px}
.dchip{flex:1;min-width:0;height:44px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:var(--f-head);font-weight:700;
  font-size:.95rem;cursor:pointer}
.dchip:hover{border-color:var(--orange)}
.dchip.on{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.rrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rrow label{font-size:.9rem;font-weight:700;font-family:var(--f-head)}
.rrow input[type=time]{border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  background:var(--surface);color:var(--ink);font-family:var(--f-head);min-height:44px;
  direction:ltr;unicode-bidi:isolate}
.rrow .rstate{font-size:.8rem;color:var(--dim);flex-basis:100%}

.linkbox{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin:4px 0 10px;overflow-x:auto}
.linkbox code{font-family:var(--f-head);font-size:.82rem;color:var(--ink);white-space:nowrap}
/* אזהרה היא מידע, לא בהלה. גבול אחד בצד ולא קופסה אדומה. */
.warn-note{margin-top:10px;font-size:.82rem;line-height:1.6;color:var(--ink);
  border-inline-start:3px solid var(--orange);padding-inline-start:11px}

/* ---------- פתיחה אוטומטית ----------
   כשהיא רצה, כל שאר הכרטיס יורד. לא כי הוא מיותר, אלא כי תיבת קוד
   מול אדם שלא צריך להקליד קוד היא הזמנה להקליד משהו. */
.gate-card.busy > *:not(#auto){display:none}
.auto{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 4px 20px;text-align:center}
.auto[hidden]{display:none}
.auto-spin{width:30px;height:30px;border-radius:50%;flex:none;
  border:3px solid var(--line);border-top-color:var(--orange);
  animation:autospin .8s linear infinite}
@keyframes autospin{to{transform:rotate(360deg)}}
.auto-t{font-family:var(--f-head);font-weight:700;font-size:1rem;color:var(--navy)}
@media (prefers-reduced-motion:reduce){.auto-spin{animation-duration:2.4s}}

/* ---------- רמז ----------
   לא התראה ולא חלון: שורה שקטה שיושבת מעל סרגל הניווט, נעלמת
   מעצמה, ואפשר לסגור אותה. אותה נוסחת מיקום של ההודעות הקטנות. */
.hint{position:fixed;inset-inline:12px;
  bottom:calc(var(--bar-h) + var(--mini-h) + 16px + var(--safe-b));
  margin-inline:auto;max-width:520px;z-index:79;
  display:flex;align-items:flex-start;gap:10px;
  background:var(--invert);color:var(--on-invert);border-radius:15px;
  padding:12px 14px;font-size:.9rem;line-height:1.55;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(10px);transition:opacity .26s,transform .26s}
.hint.in{opacity:1;transform:none}
.hint[hidden]{display:none}
/* 🔴 28 פיקסל. אצבע צריכה 40, וכפתור סגירה שמחטיאים אותו מרגיש
   כמו רמז שלא נסגר. הריפוד גדל ולא הסימן עצמו, כדי שהמראה לא ישתנה. */
.hint-x{flex:none;background:none;border:0;color:inherit;opacity:.55;
  font-size:.95rem;line-height:1;cursor:pointer;padding:10px 8px;
  min-height:40px;min-width:40px;margin:-8px -6px -8px 0}
.hint-x:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.hint{transition:none}}

#toast{position:fixed;inset-inline:0;bottom:calc(var(--bar-h) + var(--mini-h) + 16px + var(--safe-b));
  margin-inline:auto;width:max-content;max-width:88vw;z-index:80;
  background:var(--invert);color:var(--on-invert);border-radius:999px;
  padding:11px 20px;font-size:.88rem;font-family:var(--f-head);font-weight:700;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none}
#toast.go{animation:toastin 3.4s ease-out}
@keyframes toastin{0%{opacity:0;transform:translateY(10px)}
  9%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){#toast.go{animation:toastfade 3.4s linear}
  @keyframes toastfade{0%,100%{opacity:0}9%,82%{opacity:1}}}

/* התזכורת בדף הבית. שורה אחת, בלי כפתור סגירה שצריך ללחוץ עליו:
   היא מופיעה פעם ביום ונעלמת מעצמה בכניסה הבאה. */
.remind-note{display:flex;align-items:center;gap:10px;background:var(--orange-soft);
  border:1px solid var(--orange);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:14px;font-size:.88rem;color:var(--warn)}
.remind-note b{font-family:var(--f-head);color:var(--navy)}

/* ---------- מצבי החיפוש ---------- */
/* אותו מתג מקטעים כמו בשאר האפליקציה, כדי ששני הכפתורים ייקראו
   כבחירה אחת ולא כשני כפתורים נפרדים שמרחפים בחלל. */
.findmodes{display:flex;gap:6px;margin:12px 0 6px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:13px;padding:4px;flex-wrap:wrap}
.findmodes .mhint{font-size:.78rem;color:var(--dim);flex-basis:100%;
  padding:2px 8px 4px;line-height:1.5}
/* ============================================================
   מסך החיפוש · "איפה זה נאמר"
   שדה גדול בראש, אינדקס ההרצאות נעול מימין במחשב, וכרטיסי הרצאה
   שבתוכם שורות רגעים. אין טוקן חדש: הכתום נשאר הדגש היחיד.
   ============================================================ */
.fhead h2{font-size:1.45rem;font-weight:800;line-height:1.2;color:var(--navy)}
.fhead .lead{font-size:.9rem;color:var(--dim);margin:4px 0 14px;line-height:1.55}
.fbox{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:4px 14px 4px 8px;
  box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.fbox:focus-within{border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.fbox .qic{flex:none;display:grid;place-items:center;color:var(--dim)}
.fbox .qic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fbox input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;
  font-size:1.12rem;color:var(--ink);min-height:54px;outline:none}
.fbox input::placeholder{color:var(--dim)}
.fbox input::-webkit-search-cancel-button,
.fbox input::-webkit-search-decoration{-webkit-appearance:none;display:none}
/* הניקוי שלנו, כדי שלא יהיו שני איקסים. מופיע רק כשיש מה לנקות. */
.fclr{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:var(--paper-2);color:var(--dim);display:grid;place-items:center}
.fclr:hover{background:var(--orange-soft);color:var(--navy)}
.fclr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* שורת הבוררים: המצב מימין עם ההסבר לצדו, הסינון משמאל. */
.fctl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:12px}
#fctl .findmodes,#fctl .segs{margin:0}
/* 🔴 flex:1 מתח את קופסת המצב על שמונה מאות פיקסלים כמעט ריקים.
   היא מודדת את עצמה לפי מה שיש בה, וההפרדה עושה את השאר. */
#fctl .findmodes{flex:0 1 auto;min-width:0}
#fctl .findmodes .seg{flex:0 0 auto;padding:8px 15px;min-height:38px}
#fctl .segs{flex:0 1 auto;max-width:none}
#fctl .segs .seg{padding:8px 12px;min-height:38px;white-space:nowrap}
@media(min-width:700px){#fctl .mhint{flex-basis:auto;flex:1;padding:0 10px}}
/* בטלפון שתי הקופסאות תופסות שורה מלאה כל אחת, ולכן הן מתכווצות:
   ארבע שורות של בוררים לפני תוצאה אחת הן מה שהמסך הזה בא לתקן. */
@media(max-width:699px){
  .fctl{gap:8px;margin-top:10px}
  #fctl .findmodes,#fctl .segs{flex:1 1 100%;padding:3px;border-radius:12px}
  #fctl .findmodes .seg,#fctl .segs .seg{font-size:13px;padding:7px 10px;min-height:36px}
  #fctl .findmodes .seg,#fctl .segs .seg{flex:1;white-space:normal}
  #fctl .mhint{font-size:.74rem;padding:1px 6px 2px}
}

/* הסיכום, וההתקדמות בטעינה הראשונה. */
.fsum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 12px;
  min-height:24px;font-family:var(--f-head);font-weight:700;color:var(--navy)}
.fsum:empty{margin:0;min-height:0}
.fsum .fnote{font-family:var(--f-body);font-weight:400;font-size:.84rem;color:var(--dim)}
.fload{flex:1 1 160px;height:4px;border-radius:2px;background:var(--paper-3);overflow:hidden}
.fload i{display:block;height:100%;width:0;background:var(--orange);border-radius:2px;
  transition:width .2s}

/* המצב הריק: צ'יפים של מילים שבאמת נאמרו בכנס. */
.fempty{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.fk{display:block;font-family:var(--f-head);font-size:.74rem;font-weight:800;
  letter-spacing:.06em;color:var(--dim);margin-bottom:8px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:8px 15px;min-height:40px;cursor:pointer;font:inherit;font-family:var(--f-head);
  font-weight:700;font-size:.88rem;color:var(--navy)}
.fchip:hover{border-color:var(--orange);background:var(--orange-soft)}

/* הפריסה: טור אחד, ומ-1040 האינדקס נעול מימין והרגעים משמאל.
   🔴 האינדקס נסתר ב-CSS ולא ב-hidden, כי הכלל הגלובלי היה מעלים
   אותו בכל רוחב. */
.flay{display:block}
.frail{display:none}
.fres{display:flex;flex-direction:column;gap:14px}
@media(min-width:1040px){
  .flay.has{display:grid;grid-template-columns:272px minmax(0,1fr);gap:22px;align-items:start}
  .flay.has .frail{display:block;position:sticky;top:calc(var(--head-h) + 12px);
    max-height:calc(100vh - var(--head-h) - 24px);overflow:auto;
    overscroll-behavior:contain;padding-inline-end:2px}
}
.fri{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 10px;
  border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:start}
.fri:hover{background:var(--paper-2)}
.fri.on{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.fri img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--paper-3)}
.fri .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-head);font-weight:700;font-size:.86rem;color:var(--navy)}
.fri .n{flex:none;font-family:var(--f-head);font-weight:800;font-size:.74rem;color:var(--dim);
  background:var(--paper-2);border-radius:99px;padding:2px 8px;
  font-variant-numeric:tabular-nums}

/* כרטיס הרצאה. הכרטיס אומר איפה, השורות שבתוכו אומרות מתי. */
.fg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:calc(var(--head-h) + 14px)}
.fgh{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
  border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;
  color:inherit;text-align:start;cursor:pointer}
.fgh:hover{background:var(--paper)}
.fgh img{width:46px;height:46px;border-radius:14px;object-fit:cover;flex:none;
  background:var(--paper-3)}
.fgh .ft{flex:1;min-width:0}
.fgh .ft b{display:block;font-family:var(--f-head);font-weight:800;font-size:1.02rem;
  line-height:1.3;color:var(--navy)}
.fgh .ft small{display:block;font-size:.82rem;color:var(--dim);margin-top:3px}
.fgh .seen{color:var(--ok-ink);font-weight:700}
.fgn{flex:none;font-family:var(--f-head);font-weight:800;font-size:.76rem;color:var(--navy);
  background:var(--orange-soft);border-radius:99px;padding:4px 10px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fgh .go{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-2);
  color:var(--dim);display:grid;place-items:center}
.fgh:hover .go{background:var(--orange);color:var(--on-orange)}
.fgh .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* שורת רגע: צ'יפ זמן שנקרא ככפתור עוד לפני שקוראים את המספר,
   והטקסט לצדו. הפרדה בקו, לא כרטיס בתוך כרטיס. */
.mo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  width:100%;padding:12px 16px;border:0;border-top:1px solid var(--line-2);
  background:none;font:inherit;color:var(--ink);text-align:start;cursor:pointer;
  font-size:16px;line-height:1.7}
.fgh + .mo{border-top:0}
.mo:hover{background:var(--paper)}
.mo:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.mo .t{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:74px;
  margin-top:2px;padding:4px 10px 4px 8px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--orange) 42%,transparent);
  background:var(--orange-soft);color:var(--orange-dark);
  font-family:var(--f-head);font-weight:700;font-size:.8rem;line-height:1.6;
  white-space:nowrap}
.mo .t span{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.mo .t svg{width:.85em;height:.85em;flex:none;fill:currentColor}
.mo:hover .t{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
/* 🔴 טור התוצאות במחשב הוא 826 פיקסלים, ובאלף 16 זה מאה ועשרה תווים
   בשורה. העין מאבדת את תחילת השורה הבאה. שמונים ומשהו זה הגבול. */
.mo .x{min-width:0;max-width:640px}
/* 🔴 הכתום הכהה על הכתום הרך היה 3.2:1. נייבי נותן מעל 12:1. */
.mo mark{background:var(--orange-soft);color:var(--navy);font-weight:700;border-radius:4px;
  padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;padding:11px;border:0;border-top:1px solid var(--line-2);
  background:var(--paper);font:inherit;font-family:var(--f-head);font-weight:700;
  font-size:.84rem;color:var(--dim);cursor:pointer}
.fmore:hover{color:var(--navy)}
.fmore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.fg.open .fmore svg{transform:rotate(180deg)}
.fnone{padding:22px;text-align:center;color:var(--dim);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);line-height:1.6}
.fnone b{display:block;font-family:var(--f-head);font-size:1rem;color:var(--navy);
  margin-bottom:6px}
.fnone .btn{margin-top:12px}
@media(max-width:899px){.mo{font-size:15.5px;padding:11px 13px}.fgh{padding:12px 13px}}
/* בטלפון החץ גזל מהכותרת ארבעים וארבעה פיקסלים, וכל הכותרת היא ממילא
   כפתור. השם והמרצה חשובים ממנו. */
@media(max-width:559px){
  .fgh{gap:10px}.fgh .go{display:none}
  .fgh img{width:42px;height:42px;border-radius:12px}
  .fgh .ft b{font-size:.96rem}
}

/* קופסת ההתראות ב"שלי". היא נבנית אחרי בדיקה אסינכרונית של מצב
   ההרשאה, ולכן היא מתחילה ריקה ואסור שתקפוץ כשהיא מתמלאת. */
.pushbox{min-height:8px}
.pushbox .warn-note{margin-top:14px}

/* ---------- גרסה ועדכון ----------
   הרצועה יושבת מעל הכול, כי גרסה ישנה היא הדבר היחיד שגורם לאדם למחוק
   את האפליקציה במקום לדווח על באג. */
.upbar{position:fixed;z-index:80;inset-inline:12px;
  bottom:calc(12px + var(--bar-h) + var(--mini-h) + var(--safe-b));
  display:flex;align-items:center;gap:10px;background:var(--invert);
  color:var(--on-invert);border-radius:14px;padding:10px 12px;
  box-shadow:var(--shadow-lg);font-size:.88rem;
  max-width:520px;margin-inline:auto}
.upbar span{flex:1;min-width:0}
.upbar button{background:var(--orange);color:var(--on-invert);border:0;border-radius:10px;
  padding:0 13px;min-height:40px;font:inherit;font-family:var(--f-head);font-weight:800;
  cursor:pointer;flex:none}
.upbar button:hover{background:var(--orange-dark)}
.upbar #upx{background:none;color:var(--on-invert-2);width:36px;min-height:36px;padding:0;
  display:grid;place-items:center}
.upbar #upx svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.upbar #upx:hover{background:rgba(255,255,255,.14);color:var(--on-invert)}

.appver{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-2);font-size:.82rem;color:var(--dim)}
.appver b{color:var(--navy);font-family:var(--f-head);font-variant-numeric:tabular-nums}
.appver .vstate{margin-inline-start:auto;font-weight:700;font-family:var(--f-head)}
.appver .vstate .new{color:var(--orange-dark)}
/* צעדי ההתקנה מגיעים מהגיליון הקופץ ונשארים אותו רכיב, כדי שלא יהיו
   שתי גרסאות של אותן הוראות. */
.apsteps{margin-top:10px}

/* ---------- הזמנה לשאלון ----------
   שני מקומות, שני משקלים. בדף הבית, למי שעוד לא צפה בכלום, זו הפעולה
   הראשית עצמה. במסך הכנס זו שורה אחת מעל הרשימה: מוצא, לא מוצר. */
/* ‎--orange‎ על נייבי נקרא חום עכור. על רקע כהה הענבר הוא הצבע
   שעובד, וזה אותו ערך שמשמש כבר לטבעת הפוקוס על כהה. */
.hero-q .qmark{flex:none;width:60px;height:60px;border-radius:18px;
  background:rgba(255,178,102,.16);color:#FFB266;
  display:grid;place-items:center;font-family:var(--f-head);font-weight:900;
  font-size:2rem;line-height:1}
.hero-q .hs{line-height:1.5;margin-top:3px}
.hero-q .hgo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* 🔴 גלישה חופשית שלחה את האיקס לשורה משלו והשאירה רצועת ריק מתחת
   לטקסט. רשת קובעת את הסידור במפורש: שורה ראשונה טקסט ואיקס, שורה
   שנייה הכפתור לכל הרוחב. אותו סידור בטלפון ובסרגל הצד. */
.starthint{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;
  background:var(--orange-soft);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;margin:14px 0 2px}
.starthint span{grid-column:1;font-size:.86rem;font-weight:700;
  font-family:var(--f-head);color:var(--navy);line-height:1.45}
.starthint .btn{grid-column:1 / -1;width:100%}
/* 40 ולא 34. השער מודד יעדי מגע, ו-34 נופל. */
.starthint .hx{grid-column:2;grid-row:1;background:none;border:0;color:var(--dim);
  cursor:pointer;width:40px;height:40px;border-radius:10px;display:grid;
  place-items:center}
.starthint .hx:hover{background:rgba(8,13,47,.08);color:var(--navy)}
.starthint .hx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- מסך הכניסה ----------
   מסך מלא ולא גיליון: זה הרגע הראשון של האדם במוצר, והוא לא צריך
   לראות מתחתיו רשימה שהוא עוד לא מבין. */
.onb{position:fixed;inset:0;z-index:130;background:var(--invert);color:var(--on-invert);
  display:flex;align-items:center;justify-content:center;padding:22px}
.onb[hidden]{display:none}
.onb-in{width:min(460px,100%);display:flex;flex-direction:column;gap:22px;
  padding-bottom:var(--safe-b)}
.onb-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline-end:16px;
  background:none;border:0;color:var(--on-invert-2);font:inherit;font-family:var(--f-head);
  font-weight:700;font-size:.88rem;cursor:pointer;padding:10px 12px;min-height:44px;
  border-radius:10px}
.onb-skip:hover{color:var(--on-invert);background:rgba(255,255,255,.1)}
.onb-skip[hidden]{display:none}
.onb-ic{width:62px;height:62px;border-radius:19px;background:rgba(255,178,102,.16);
  color:#FFB266;display:grid;place-items:center;margin-bottom:20px}
.onb-ic svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.onb-k{display:block;font-family:var(--f-head);font-size:11.5px;letter-spacing:.13em;
  font-weight:800;color:#FFB266;margin-bottom:9px}
/* 🔴 הכותרת הייתה בלתי נראית: הכלל הגלובלי ‎h1,h2,h3,h4‎ צובע ב-‎--navy‎,
   וזה בדיוק צבע הרקע של הלוח הזה. נייבי הוא **צבע דיו** ולא "כהה", וכל
   משטח הפוך חייב לקבוע את צבע הטקסט שלו במפורש. זו הפעם השלישית
   שהטוקן הזה נושך, ולכן יש עליו עכשיו טענה בשער. */
.onb-body h2{font-family:var(--f-head);font-size:1.65rem;font-weight:800;line-height:1.25;
  margin-bottom:12px;letter-spacing:-.01em;color:var(--on-invert)}
.onb-body p{font-size:1.02rem;line-height:1.65;color:var(--on-invert-2)}
.onb-foot{display:flex;align-items:center;gap:14px}
.onb-dots{display:flex;gap:7px;flex:1}
.onb-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24)}
.onb-dots i.on{background:var(--orange);width:22px;border-radius:99px}
.onb-next{background:var(--orange);color:var(--on-orange);border:0;border-radius:13px;
  padding:0 26px;min-height:50px;font:inherit;font-family:var(--f-head);font-weight:800;
  font-size:1rem;cursor:pointer;flex:none;
  box-shadow:0 10px 26px -12px rgba(243,132,32,.9)}
.onb-next:hover{background:#FF9838}
@media (prefers-reduced-motion:no-preference){
  .onb-body{animation:onbin .32s both}
  @keyframes onbin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- ראש העמודה הימנית ----------
   נשאר על המסך בזמן שהרשימה נגללת מתחתיו, כי חיפוש שצריך לגלול
   אליו חזרה אינו חיפוש. */
.side-head{position:sticky;top:0;z-index:3;background:var(--paper);
  padding:2px 0 10px;margin-bottom:2px}
.side-head .filter{margin:0}
/* הגשר אל החיפוש בתוכן. מופיע רק כשיש מה לחפש. */
.side-all{display:flex;align-items:center;gap:8px;width:100%;margin-top:7px;
  background:var(--orange-soft);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;min-height:44px;cursor:pointer;font:inherit;
  font-family:var(--f-head);font-size:.84rem;color:var(--navy);text-align:start}
.side-all[hidden]{display:none}
.side-all:hover{border-color:var(--orange)}
.side-all svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--orange-dark);
  stroke-width:2.2;stroke-linecap:round}
.side-all b{font-weight:800}
.side-all span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- העמודה השמאלית ---------- */
.rail-l:empty{display:none}
.rail-l .msp-card{margin:0}

/* ---------- החיפוש בתוך ההרצאה, מצומצם ----------
   היה כרטיס עם כותרת משלו. עכשיו שורה אחת, והתוצאות נפתחות מתחתיה. */
.search.slim{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px;margin-top:12px}
.search.slim .qrow{display:flex;align-items:center;gap:8px;padding-inline-start:10px}
.search.slim .qic{flex:none;display:grid;place-items:center;color:var(--dim)}
.search.slim .qic svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.search.slim #q{flex:1;min-width:0;border:0;background:none;padding:11px 0;
  font:inherit;color:var(--ink);min-height:44px;outline:none}
.search.slim #q::placeholder{color:var(--dim)}
.search.slim .hits:not(:empty),.search.slim #smode-lesson:not(:empty){margin-top:8px}

/* ---------- הסיכום בתוך הדף ---------- */
#deepbox{margin-top:20px}
#deepbox[hidden]{display:none}
#deepbox .deep{max-width:none;margin:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px 26px;box-shadow:var(--shadow)}
.deep-h{font-size:1.2rem;font-weight:800;margin:0 0 2px}
.deep-h small{display:block;font-family:var(--f-body);font-weight:400;font-size:.85rem;
  color:var(--dim);margin-top:3px}
#deepbox .deep h2:first-of-type{margin-top:18px}

/* 🔴 הרוחב הגדול נועד לשלוש העמודות של מסך הכנס בלבד. שאר המסכים הם
   טור קריאה אחד, ובאלף וחמש מאות פיקסלים הם נמתחים עד שכרטיס נראה
   כמו רצועה. */
@media(min-width:1200px){
  #screen-find,#screen-mine,#screen-cat,#screen-quiz,#screen-channel{
    max-width:1120px;margin-inline:auto}
  /* 🔴 הבית יצא מקבוצת ה-1120. הוא לא טור קריאה אלא קיר של כרטיסים,
     ובאלף ומאה הוא נראה כמו עמודה צרה באמצע מסך ריק. */
  #screen-home{max-width:1440px;margin-inline:auto}
  /* 🔴 המתנות לא היו חסומות כלל, וב-1800 הקיר שלהן היה נמתח לשש
     עמודות של שורה אחת. */
  #screen-gifts{max-width:1360px;margin-inline:auto}
  /* ‎#screen-conf‎ נשאר בלי תקרה בכוונה: הוא המסך הרחב, קיר של 44
     פוסטרים, וזה בדיוק המקום שבו רוחב עוזר. */
}

/* ---------- הבאר העליון במחשב ----------
   🔴 קודם הייתה כאן כותרת, ומתחתיה שורת ניווט, ומתחתיה קו. שלוש
   שכבות של כרום לפני שמגיעים לתוכן, וכולן נגללו והלכו. עכשיו זו
   שורה אחת שנדבקת לראש המסך, ובקצה השמאלי שלה יושב כרטיס התוכנית —
   נוכח כל הזמן, בלי לגזול עמודה שלמה מהתוכן. */
@media(min-width:900px){
  :root{--head-h:66px}
  /* 🔴 הבאר ישב 16 פיקסל מתחת לקצה (הריפוד של ‎#app‎), וברגע שגוללים
     הוא נדבק ל-0 וקפץ למעלה. יוסף, בסיור: "כשאנחנו למעלה אז יש פה
     מרווח, ואז אני טיפה גולל למטה, אז הוא פתאום יצטמצם". המרווח
     נשלף מלמעלה, ולכן הבאר מתחיל בדיוק במקום שבו הוא ייתקע. */
  .appbar{position:sticky;top:0;z-index:45;flex-wrap:nowrap;gap:18px;
    margin:-16px -16px 18px;padding:0 16px;min-height:var(--head-h);
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line)}
  .hbrand{flex:none;align-items:baseline}
  .appbar h1{font-size:1.15rem;white-space:nowrap}
  .appbar .sub{white-space:nowrap}
  /* הניווט יושב באמצע ואינו נדחק בידי השכנים שלו. */
  .topnav{display:block;flex:1;min-width:0;margin:0}
  .topnav ul{border:0;padding:0;justify-content:center}

  /* כרטיס התוכנית, מוקטן לשורה. הוא כהה כדי שייקרא כדבר אחר מהניווט,
     ולא כלשונית חמישית. */
  /* 🔴 דקלה, בקבוצה: "אפשר להגדיל את הכפתור בצד שמאל?" — והיא הקיפה
     בדיוק את הכרטיס הזה. הוא היה 46 פיקסל גובה עם כיתוב של .72,
     כלומר קטן מהלשוניות שלידו. עכשיו הוא הדבר הגדול ביותר בבאר, עם
     קו כתום שמפריד אותו מהניווט ולא נותן לו להיקרא כלשונית חמישית. */
  .msp-top{display:flex;align-items:center;gap:13px;flex:none;
    background:var(--invert);color:var(--on-invert);text-decoration:none;
    border-radius:15px;padding:10px 15px 10px 12px;min-height:58px;
    box-shadow:0 0 0 1.5px var(--orange-soft),var(--shadow);
    transition:transform .12s,box-shadow .15s}
  .msp-top:hover{transform:translateY(-1px);
    box-shadow:0 0 0 1.5px var(--orange),var(--shadow-lg)}
  /* 🔴 שתי השורות היו ילדים ישירים של מיכל ‎flex‎ בשורה, ולכן
     ‎display:block‎ לא ערם אותן — הן פשוט ישבו זו לצד זו. עמודה
     צריכה מיכל משלה. */
  .mt-txt{display:flex;flex-direction:column;min-width:0}
  .mt-mark,.mt-sub{display:block;line-height:1.25;white-space:nowrap}
  .mt-mark{font-family:var(--f-head);font-weight:800;font-size:.82rem;
    letter-spacing:.1em;color:rgba(255,255,255,.72)}
  .mt-mark b{color:var(--orange);font-weight:800}
  .mt-sub{font-size:.8rem;color:var(--on-invert-2);margin-top:3px}
  .msp-top .mt-go{flex:none;width:32px;height:32px;border-radius:50%;
    background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
  .msp-top .mt-go svg{width:16px;height:16px;fill:none;stroke:currentColor;
    stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
}

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

   ⚠️ המחיר, במספרים, כדי שההחלטה תהיה מודעת: הבאנר לוקח 180 פיקסל
   לרוחב **לאורך כל הדף**. בדיוק בגלל זה העמודה השמאלית בוטלה בסבב
   קודם. לכן הוא מופיע רק מ-1280 ומעלה, ותקרת האפליקציה יורדת
   ל-1560 כדי שהוא יחיה בשוליים ולא יגזול מהתוכן במסך רחב.

   ברירת המחדל היא **כבוי**. זו לא העדפת צופה אלא הכרעה של דקלה
   ואריה מתוך צילום. */
.msp-rail{display:none}
@media(min-width:1280px){
  /* ⚠️ ‎padding-left‎ ולא ‎padding-inline-start‎. בעברית ההתחלה הלוגית
     היא **ימין**, ולכן הגרסה הלוגית פתחה רווח בצד הנגדי והבאנר ישב
     מעל התוכן. הבאנר מעוגן פיזית לשמאל, ולכן גם הרווח שלו פיזי. */
  body[data-msp="rail"]{padding-left:180px}
  body[data-msp="rail"] #app{max-width:1560px}
  body[data-msp="rail"] .msp-top{display:none}
  body[data-msp="rail"] .msp-rail{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    position:fixed;top:0;bottom:0;left:0;width:180px;z-index:40;
    padding:26px 16px;text-align:center;text-decoration:none;
    background:var(--invert);color:var(--on-invert);
    border-inline-end:1px solid rgba(255,255,255,.09)}
  .msp-rail .mr-mark{font-family:var(--f-head);font-weight:800;font-size:.82rem;
    letter-spacing:.12em;line-height:1.5;color:rgba(255,255,255,.72)}
  .msp-rail .mr-mark b{display:block;color:var(--orange)}
  .msp-rail .mr-pic{width:112px;height:112px;border-radius:18px;object-fit:cover;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
  .msp-rail .mr-line{font-size:.86rem;line-height:1.5;color:var(--on-invert-2)}
  .msp-rail .mr-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
    background:var(--orange);color:var(--on-orange);border-radius:99px;
    padding:9px 15px;font:800 .84rem var(--f-head);
    transition:transform .12s}
  .msp-rail:hover .mr-cta{transform:translateY(-1px)}
  .msp-rail .mr-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;
    stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
}
@media(min-width:900px) and (max-width:1199px){
  /* בצר מזה הכיתוב המשני נופל ראשון, לפני שהניווט מתחיל להידחס. */
  .msp-top .mt-sub{display:none}
  .appbar .sub{display:none}
}

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

   🔴 **הרוחב נגזר מהגובה.** ‎(100vh - רזרבה) * 16/9‎ נשמע נכון — וידאו
   16:9 לא יהיה גבוה מהחלון — אבל התוצאה היא שחלון רחב ונמוך מקבל
   וידאו קטן. נמדד: 604 פיקסל על עמודה של 893 ב-1280x800.

   🔴 **אין מרכוז.** בטווח 900-999 היה ‎margin-inline:auto‎ ומ-1000
   ומעלה לא. כל השארית נערמה לצד אחד, ונקראה כשטח מת ולא כשוליים.
   נמדד: רצועה של 229 פיקסל ב-1440x900.

   🔴 **הקצה נבנה על הילדים של ‎#player‎, ו-‎#panel‎ ו-‎#search‎ הם
   אחים שלו ולא ילדיו.** הם מעולם לא קיבלו אותו. נמדד: הווידאו 782
   והסיכום 1012, על שני קצוות שונים. שום דבר לא היה על אותו קו.

   התיקון הוא כלל אחד. ‎--main-w‎ מוגדר על ‎.layout‎ ונצרך על שלושת
   הילדים, ולכן ה-‎100%‎ נפתר מול תיבת ההכלה של **כל אחד** מהם. שלושתם
   יושבים באותה עמודת גריד, ולכן הם מקבלים בהכרח אותו מספר — קצה אחד
   ורוחב אחד לפי בנייה, ולא לפי סנכרון ידני של שלושה ערכים.

   ⚠️ ‎min(100%, max(רצפה, תקרה))‎ ולא ‎clamp‎. ב-1000 פיקסל העמודה היא
   626, ורצפה של 640 בתוך ‎clamp‎ הייתה גולשת ושוברת כל בדיקת גלישה
   בשלושת השערים. ה-‎100%‎ בחוץ הופך גלישה לבלתי אפשרית.

   300 = 66 באר + 18 ריווח + 54 שורת החזרה + 145 פס + 17 נשימה.
   הגובה נשאר תקרה בלבד, והרצפה מבטיחה שבחלון נמוך הדף גולל במקום
   שהווידאו יתכווץ לתמונה ממוזערת. */
@media(min-width:900px){
  .layout{
    --vid-reserve:300px;
    --vid-floor:640px;
    --main-w:min(100%,max(var(--vid-floor),calc((100vh - var(--vid-reserve)) * 16 / 9)));
  }
  /* ⚠️ ‎width‎ ולא ‎max-width‎, וזה לא סגנון אלא הכרח. שוליים אוטומטיים
     על פריט גריד **מבטלים את המתיחה**: התיבה מתכווצת לרוחב התוכן
     והשוליים בולעים את השאר. עם ‎max-width‎ בלבד הנגן נפל ל-563 פיקסל
     בתוך עמודה של 1012 — קטן יותר ממה שהיה לפני התיקון. רוחב מוגדר
     מנטרל את המתיחה מלכתחילה, ואז המרכוז עובד כרגיל. */
  #player,#panel,#search{width:var(--main-w);max-width:100%;margin-inline:auto}
}
@media(min-width:900px) and (max-width:999px){
  /* בטור אחד גם הרשימה מתיישרת עם המסגרת, אחרת היא רחבה ממנה. */
  .side{width:var(--main-w);max-width:100%;margin-inline:auto}
}

/* ============================================================
   ערוץ ההשראה
   שידור לפי שעון הקיר, מהדורה יומית, ורצועות. אין טוקן חדש; המשטחים
   ההפוכים הם --invert, והכתום נשאר הדגש היחיד. כל תמונה היא פריים
   אמיתי מההרצאות או מהלולאות, אף אחת לא מצוירת.
   ============================================================ */
.chs{display:flex;flex-direction:column;gap:26px}
.chs > section{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.chs > section.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.chs > section{opacity:1;transform:none;transition:none}}
.chsec .ch-h{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.chsec .ch-h .sec-h{flex:1 1 auto;margin:0}
.strip-nav{display:none;gap:2px}
@media(hover:hover) and (min-width:900px){.strip-nav{display:inline-flex}}
/* 🔴 ל-.strip של רצועת ההרצאה יש align-items:center, ואותו שם
   מחלחל לרצועות הערוץ: כרטיס עם שורת הוק קצרה יורד ב-11 פיקסל
   והתמונות ברצועה לא על אותו קו. הרצועה כאן נועלת התחלה. */
.strip{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline-start:16px;
  overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 8px}
.strip::-webkit-scrollbar{display:none}
.strip > *{scroll-snap-align:start;flex:none}
@media(min-width:900px){.strip{margin-inline:0;padding-inline:0;scroll-padding-inline-start:0}}
.strip .more{align-self:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font:700 .86rem var(--f-head);color:var(--navy);cursor:pointer;white-space:nowrap}
.strip .more:hover{border-color:var(--orange);background:var(--orange-soft)}
.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.k{display:block;font:800 .72rem var(--f-head);letter-spacing:.06em;color:var(--dim)}

/* ---------- 1 · הבוגרים מספרים ----------
   🔴 המסך נפתח בהם, ולכן הם לא מתחילים ככותרת רצועה. שורת פתיחה
   אחת שאומרת למה מסתכלים על זה, ואז הכרטיסים. בלי מספר בוגרים: יש
   לאריה אלפים לאורך השנים, ומספר שסופר רק את בעלי הסרטון מקטין. */
.chsec-open{margin-top:4px}
.open-h{max-width:34ch;margin:0 0 14px}
.open-k{display:block;font:800 .74rem var(--f-head);letter-spacing:.07em;color:var(--orange-dark)}
.open-h h2{font:900 clamp(1.55rem,5.4vw,2.3rem)/1.2 var(--f-head);color:var(--navy);
  margin:6px 0 0;text-wrap:balance}
.open-h p{margin:8px 0 0;font-size:.95rem;line-height:1.55;color:var(--dim)}
.open-h .open-go{margin-top:14px}
.open-nav{justify-content:flex-end;margin-bottom:8px;min-height:0}
@media(min-width:900px){.open-h{margin-bottom:18px}}

/* ---------- 2 · המהדורה ---------- */
.ed-g{display:grid;gap:12px}
@media(min-width:700px){.ed-g{grid-template-columns:2fr 1fr;align-items:start}}
.ed-lead{padding:0;overflow:hidden}
.ed-lead .ed-shot{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ed-lead .ed-k,.ed-lead .ed-q,.ed-lead .ed-who,.ed-lead .ed-acts{margin-inline:16px}
.ed-k{display:block;font:800 .72rem var(--f-head);letter-spacing:.06em;color:var(--orange-dark);margin-top:14px}
.ed-q{margin:8px 16px 0;font:900 clamp(1.3rem,4.4vw,1.9rem)/1.3 var(--f-head);color:var(--navy);text-wrap:balance}
.ed-who{display:flex;align-items:center;gap:10px;margin-top:12px}
.ed-who img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-3)}
.ed-who b{display:block;font:700 .92rem var(--f-head);color:var(--navy)}
.ed-who small{display:block;font-size:.8rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-who span{min-width:0}
.ed-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-bottom:16px}
.ed-side{display:flex;flex-direction:column;gap:12px}
.ed-card{display:flex;align-items:center;gap:12px;width:100%;text-align:start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);
  cursor:pointer;font:inherit;color:inherit}
.ed-card:hover{border-color:var(--orange)}
.ed-card > img{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none;background:var(--paper-3)}
.ed-card > span{flex:1;min-width:0}
.ed-card b{display:block;font:700 .95rem/1.35 var(--f-head);color:var(--navy);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.ed-card small{display:block;font-size:.78rem;color:var(--dim);margin-top:2px}
.ed-card .go{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--dim);display:grid;place-items:center}
.ed-card .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ed-card:hover .go{background:var(--orange);color:var(--on-orange)}

/* ---------- 3 · הבוגרים מספרים ---------- */
.story{width:150px;background:none;border:0;padding:0;text-align:start;cursor:pointer;font:inherit;color:inherit;
  border-radius:12px;transition:transform .2s}
@media(min-width:900px){.story{width:176px}}
@media(hover:hover){.story:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.story:hover{transform:none}}
.story:focus-visible,.pc:focus-visible,.clap-shot:focus-visible,.ment-shot:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* תג "טוען" בזמן שהווידאו עוד לא הראה פריים. בלי סיבוב אינסופי:
   מילה אחת שאומרת מה קורה, ונעלמת ברגע שיש תמונה. */
.story-box.loading::after,#feed .fbox.loading::after,.ment-shot.loading::after{
  content:'טוען';position:absolute;inset-inline-start:8px;bottom:8px;z-index:3;
  background:rgba(5,7,15,.72);color:#fff;border-radius:99px;padding:4px 10px;
  font:700 .72rem var(--f-head);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.story-box.live::after,#feed .fbox.live::after{content:none}

.story-box{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--radius-sm);overflow:hidden;background:#05070F;box-shadow:var(--shadow)}
.story-box img,.story-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.story-box video{opacity:0;transition:opacity .25s}
.story-box.live video{opacity:1}
.story-dur{position:absolute;inset-inline-end:6px;bottom:6px;background:rgba(6,12,32,.66);color:#fff;
  font:800 11.5px/1 var(--f-head);padding:4px 6px;border-radius:6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.story-snd{position:absolute;top:6px;inset-inline-start:6px;width:26px;height:26px;border-radius:50%;background:rgba(6,12,32,.66);
  color:#fff;display:none;place-items:center}
.story-snd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story-box.playing:not(.sound) .story-snd{display:grid}
.story-name{display:block;font:800 .92rem var(--f-head);color:var(--navy);margin-top:8px}
.story-role{display:block;font-size:.78rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-hook{display:block;font-size:.84rem;line-height:1.45;color:var(--ink);margin-top:3px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- 4 · הרגע שהאולם מחא כפיים ---------- */
.clap{width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
@media(min-width:900px){.clap{width:300px}}
.clap-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#05070F;cursor:pointer;overflow:hidden}
.clap-shot img{width:100%;height:100%;object-fit:cover;display:block}
.clap-shot::after{content:'';position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(to top,rgba(5,10,27,.78),transparent)}
.clap-play{position:absolute;inset-inline-start:10px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  background:var(--orange);color:var(--on-orange);border-radius:99px;padding:6px 12px 6px 9px;font:700 .8rem var(--f-head)}
.clap-play svg{width:12px;height:12px;fill:currentColor;stroke:none}
.clap-q{margin:12px 14px 0;font:800 1.02rem/1.4 var(--f-head);color:var(--navy);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical}
.clap-m{display:flex;align-items:center;gap:10px;padding:10px 14px 14px}
.clap-m img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-3)}
.clap-m > span{flex:1;min-width:0}
.clap-m b{display:block;font:700 .84rem var(--f-head);color:var(--navy)}
.clap-sec{display:block;height:4px;border-radius:2px;background:var(--paper-3);margin:5px 0 3px;overflow:hidden}
.clap-sec i{display:block;height:100%;width:0;background:var(--orange);transition:width .5s ease-out}
.in .clap-sec i{width:var(--w,0)}
.clap-m small{display:block;font-size:.76rem;color:var(--dim)}

/* ---------- 5 · משפט אחד ---------- */
/* ראש הכרטיס הוא הבנר: הפריים של ההרצאה מוכהה מתחת, והשם עליו. */
.line{width:300px;padding:0;overflow:hidden}
@media(min-width:900px){.line{width:340px}}
.line-h{position:relative;display:flex;align-items:center;gap:10px;
  padding:14px;min-height:96px;background:#080D2F;overflow:hidden}
.line-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:saturate(.72)}
.line-h::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to left,rgba(8,13,47,.92),rgba(8,13,47,.55))}
.line-face{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  object-fit:cover;flex:none;background:var(--paper-3);
  box-shadow:0 0 0 2px rgba(243,132,32,.9)}
.line-h span{position:relative;z-index:1;min-width:0}
.line-h b{display:block;font:800 .92rem var(--f-head);color:#fff}
.line-h small{display:block;font-size:.76rem;color:#C9CFE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-q,.line-f{margin-inline:14px}
.line-f{margin-bottom:14px}
.line-q{margin:14px 14px 0;padding:10px 14px;background:var(--orange-soft);border-inline-start:4px solid var(--orange);
  border-radius:10px;font:700 1.08rem/1.5 var(--f-head);color:var(--navy)}
.line-f{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.line-f .line-share{margin-inline-start:auto}
.line-share svg{width:18px;height:18px}

/* ---------- 6 · המרצים על הכנס ---------- */
.ment{width:240px}
@media(min-width:900px){.ment{width:264px}}
.ment-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--radius-sm);
  overflow:hidden;background:#05070F;cursor:pointer;box-shadow:var(--shadow)}
.ment-shot img,.ment-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ment-shot video{opacity:0;transition:opacity .25s}
.ment-shot.live video{opacity:1}
.ment-blank{position:absolute;inset:0;background:linear-gradient(135deg,#0A0E1F,#1B2447)}
.ment-dur{position:absolute;inset-inline-end:6px;bottom:6px;background:rgba(6,12,32,.66);color:#fff;font:800 11.5px/1 var(--f-head);
  padding:4px 6px;border-radius:6px}
.ment-play,.end-v .ment-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--orange);color:var(--on-orange);display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.45)}
.ment-play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.ment-shot.playing .ment-play,.end-v.playing .ment-play{display:none}
.ment b{display:block;font:800 .9rem var(--f-head);color:var(--navy);margin-top:8px}
.ment small{display:block;font-size:.76rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 7 · הכנס בדקה, המספרים, הפנים ---------- */
.end{background:var(--invert);color:var(--on-invert);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-lg)}
.end-g{display:grid;gap:18px}
@media(min-width:900px){.end-g{grid-template-columns:1fr 1fr;align-items:start;padding:4px}}
.end h2{font:800 1.2rem var(--f-head);margin:0 0 10px}
.end h2 small{display:block;font:400 .84rem var(--f-body);color:var(--on-invert-2);margin-top:3px}
.end-v{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:14px;overflow:hidden;
  background:#05070F;cursor:pointer}
.end-v img,.end-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.end-v video{opacity:0;transition:opacity .25s}
.end-v.live video{opacity:1}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.nums div{background:rgba(255,255,255,.06);border-radius:14px;padding:12px 14px}
.nums b{display:block;font:900 1.6rem/1.1 var(--f-head);color:#fff}
.nums span{display:block;font-size:.8rem;color:var(--on-invert-2);margin-top:4px}
.faces{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.facebtn{width:44px;height:44px;border-radius:50%;border:2px solid transparent;padding:0;background:none;cursor:pointer;overflow:hidden}
.facebtn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.facebtn:hover,.facebtn:focus-visible{border-color:var(--orange);outline:none}

/* ---------- הפיד ----------
   🔴 ‎.fbox‎ הוא גם תיבת החיפוש במסך החיפוש. הפיד נכתב אחרי, באותה
   רמת ספציפיות, ולכן שדה החיפוש הפך לקופסה שחורה בגובה 780 פיקסל
   בלי שאיש הבחין. כל כללי הפיד תחת ‎#feed‎, כדי שהם לא יצאו החוצה. */
#screen-feed.is-active{display:block}
#feed{position:fixed;inset:0 0 calc(var(--bar-h) + var(--mini-h) + var(--safe-b)) 0;z-index:58;background:#05070F;
  overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
#feed::-webkit-scrollbar{display:none}
#feed .feed-x{position:fixed;top:calc(10px + env(safe-area-inset-top));inset-inline-start:10px;z-index:3;color:#fff;
  background:rgba(8,13,47,.55)}
#feed .fitem{height:100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}
#feed .fbox{position:relative;width:min(100%,calc((100vh - var(--bar-h) - var(--mini-h) - 120px) * 9 / 16));aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;background:#05070F;cursor:pointer}
#feed .fbox img,#feed .fbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#feed .fbox video{opacity:0;transition:opacity .25s}
#feed .fbox.live video{opacity:1}
#feed .fsnd{position:absolute;top:10px;inset-inline-start:10px;display:none;align-items:center;gap:6px;background:rgba(6,12,32,.66);
  color:#fff;border-radius:99px;padding:6px 10px;font:700 .78rem var(--f-head)}
#feed .fsnd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#feed .fbox.playing:not(.sound) .fsnd{display:inline-flex}
#feed .fend{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:18px 14px 14px;
  background:linear-gradient(to top,rgba(5,7,15,.92),transparent);z-index:2}
#feed .fend .btn{width:100%;justify-content:center;display:inline-flex}
#feed .fcap{width:min(100%,calc((100vh - var(--bar-h) - var(--mini-h) - 120px) * 9 / 16));color:#fff;margin-top:8px}
#feed .fcap b{display:block;font:800 .95rem var(--f-head)}
#feed .fcap small{display:block;font-size:.78rem;color:rgba(255,255,255,.72)}
#feed .fcard{width:min(100%,420px);background:var(--surface);color:var(--ink);border-radius:var(--radius);overflow:hidden;padding-bottom:16px}
#feed .fcard > img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
#feed .fcard .ed-k,#feed .fcard .fq,#feed .fcard .ed-who,#feed .fcard .ed-acts{margin-inline:16px}
#feed .fq{margin:8px 16px 0;font:800 clamp(1.1rem,4vw,1.4rem)/1.4 var(--f-head);color:var(--navy)}

/* חמש לשוניות: ב-360 המילה הקצרה בבאר התחתון בלבד. */
.tab .sb{display:none}
@media(max-width:360px){.tabbar .tab .lb{display:none}.tabbar .tab .sb{display:inline}}
.tab span{white-space:nowrap}

/* כרטיס החשבון במסך "שלי" */
.acct-in{display:flex;align-items:center;gap:13px}
.acct-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--orange-soft);color:var(--orange-dark);font:800 18px var(--f-head)}
.acct-t{flex:1;min-width:0}
.acct-t b{display:block;font:800 16.5px var(--f-head);color:var(--navy)}
.acct-t span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.acct-t code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em;direction:ltr;
  display:inline-block;background:var(--paper-2);border-radius:6px;padding:1px 6px;color:var(--navy)}

/* ---------- מתנות המרצים ----------
   הבקשה של דקלה: קישור למתנה מתחת לכל מרצה. ושל יוסף: גם מקום אחד
   שבו כולן יחד, במקום הכרטיס שהוא לא הבין את מהותו בבית. */
.giftlink{display:flex;align-items:center;gap:9px;margin-top:8px;
  background:var(--orange-soft);border:1px solid transparent;border-radius:12px;
  padding:8px 11px;text-decoration:none;color:var(--navy);font-size:.86rem;
  transition:border-color .15s ease,transform .12s ease;max-width:100%}
.giftlink:hover{border-color:var(--orange);transform:translateY(-1px)}
.giftlink .gi{font-size:15px;flex:none;line-height:1}
.giftlink .gt{font-weight:800;font-family:var(--f-head);white-space:nowrap}
.giftlink .gd{color:var(--dim);font-size:.8rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}

.gifts-head{margin-bottom:18px}
.gifts-head h2{font-size:clamp(1.4rem,4vw,1.9rem);font-weight:900;color:var(--navy)}
.gifts-head .lead{margin-top:6px;max-width:52ch}
.gwall{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gcard{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:13px 15px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-width:0;
  transition:transform .16s ease,border-color .16s ease}
.gcard:hover{transform:translateY(-2px);border-color:var(--orange)}
.gcard img,.gcard .gface{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--paper-3)}
.gcard .gface{display:grid;place-items:center;font:800 20px var(--f-head);color:var(--dim)}
.gcard .gb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gcard .gb b{font-family:var(--f-head);font-size:1rem;color:var(--navy)}
.gcard .gd{font-size:.83rem;color:var(--dim);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gn{font-size:.74rem;color:var(--dim);opacity:.8}
.gcard .gpay{align-self:flex-start;font-size:.72rem;font-weight:700;color:var(--warn);
  background:var(--orange-soft);border-radius:999px;padding:1px 8px;margin-top:2px}
.gcard .ggo{flex:none;color:var(--dim)}
.gcard .ggo svg{width:18px;height:18px}
.gcard:hover .ggo{color:var(--orange-dark)}
.gmiss{margin-top:16px;font-size:.84rem}
.tile-gift .k{color:var(--orange-dark)}
@media (max-width:520px){
  .gwall{grid-template-columns:1fr}
  .giftlink .gd{display:none}
}

/* ══════════ פס הבקרה הצמוד ══════════
   מופיע רק כשהתמונה יצאה מהמסך במסך הצפייה. ‎fixed‎, ולכן הוא באמת אינו
   זז עם הגלילה — זו הייתה כל הבקשה. גובה 58, כמו הנגן המיני, כדי
   ששניהם לעולם לא ייראו כשתי שורות שונות. */
.dockbar{position:fixed;inset-inline:0;bottom:calc(var(--bar-h) + var(--safe-b));z-index:57;
  display:none;align-items:center;gap:12px;height:58px;padding:0 14px;
  background:var(--invert);color:var(--on-invert);
  border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 22px rgba(5,7,15,.22)}
.dockbar.live{display:flex}
.dockbar[hidden]{display:none}
#dk-play{flex:none;width:40px;height:40px;border-radius:50%;background:var(--orange);
  color:var(--on-orange);border:0;cursor:pointer;display:grid;place-items:center}
#dk-play svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.dk-time{flex:none;font:700 12.5px var(--f-head);color:var(--on-invert-2);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.dk-time b{color:var(--on-invert)}
/* הציר תמיד משמאל לימין, כמו שעון, גם בעברית. */
.dk-seek{flex:1;min-width:60px;height:22px;display:flex;align-items:center;cursor:pointer;
  direction:ltr;position:relative}
.dk-seek::before{content:'';position:absolute;inset-inline:0;height:5px;border-radius:3px;
  background:rgba(255,255,255,.22)}
.dk-seek i{position:relative;height:5px;border-radius:3px;background:var(--orange);width:0}
.dk-seek:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.dk-up{flex:0 1 auto;max-width:38%;min-width:0;background:none;border:0;color:inherit;
  cursor:pointer;text-align:start;padding:0;font:inherit;display:none}
.dk-up .dk-t,.dk-up .dk-b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-up .dk-t{font:700 12.5px var(--f-head)}
.dk-up .dk-b{font-size:11px;color:var(--orange)}
@media(min-width:560px){.dk-up{display:block}}
/* בטלפון פס הבקרה והנגן המיני לעולם לא מוצגים יחד — הראשון קיים רק
   במסך הצפייה, והשני רק מחוצה לו — ולכן אין כאן ערימה של שתי רצועות. */
.dockbar.live ~ #app,body:has(.dockbar.live){--dock-h:58px}

/* ══════════ הסיור המודרך ══════════
   החלון נפער בעזרת ‎box-shadow‎ אחד ענק כלפי חוץ. זו הדרך היחידה כאן
   שאינה דורשת ארבעה מלבנים שצריך לסנכרן בכל גלילה, וגם היחידה שבה
   הרכיב עצמו נשאר לחיץ אם ירצו. */
.guide{position:fixed;inset:0;z-index:80;pointer-events:none}
.guide[hidden]{display:none}
.guide-hole{position:absolute;border-radius:16px;opacity:0;
  box-shadow:0 0 0 9999px rgba(5,7,15,.72),0 0 0 2px var(--orange) inset;
  transition:top .28s,left .28s,width .28s,height .28s,opacity .2s}
.guide-box{position:absolute;inset-inline:0;margin-inline:auto;pointer-events:auto;
  width:min(420px,calc(100% - 32px));background:var(--surface);color:var(--ink);
  border-radius:var(--radius);padding:18px 18px 14px;box-shadow:0 18px 48px rgba(5,7,15,.4);
  transition:top .28s,bottom .28s}
.guide-k{display:block;font:800 11.5px var(--f-head);letter-spacing:.1em;
  color:var(--orange-dark);margin-bottom:6px}
.guide-box h2{font-size:1.14rem;font-weight:800;line-height:1.3;margin-bottom:6px}
.guide-box p{font-size:.9rem;line-height:1.6;color:var(--dim)}
.guide-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.guide-x{background:none;border:0;font:700 .84rem var(--f-head);color:var(--dim);
  cursor:pointer;padding:8px 0;min-height:40px}
.guide-x:hover{color:var(--navy)}
.guide-c{flex:1;text-align:center;font:700 .78rem var(--f-head);color:var(--dim);
  font-variant-numeric:tabular-nums}
.guide-n{flex:none;min-height:44px;padding:0 20px;border-radius:99px;border:0;
  background:var(--orange);color:var(--on-orange);font:800 .92rem var(--f-head);
  cursor:pointer}
.guide-n:hover{background:var(--orange-dark)}
@media (prefers-reduced-motion:reduce){
  .guide-hole,.guide-box{transition:none}
}
/* שורת הקרדיט בסוף "המסע שלי". קטנה, ובלי להתחרות בכרטיסים שמעליה. */
.credit{margin:26px 0 8px;text-align:center;font-size:.82rem;color:var(--dim)}
.credit a{color:var(--orange-dark);font-weight:700;text-decoration:none}
.credit a:hover{text-decoration:underline}