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

/* 🔴 כלל בטיחות. ‎[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;         /* גובה הנגן המיני כשהוא פתוח */

  --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}
}

*{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:flex;
      flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
#gate h1{font-weight:900;font-size:clamp(1.7rem,6vw,2.3rem);color:var(--navy);margin-bottom:.5rem}
#gate p{color:var(--dim);margin-bottom:1.5rem;max-width:24rem}
#gate input{font-size:1.2rem;text-align:center;padding:14px 20px;border:2px solid var(--line);
            border-radius:12px;margin-bottom:1rem;width:100%;max-width:320px;outline:none;
            background:var(--surface);color:var(--ink)}
#gate input:focus{border-color:var(--orange)}
#gate button{background:var(--orange);color:var(--on-orange);border:0;padding:15px 32px;
             font-size:1.05rem;font-weight:800;border-radius:12px;width:100%;max-width:320px;
             cursor:pointer;min-height:52px;font-family:var(--f-head)}
#gate button:hover{background:var(--orange-dark)}
#gate .err{color:var(--bad);margin-top:1rem;font-weight:700;visibility:hidden}

/* ---------- שלד ---------- */
/* 🔴 1180 היה נכון לשתי עמודות. בשלוש הוא משאיר לווידאו בערך 500
   פיקסל, וזה גרוע ממה שהיה. ברוחב הזה נשארים לו כ-900. */
#app{display:none;max-width:1560px;margin:0 auto;overflow-x:clip;
  padding:16px 16px calc(32px + var(--safe-b) + var(--bar-h) + var(--mini-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-conf: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" "left" "side"}
#player{grid-area:main;min-width:0}
.side{grid-area:side;min-width:0}
.rail-l{grid-area:left;min-width:0}
@media(min-width:900px){
  .layout{grid-template-columns:minmax(300px,340px) minmax(0,1fr);
    grid-template-areas:"side main" "side left";
    align-items:start;gap:22px}
  /* נעולה מתחת לבאר העליון, וגוללת בתוך עצמה. ‎overscroll-behavior‎
     מונע מהדף להמשיך לזוז ברגע שהרשימה נגמרה. */
  .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}
  /* הכרטיס עצמו כבר בבאר, ולכן העמודה שהחזיקה אותו מיותרת. */
  .rail-l{display:none}
}

/* ---------- נגן ---------- */
.stage-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#05070F;
            border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.stage-mount{position:absolute;inset:0}
.stage-wrap video,.stage-wrap 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}

/* 🔴 ההרחקה הייתה 44 פיקסלים קבועים, מתוך הנחה שפס הבקרה יושב בתוך
   הבמה. הוא לא: ‎.pbar‎ הוא אח של ‎.stage-wrap‎ ולא בן שלו. בטלפון הבמה
   גבוהה כ-220 פיקסלים בלבד, ולכן 44 פיקסלים העיפו את הכתובית לאמצע
   הפנים של המרצה. עכשיו ההרחקה יחסית לגובה הבמה. */
.stage-wrap{container-type:inline-size}
.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;aspect-ratio:auto;border-radius:0}
.stage-wrap:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}
.stage-wrap:fullscreen video{object-fit:contain}
.stage-wrap:fullscreen .cap-layer{bottom:8%}
.cap-layer:empty{display:none}

/* ---------- שכבת השליטה במסך מלא ----------
   פס הבקרה **עובר לכאן פיזית** ברגע המעבר וחוזר ביציאה, ולכן אין שתי
   גרסאות לתחזק. מה שמשתנה כאן הוא רק הטוקנים: אותו רכיב בדיוק, על
   רקע כהה, ולכן כל בן שלו נצבע נכון בלי אף כלל נוסף. */
.stage-wrap.fs .pbar{
  --surface:transparent; --ink:#fff; --navy:#fff;
  --dim:rgba(255,255,255,.74);
  --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,.16);
  --orange-soft:rgba(243,132,32,.26);
  position:absolute;inset-inline:0;bottom:0;z-index:6;margin:0;
  border:0;border-radius:0;box-shadow:none;
  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);
  color:#fff;
  transform:translateY(102%);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .22s}
.stage-wrap.fs.ui .pbar{transform:none;opacity:1;pointer-events:auto}
.stage-wrap.fs .pbar .seek .knob{border-color:rgba(255,255,255,.55)}
.stage-wrap.fs .pbar .seek .ch{background:#fff;opacity:.55}
.stage-wrap.fs .pbar .chaps .cname b{color:#fff}
.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}
.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}
.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}
.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}

/* ---------- כרטיסים ---------- */
.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}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)}
.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 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 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}

.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)}
.gate-legal{margin-top:16px;font-size:.76rem;line-height:1.6;color:var(--dim);
  max-width:34ch;text-align:center}

/* ההסבר על החותמות. פעם אחת, בראש, לפני החותמת הראשונה. */
.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}
.task .th{font-family:var(--f-head);font-weight:800;font-size:.97rem;margin-bottom:2px}
.task .tb{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}

#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}

/* קופסת ההתראות ב"שלי". היא נבנית אחרי בדיקה אסינכרונית של מצב
   ההרשאה, ולכן היא מתחילה ריקה ואסור שתקפוץ כשהיא מתמלאת. */
.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-home,#screen-find,#screen-mine,#screen-cat,#screen-quiz{
    max-width:1120px;margin-inline:auto}
}

/* ---------- הבאר העליון במחשב ----------
   🔴 קודם הייתה כאן כותרת, ומתחתיה שורת ניווט, ומתחתיה קו. שלוש
   שכבות של כרום לפני שמגיעים לתוכן, וכולן נגללו והלכו. עכשיו זו
   שורה אחת שנדבקת לראש המסך, ובקצה השמאלי שלה יושב כרטיס התוכנית —
   נוכח כל הזמן, בלי לגזול עמודה שלמה מהתוכן. */
@media(min-width:900px){
  :root{--head-h:66px}
  .appbar{position:sticky;top:0;z-index:45;flex-wrap:nowrap;gap:18px;
    margin:0 -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}

  /* כרטיס התוכנית, מוקטן לשורה. הוא כהה כדי שייקרא כדבר אחר מהניווט,
     ולא כלשונית חמישית. */
  .msp-top{display:flex;align-items:center;gap:11px;flex:none;
    background:var(--invert);color:var(--on-invert);text-decoration:none;
    border-radius:13px;padding:8px 12px 8px 10px;min-height:46px;
    box-shadow:var(--shadow);transition:transform .12s,box-shadow .15s}
  .msp-top:hover{transform:translateY(-1px);box-shadow: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:.72rem;
    letter-spacing:.1em;color:rgba(255,255,255,.7)}
  .mt-mark b{color:var(--orange);font-weight:800}
  .mt-sub{font-size:.74rem;color:var(--on-invert-2);margin-top:2px}
  .msp-top .mt-go{flex:none;width:28px;height:28px;border-radius:50%;
    background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
  .msp-top .mt-go 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}
}

/* ---------- הבמה לא גבוהה מהחלון ----------
   ברוחב גדול וידאו של 16:9 גבוה יותר מהמסך, והסיכום שמתחתיו נדחף
   הרחק מהעין. הרוחב נגזר מהגובה הפנוי, וכך היחס נשמר מדויק. */
@media(min-width:1200px){
  .stage-wrap{max-width:min(100%,calc((100vh - 300px) * 16 / 9));
    margin-inline:auto}
}