/* מאגר שיעורי תנ"ך חי
   הפלטה והגדלים נמדדו מדף הנחיתה של לימור, לא הומצאו.
   ⚠️ פונט הכותרות "RavMesser atlas" זמין רק על שרתי רב מסר ולא ייטען על דומיין
   משלנו. לימור בחרה Secular One כתחליף (2026-09-03) — הקרוב ביותר לאופי
   הכותרות בדף הנחיתה שלה. משקל יחיד: לא להוסיף לו font-weight. */

:root {
  --turquoise:  #029c83;   /* מילויים בלבד. בהיר מדי לטקסט */
  --deep:       #01705E;   /* כותרות גדולות */
  --deepest:    #024C41;   /* טקסט קטן, וטקסט על חול */
  --sand:       #DECCBB;
  --olive:      #9AA17C;   /* עליו טקסט כהה, לעולם לא לבן */
  --wash:       #EBEEEF;
  --cream:      #F9F7E2;
  --ink:        #1d2b28;
  --muted:      #5d6b66;
  --card:       #FFFDF7;   /* לבן חמים. לבן טהור על נייר נראה קר */
  --radius:     14px;
  --shadow:     0 2px 14px rgba(2,76,65,.09);

  /* ── חמישה צבעים שנדגמו מתוך הפלייר עצמו ──────────────
     לימור ביקשה "יותר צבעים". הצבעים כבר היו קיימים בתמונה
     שהיא אוהבת, ולכן נדגמו ממנה ולא הומצאו. */
  --sky:        #5FB4DA;   /* השמיים מעל העמק */
  --water:      #6FB6AE;   /* בריכות הדגים */
  --ochre:      #C9A96B;   /* השדות הקצורים */
  --clay:       #C0784F;   /* האדמה החרושה */
  --wheat:      #EADCBE;   /* כריכת הספר */
  --rose:       #CF7D88;   /* שיר השירים */
  --gold:       #CF9F45;   /* מלכים, כשייפתח */

  /* ── נלמד מדף הנחיתה ב-tanach-chai.vercel.app (7.9.2026) ──
     שם נמדדו הערכים האלה בפועל. השינוי הגדול: הרקע שם הוא
     **נייר חם** ולא אפור קר, וזה מה שעושה את ההבדל בין
     "ממשק" ל"ספר". הפונטים שם (Ploni/Paamon) מסחריים ומוטמעים
     כ-base64 — לא נוגעים בהם, נשארים עם Secular One ו-Assistant. */
  --paper:      #FBF7EE;   /* רקע הדף */
  --paper-2:    #F4EDDF;   /* סקשן מתחלף */
  --dark:       #0C221E;   /* פס כהה לניגוד */
  --dark-2:     #123029;
  --on-dark:    #F3EEE1;
  --brass:      #BE8F3E;   /* זהב עשיר יותר מהאוכרה, לקווים ולתוויות */
  --brass-lite: #DCC48A;
  --line:       rgba(10,76,68,.15);
  --shadow-lift: 0 22px 54px -28px rgba(12,40,34,.34);

  font-size: 20px;         /* הגוף אצלה 22-26px. זה הבסיס */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Assistant, "Segoe UI", system-ui, sans-serif;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  direction: rtl;
}

h1, h2, h3 {
  font-family: "Secular One", Assistant, sans-serif;
  font-weight: 400;               /* Secular One הוא משקל אחד. bold מזויף מלכלך אותו */
  color: var(--deep);
  line-height: 1.25;
  margin: 0 0 .4em;
}
h1 { font-size: 1.7rem; }   /* יחס הגדלים אצלה שטוח בכוונה */
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

a { color: var(--deepest); }

/* ── דלגי לתוכן (נגישות מקלדת) ── */
.skip-link {
  position: fixed; top: -3rem; right: 1rem; z-index: 100;
  background: var(--deep); color: #fff;
  padding: .6rem 1.1rem; border-radius: 0 0 8px 8px;
  text-decoration: none; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 1rem 4rem; }

/* ── פס עליון ── */
header.bar {
  background: var(--card);
  border-bottom: 1px solid #dfe5e4;
  padding: .7rem 0;
  position: sticky; top: 0; z-index: 10;
}
.bar .wrap { display: flex; align-items: center; gap: 1rem; padding-bottom: 0; }
.brand { font-family: "Secular One", sans-serif; font-size: 1.25rem; color: var(--deep); text-decoration: none; }
.bar .spacer { flex: 1; }
.who { font-size: .8rem; color: var(--muted); }

/* ── כפתורים ── */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  /* גרדיאנט בין שני גווני העומק — לא בין גווני הטורקיז הבהירים,
     כי טקסט לבן עליהם לא עומד ביחס ניגודיות 4.5:1 (ראו הערה על --turquoise למעלה) */
  background: linear-gradient(135deg, var(--deep), var(--deepest) 100%);
  color: #fff;
  font: inherit; font-size: .95rem;
  padding: .55rem 1.3rem; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(2,156,131,.28);
  transition: box-shadow .18s, transform .18s;
}
.btn:hover { background: var(--deepest); box-shadow: 0 5px 16px rgba(1,112,94,.34); transform: translateY(-1px); }
.btn.ghost {
  background: #fff; color: var(--deepest); border: 1.5px solid var(--turquoise);
  box-shadow: 0 2px 10px rgba(2,76,65,.10);
}
.btn.ghost:hover { background: var(--deep); color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ══════════════════════════════════════════════════════
   ההירו — "הפלייר חי" (בחירת לימור 2026-09-07)
   התמונה היא הפלייר עצמו: הנוף, הספר הפתוח, ענף הזית והלוגו.
   ⚠️ המתכון של הדף הישן שלה, ואסור לסטות ממנו:
   התמונה ב-opacity 1, בלי mix-blend-mode:multiply (הוא מה שהרג
   אותה בעבר), ורעלה **לבנה** — לא בגווני קרם, שמעכירים.
   ══════════════════════════════════════════════════════ */
.hero { position: relative; height: clamp(420px, 62vw, 700px); overflow: hidden; }
.hero__photo {
  position: absolute; inset: 0;
  background: url(assets/hero.jpg) center 47% / cover no-repeat;
}
/* ⚠️ הרעלה מערפלת מעט — היא לא מלבינה.
   הגרסה הראשונה הגיעה ל-92% לבן על שליש מהתמונה ומחקה את העמק.
   לימור: "שלא תשתלט ותמחק, רק תערפל מעט". לכן:
   • הגרדיאנט האופקי נוגע רק ב-25% החיצוניים ומגיע ל-30% לבן לכל היותר.
   • הגרדיאנט האנכי נועד רק לחבר את קצה התמונה לרקע הדף.
   הקריאוּת של הטקסט לא מגיעה מכאן אלא מפאנל הזכוכית שמתחת. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.16) 82%, rgba(255,255,255,.30) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 22%, rgba(251,247,238,.45) 90%, var(--paper) 100%);
}
/* z-index חובה: הרעלה היא absolute, ואלמנט ממוקם נצבע מעל אלמנט
   שאינו ממוקם בלי קשר לסדר ב-DOM. בלי זה הטקסט יוצא דהוי במובייל. */
.hero__txt {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  text-align: right; padding: 0 1.2rem 2.6rem;
  max-width: 1000px; margin: 0 auto;
}
/* פאנל זכוכית: מטשטש את מה שמאחוריו אבל שומר על הצבע — הנוף
   ממשיך לזרוח דרכו במקום להימחק. זה מה שמחזיק את הקריאוּת
   עכשיו כשהרעלה כמעט לא קיימת. */
/* ⚠️ אין כאן פאנל. לימור: "בלי ריבוע שמסתיר את הנוף".
   הקריאוּת מגיעה מהילה לבנה רכה סביב האותיות עצמן — בדיוק המנגנון
   שמחזיק את האותיות הפורחות — ולא מרקע שמונח על התמונה. זה גם
   עקבי עם הכלל שלה מהסבב הקודם: קריאוּת לא נקנית בהלבנת התמונה. */
.hero__card { max-width: 27rem; padding: 0 .2rem; }
/* דפדפן בלי backdrop-filter מקבל רקע אטום יותר, אחרת הטקסט נעלם */
/* balance מונע מילה יתומה בשורה השנייה של הכותרת */
.hero h1 {
  font-size: 2.05rem; color: var(--deep); margin-bottom: .2em; text-wrap: balance;
  text-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9), 0 1px 2px rgba(255,255,255,.8);
}
/* קו זהב דק מתחת לכותרת — הסימן היחיד של "פרימיום" שנוסף כאן.
   מעבר לזה, פרימיום הוא איפוק וחומר טוב, לא עוד קישוט.
   ⚠️ to left ולא 90deg: הקו עוגן בימין (תחילת השורה בעברית),
   ולכן הצד המלא צריך להיות ימני והדהייה שמאלה. */
.hero h1::after {
  content: ""; display: block; width: 4rem; height: 3px; border-radius: 3px;
  margin: .55rem 0 .7rem;
  background: linear-gradient(to left, var(--ochre), rgba(201,169,107,0));
}
.hero p  {
  font-size: 1.05rem; color: var(--deepest); margin: 0 0 1rem; line-height: 1.55;
  text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.92);
}
/* שבבי-עובדה: המספרים האמיתיים של המאגר, כמו בדף הנחיתה.
   הם עונים על "מה יש כאן" לפני שצריך לגלול. */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.chip {
  font-size: .78rem; color: var(--deepest); background: rgba(255,255,255,.86);
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem;
}
.hero .cta { display: flex; gap: .6rem; flex-wrap: wrap; }
/* "כניסה למנויות" הוא הכפתור היחיד בהירו שמדבר על מנוי, ולכן הוא
   מקבל את הזהב. הכפתור הראשי נשאר ירוק: הוא מזמין ללמוד, לא לשלם. */
.hero .btn.ghost { border-color: var(--brass); color: var(--deepest); }
.hero .btn.ghost:hover { background: var(--brass); color: #16332c; }

/* ── ענף הזית שמתנדנד ────────────────────────────────
   לימור ביקשה להנפיש את הענף שבפינה. אי אפשר להזיז חלק מתמונת
   רקע, ולכן זה **עותק שני של אותה תמונה בדיוק**, עם אותו
   background בדיוק, שממוסך לפינה הימנית-עליונה ומסתובב.
   ⚠️ למה זה מתיישר תמיד: התמונה ריבועית וההירו רחב, ולכן cover
   מותח אותה לפי הרוחב — כלומר אחוז ברוחב הקופסה = אותו אחוז
   בתמונה. אנכית היא זזה, אבל הענף תמיד נשאר בשליש העליון, וזה
   מה שהמסכה מכסה. הסיבוב מזיז גם את השמיים שמסביב לענף, ובגלל
   שאלה בדיוק אותם פיקסלים — לא רואים תפר. */
.hero__branch {
  position: absolute; inset: 0;
  background: url(assets/hero.jpg) center 47% / cover no-repeat;
  -webkit-mask-image: radial-gradient(58% 52% at 88% 0%, #000 58%, transparent 100%);
          mask-image: radial-gradient(58% 52% at 88% 0%, #000 58%, transparent 100%);
  transform-origin: 96% -8%;
  animation: branch-sway 11s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes branch-sway {
  from { transform: rotate(-0.75deg); }
  to   { transform: rotate(0.75deg); }
}
@media (prefers-reduced-motion: reduce) { .hero__branch { animation: none; transform: none; } }
/* במובייל התמונה היא פס נמוך, המסכה כבר לא יושבת על הענף,
   והעותק הכפול רק מכביד. הענף פשוט נשאר סטטי. */
@media (max-width: 640px) { .hero__branch { display: none; } }

/* האותיות הפורחות מהספר.
   הן עולות מלמטה — מהספר הפתוח — ולא מרחפות בשמיים.
   גוון חול/אוכרה עם הילה רכה, אחרת הן נבלעות בשמיים הבהירים. */
.hero__letters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__letters b {
  position: absolute; top: var(--letter-start, 88%); display: block;
  font-family: "Frank Ruhl Libre", David, serif; font-weight: 400;
  color: #a8813a;
  /* הילה לבנה כפולה: האותיות חוצות גם שמיים בהירים וגם מדרון כהה,
     ובלעדיה הן נעלמות באחד משניהם. */
  text-shadow: 0 0 12px rgba(255,255,255,.95), 0 1px 3px rgba(255,255,255,.9);
  opacity: 0;
  animation: float-up 14s linear infinite;
}
/* המסלול ב-% של גובה ההירו ולא ב-vh, כדי שהוא יישאר נכון
   גם כשה-clamp מקטין את ההירו במסכים צרים. */
@keyframes float-up {
  0%   { opacity: 0;    top: var(--letter-start, 88%); transform: rotate(0deg)   scale(.85); }
  14%  { opacity: .85; }
  68%  { opacity: .55; }
  100% { opacity: 0;    top: 4%;  transform: rotate(-12deg) scale(1.2); }
}
/* מי שביקשה בטלפון שלה לעצור תנועות — לא רואה אותן זזות, אבל כן רואה אותן */
@media (prefers-reduced-motion: reduce) {
  .hero__letters b { animation: none; opacity: .5; top: 30%; }
}

/* ── סקשנים בעמוד הבית ── */
.sec { margin-top: 2.4rem; }
.sec:first-child { margin-top: 1.6rem; }
/* תווית-על ככדור ולא כשורת טקסט — נלמד מדף הנחיתה. היא מסמנת
   את תחילת הסקשן בלי להתחרות בכותרת. */
.eyebrow {
  display: inline-block;
  font-family: "Secular One", sans-serif; font-size: .74rem; color: var(--deep);
  letter-spacing: .04em; margin: 0 0 .55rem;
  background: rgba(190,143,62,.14); border: 1px solid rgba(190,143,62,.3);
  padding: .22rem .85rem; border-radius: 999px;
}
.sec > .lead { color: var(--muted); font-size: .95rem; margin: 0 0 1.1rem; }

/* ── כרטיסי ספרים ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.book {
  background: var(--card); border-radius: var(--radius);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
/* ראש הכרטיס הוא הצבע של הספר. זה מה שהופך את המדף לצבעוני */
/* ⚠️ position:relative חייב לשבת על .cap עצמו ולא רק על .book .cap —
   ה-::before שמצייר את כתם צבעי-המים הוא absolute, וכשהאב לא ממוקם
   הוא בורח ומכסה את כל העמוד בשכבה לבנה. */
.cap { position: relative; }
.book .cap {
  height: 5.4rem; display: flex; align-items: flex-end;
  padding: .6rem .9rem;
}
.book .cap h2 {
  margin: 0; color: #fff; font-size: 1.15rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.32);
}
.book .in { padding: .7rem .9rem .9rem; }
.book .meta { color: var(--muted); font-size: .85rem; }
.badge {
  font-size: .72rem; padding: .18rem .7rem;
  border-radius: 999px; letter-spacing: .02em;
}
.book .cap .badge { position: absolute; top: .55rem; left: .7rem; }
.badge.free   { background: var(--cream); color: var(--deepest); }
.badge.open   { background: var(--turquoise); color: #fff; }
.badge.locked { background: rgba(255,255,255,.92); color: var(--deepest); }

/* ── הצבע של כל ספר ──────────────────────────────────
   הצבעים נדגמו מהפלייר. המפתח הוא books.id, ולכן ספר חדש
   בלי כלל כאן מקבל את ברירת המחדל (הטורקיז) ולא נשבר.
   שלושת המשתנים יושבים על שורש הכרטיס ויורדים בירושה גם
   לראש הצבעוני וגם לפס הצד — צבע אחד, שני שימושים. */
[data-book]                    { --bk: var(--turquoise); --bk-l:#37b39c; --bk-d: var(--deep); }
[data-book="yehoshua"]         { --bk: var(--ochre);     --bk-l:#d9bf85; --bk-d:#b08f4e; }
[data-book="shoftim"]          { --bk: var(--clay);      --bk-l:#d79a72; --bk-d:#a35e39; }
[data-book="shmuel-a"]         { --bk: var(--olive);     --bk-l:#b3bb95; --bk-d:#7d8563; }
[data-book="shmuel-b"]         { --bk: var(--water);     --bk-l:#8ec9bf; --bk-d:#4f978f; }
[data-book="tehilim"]          { --bk: var(--sky);       --bk-l:#8fcbe6; --bk-d:#3d90b8; }
[data-book="shir-hashirim"]    { --bk: var(--rose);      --bk-l:#e3a0a8; --bk-d:#ad5d69; }
[data-book="megillot"]         { --bk: var(--turquoise); --bk-l:#4fbda6; --bk-d: var(--deep); }
[data-book="melachim"]         { --bk: var(--gold);      --bk-l:#e0bb72; --bk-d:#a87c2c; }
.cap { background: linear-gradient(135deg, var(--bk-l), var(--bk) 60%, var(--bk-d)); }

/* ── התוחם החלקי ─────────────────────────────────────
   פס צבע על הקצה החיצוני של הכרטיס, בצבע של הספר, פלוס צל
   רך יותר. זה מה שהופך ריבוע לבן לכרטיס — ובלי להקיף אותו
   במסגרת מלאה, שסוגרת ומכבידה. */
.book, .olesson, .panel, .note { position: relative; overflow: hidden; }
.book::after, .olesson::after, .panel::after, .note::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 5px; background: var(--bk, var(--turquoise));
  border-radius: 0 0 0 0;
}
/* צל גבוה ורך במקום צל קרוב — זה ההבדל בין כרטיס שמונח על הדף
   לכרטיס שמצויר עליו. נמדד מדף הנחיתה. */
.book, .olesson {
  box-shadow: 0 1px 2px rgba(12,40,34,.05), 0 18px 44px -26px rgba(12,40,34,.34);
}
.book:hover, .olesson:hover {
  box-shadow: 0 2px 4px rgba(12,40,34,.07), 0 24px 54px -24px rgba(12,40,34,.42);
}
/* הפאנלים בעמודי הספר והשיעור נשענים על החול, לא על צבע ספר */
.panel::after { background: var(--sand); }
.note::after  { background: var(--ochre); }
.note.locked::after { background: var(--clay); }
/* מרקם צבעי-מים עדין: כתם אור אחד בפינה, לא תמונה */
.cap::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 22% 0%, rgba(255,255,255,.42), transparent 62%);
}
.cap > * { position: relative; }

/* ── כרטיס שיעור פתוח (בעמוד הבית) ── */
.opengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.1rem; }
.olesson {
  background: var(--card); border-radius: var(--radius);
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
/* בכרטיס שיעור הצבע הוא רצועת סימון, לא כותרת — כל השיעורים
   הפתוחים שייכים לאותו ספר, ושבעה בלוקים גדולים באותו גוון
   נראים כמו תמונות שלא נטענו. */
.olesson .cap { height: 2.6rem; }
.olesson .in { padding: .7rem .9rem .9rem; }
.olesson .t { display: block; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.olesson .m { font-size: .8rem; color: var(--muted); }

/* תוויות סוג-תוכן: מה מחכה בשיעור, עוד לפני שנכנסים */
.pills { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }
.pill { font-size: .7rem; padding: .12rem .6rem; border-radius: 999px; }
.pill.yt { background: #fdeceb; color: #a03127; }
.pill.au { background: #e7f4f1; color: var(--deepest); }
.pill.sh { background: var(--cream); color: #6b5a2a; }

/* ── פס המנויות ──
   ירוק כהה ולא גרדיאנט טורקיז: בדף הנחיתה הניגוד מגיע מפס כהה
   אחד באמצע העמוד, וזה מה שנותן לדף קצב במקום מישור אחיד. */
.gate {
  background:
    radial-gradient(120% 160% at 88% 0%, var(--dark-2), transparent 62%),
    var(--dark);
  border-radius: 20px; padding: 1.5rem 1.6rem; color: var(--on-dark);
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  box-shadow: var(--shadow-lift);
  position: relative; overflow: hidden;
}
/* קו פליז דק בראש הפס */
.gate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(to left, var(--brass), rgba(190,143,62,0) 70%);
}
.gate h2 { color: var(--on-dark); margin: 0 0 .15em; }
.gate p  { margin: 0; font-size: .95rem; color: var(--on-dark); opacity: .82; }
.gate .spacer { flex: 1; }
.gate .btn {
  background: linear-gradient(135deg, var(--brass-lite), var(--brass) 65%, #9d7430);
  color: #2a1f0b; box-shadow: 0 4px 16px rgba(190,143,62,.3);
}
.gate .btn:hover { background: var(--brass-lite); color: #2a1f0b; }

/* ── רשימת שיעורים ── */
.lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.lesson {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .85rem 1.1rem; display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit;
}
.lesson:hover { outline: 1.5px solid var(--turquoise); }
.lesson .num {
  flex: 0 0 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--wash); color: var(--deepest);
  display: grid; place-items: center; font-size: .85rem;
}
.lesson .body { flex: 1; min-width: 0; }
.lesson .t { display: block; font-size: 1rem; }
.lesson .s { color: var(--muted); font-size: .8rem; }

/* ── עמוד שיעור ── */
.player { background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel {
  background: var(--card); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-top: 1.2rem;
  box-shadow: 0 1px 2px rgba(2,76,65,.06), 0 8px 24px -6px rgba(2,76,65,.14);
}
.panel h2 { margin-bottom: .5em; }

/* ── נגן האודיו ── */
.audio audio { display: none; }            /* הנגן שלנו מחליף את זה של הדפדפן */
.audio__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.audio__head strong { font-family: "Secular One", sans-serif; font-weight: 400; color: var(--deep); font-size: 1.1rem; }
.audio__head small { color: var(--muted); font-size: .82rem; }
.audio__resume { color: var(--deepest) !important; background: var(--cream); border-radius: 999px; padding: .1rem .65rem; }

.audio__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.audio__row button {
  font: inherit; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--wash); color: var(--deepest);
}
.audio__row button:hover { background: var(--sand); }
.apl {
  width: 2.9rem; height: 2.9rem; font-size: 1rem; flex: none;
  background: linear-gradient(135deg,var(--deep),var(--deepest) 100%) !important; color: #fff !important;
  box-shadow: 0 3px 12px rgba(2,156,131,.3);
}
.apl:hover { background: var(--deepest) !important; }
.askip { font-size: .82rem; padding: .42rem .7rem; flex: none; }
.arate { font-size: .82rem; padding: .42rem .8rem; flex: none; min-width: 3.2rem; }
.atime { font-size: .8rem; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }

/* ⚠️ הפס נשאר LTR בכוונה: נגני מדיה הם LTR בכל העולם, ובעברית
   RTL הגרירה יוצאת הפוכה למה שהיד מצפה. */
.aseek {
  flex: 1 1 9rem; direction: ltr; appearance: none; -webkit-appearance: none;
  height: 6px; border-radius: 999px; background: var(--wash); cursor: pointer;
  background-image: linear-gradient(90deg, var(--turquoise) var(--p, 0%), transparent var(--p, 0%));
  background-repeat: no-repeat;
}
.aseek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--deep); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(2,76,65,.4);
}
.aseek::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff;
  background: var(--deep); box-shadow: 0 1px 5px rgba(2,76,65,.4);
}

/* ── חומרי השיעור ── */
.mats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .7rem; margin-top: .7rem; }
.mat {
  display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit;
  background: var(--wash); border-radius: 12px; padding: .7rem .8rem;
  border: 1px solid transparent;
}
.mat:hover { border-color: var(--turquoise); background: #fff; }
.mat__ico {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 10px; font-size: .68rem; letter-spacing: .03em; color: #fff;
}
.mat__ico.pdf  { background: linear-gradient(135deg,#d79a72,var(--clay) 70%,#a35e39); }
.mat__ico.docx { background: linear-gradient(135deg,#37b39c,var(--turquoise) 70%,#018f78); }
.mat__ico.sum  { background: linear-gradient(135deg,#8fcbe6,var(--sky) 70%,#3d90b8); }
.mat__t strong { display: block; font-weight: 600; font-size: .95rem; }
.mat__t small  { color: var(--muted); font-size: .8rem; }
.mat__none { color: var(--muted); font-size: .88rem; margin: .7rem 0 0; }

/* ── מצבים ── */
.note { background: var(--cream); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--deepest); }
.note.locked { background: var(--sand); }
.center { text-align: center; }
.loading { color: var(--muted); padding: 2rem 0; text-align: center; }
.field { width: 100%; font: inherit; padding: .6rem .8rem; border: 1.5px solid #cfd8d6; border-radius: 10px; }
.field:focus { outline: 0; border-color: var(--turquoise); }

@media (max-width: 640px) {
  :root { font-size: 18px; }
  .wrap { padding: 0 .8rem 3rem; }
  /* במובייל התמונה מצטמצמת לפס, והטקסט יורד מתחתיה על רקע בהיר —
     כותרת על גבי נוף בטלפון צרה נקראת רע, וזה חשוב יותר מהאפקט. */
  .hero { height: auto; }
  /* גובה לפי הרוחב ולא לפי vh: ב-vh הפס משתנה עם גובה החלון ומתפוצץ
     במסכים גבוהים. ⚠️ החיתוך נעצר ב-75% מגובה התמונה בכוונה — מתחת
     לזה מתחיל פס הקרם המודפס של הפלייר עם הסלוגן, והוא נחתך מכוער. */
  .hero__photo {
    position: relative; inset: auto;
    height: 58vw; min-height: 240px; max-height: 380px;
    background-position: center 40%;
  }
  .hero__veil { inset: 0 0 auto 0; height: 58vw; min-height: 240px; max-height: 380px;
    background: linear-gradient(180deg,
      rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%, rgba(251,247,238,.55) 80%, var(--paper) 100%); }
  .hero__txt { padding: 1.2rem 1rem 1.6rem; background: var(--paper); align-items: stretch; height: auto; }
  /* על רקע נייר שטוח אין מה להאיר, וההילה רק מלכלכת את הטקסט */
  .hero__card { max-width: none; padding: 0; }
  .hero h1, .hero p { text-shadow: none; }
  .hero h1 { font-size: 1.6rem; }
  .hero__letters { inset: 0 0 auto 0; height: 58vw; min-height: 240px; max-height: 380px; }
  .gate { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── עמודי מדיניות/תנאים ── */
.panel.doc { max-width: 720px; margin: 1.2rem auto 0; }
.panel.doc h2 { margin-top: 1.3em; }
.panel.doc h2:first-child { margin-top: 0; }

/* ── באנר ההתקנה ──
   יושב למטה כדי לא לדחוף את התוכן, ונסגר לתמיד בלחיצה אחת. */
.install {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 40;
  max-width: 30rem; margin: 0 auto;
  display: flex; align-items: center; gap: .8rem;
  background: var(--dark); color: var(--on-dark);
  border-radius: 16px; padding: .8rem .9rem .8rem 1.1rem;
  box-shadow: var(--shadow-lift);
}
.install__t { flex: 1; min-width: 0; }
.install__t strong { display: block; font-size: .92rem; }
.install__t small  { display: block; font-size: .78rem; opacity: .78; line-height: 1.4; }
.install .btn {
  flex: none; font-size: .85rem; padding: .45rem 1.1rem;
  background: linear-gradient(135deg, var(--brass-lite), var(--brass) 65%, #9d7430);
  color: #2a1f0b;
}
.install__x {
  flex: none; border: 0; cursor: pointer; background: transparent;
  color: var(--on-dark); opacity: .6; font-size: .95rem; line-height: 1;
  padding: .3rem;
}
.install__x:hover { opacity: 1; }

/* ── פוטר ── */
footer.foot {
  margin-top: 3rem; padding: 1.4rem 0; border-top: 1px solid #dfe5e4;
  text-align: center; color: var(--muted); font-size: .85rem;
}
footer.foot a { margin: 0 .5rem; }

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

body.admin { font-size: 1rem; }
body.admin .wrap { max-width: 1180px; }

.admin-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.admin-head h1 { margin: 0; flex: 1; }

/* ── מספרים גדולים ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 1rem 0 1.6rem; }
.stat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem;
}
.stat strong { font-family: "Secular One", sans-serif; font-weight: 400; font-size: 1.5rem; color: var(--deep); }
.stat span { font-size: .8rem; color: var(--muted); }

/* ── לשוניות ── */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1.5px solid #dfe5e4; margin-bottom: 1.2rem; }
.tab {
  font: inherit; font-size: .95rem; cursor: pointer;
  background: none; border: 0; border-bottom: 2.5px solid transparent;
  padding: .5rem .9rem; margin-bottom: -1.5px; color: var(--muted);
}
.tab:hover { color: var(--deepest); }
.tab.is-on { color: var(--deep); border-bottom-color: var(--turquoise); }

.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .field { width: auto; }

/* ── טבלאות ── */
.tbl {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.tbl th, .tbl td { text-align: right; padding: .6rem .8rem; border-bottom: 1px solid #eef1f0; vertical-align: middle; }
.tbl th { font-size: .78rem; color: var(--muted); font-weight: 600; background: #f6f8f8; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td { font-size: .9rem; }
.tbl td strong { font-weight: 600; display: block; }
.tbl td small { display: block; font-size: .75rem; color: var(--muted); }
.tbl td small.mono, .tbl td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; direction: ltr; text-align: right; }
.tbl tr.dim td { opacity: .55; }
.tbl td.act { white-space: nowrap; text-align: left; }
.tbl td.act > * { margin-inline-start: .25rem; }
.tbl .badge { margin-inline-end: .25rem; }

.btn.sm { font-size: .8rem; padding: .3rem .8rem; }
.btn.danger { background: #b3352b; }
.btn.danger:hover { background: #8d2921; }
.iconbtn {
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
  background: var(--wash); border: 0; color: var(--deepest);
  width: 1.9rem; height: 1.9rem; border-radius: 8px;
}
.iconbtn:hover:not(:disabled) { background: var(--sand); }
.iconbtn:disabled { opacity: .3; cursor: default; }

/* ── טפסים ── */
.form { display: flex; flex-direction: column; gap: .9rem; }
.form h3 { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid #eef1f0; }
.frow { display: flex; flex-direction: column; gap: .25rem; }
.frow > label { font-size: .85rem; color: var(--deepest); font-weight: 600; }
.frow > small { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.frow.check > label { display: flex; align-items: center; gap: .45rem; font-weight: 400; font-size: .95rem; }
.frow.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--turquoise); }
.form select.field { background: #fff; }
.form textarea.field { resize: vertical; }

/* ── גיליון צף ── */
.modal {
  position: fixed; inset: 0; background: rgba(2,76,65,.35);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.sheet {
  background: var(--card); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(2,76,65,.25);
  width: min(620px, 100%); max-height: 92vh; display: flex; flex-direction: column;
}
.sheet-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem .6rem; }
.sheet-head h2 { margin: 0; flex: 1; }
.sheet-body { padding: .4rem 1.2rem 1rem; overflow-y: auto; }
.sheet-foot {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem; border-top: 1px solid #eef1f0;
}
.sheet-foot .spacer { flex: 1; }

/* ── רשימת ההרשאות בכרטיס הלומדת ── */
.entlist { display: flex; flex-direction: column; gap: .5rem; }
.ent {
  display: flex; align-items: center; gap: .6rem;
  background: var(--wash); border-radius: 10px; padding: .6rem .8rem;
}
.ent > div:first-child { flex: 1; }
.ent strong { font-weight: 600; font-size: .95rem; }
.ent small { display: block; font-size: .75rem; color: var(--muted); }
.ent.dim { opacity: .55; }
.ent .act { white-space: nowrap; display: flex; gap: .3rem; }

/* ── הודעה חולפת ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.4rem;
  background: var(--deepest); color: #fff; padding: .6rem 1.2rem; border-radius: 999px;
  font-size: .9rem; box-shadow: 0 4px 18px rgba(0,0,0,.25); z-index: 60; max-width: 90vw;
}
.toast.bad { background: #b3352b; }

/* טבלה רחבה גוללת בתוך עצמה. הסתרת עמודות במובייל שוברת את היישור
   בין הכותרת לשורה, ולכן עדיף לגלול. */
.tabbody { overflow-x: auto; }

@media (max-width: 700px) {
  .tbl { min-width: 560px; }
  .sheet { max-height: 100vh; border-radius: 0; }
  .modal { padding: 0; }
}


/* ── פס ההצטרפות לקהילת הלומדות ──────────────────────
   הפס הכהה היחיד בעמוד, וזה בכוונה: אחרי מסך שלם של נייר חם
   הוא עוצר את הגלילה. הזהב עליו הוא הצבע היחיד שמחזיק ניגודיות
   מלאה על הירוק הכהה, ולכן הכפתור כאן זהב ולא טורקיז. */
.join {
  background: linear-gradient(160deg, var(--dark), var(--dark-2) 58%, #0a1c19);
  color: var(--on-dark);
  margin-top: 3.4rem;
  padding: 2.8rem 0 3rem;
  position: relative;
  overflow: hidden;
}
/* חוט זהב דק בקצה העליון — הסימן שאומר "כאן זה נגמר, וזה המשך" */
.join::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-lite) 50%, var(--brass) 78%, transparent);
}
.join .wrap { padding-bottom: 0; text-align: center; }
.join h2 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; text-wrap: balance; }
.join p  { color: rgba(243,238,225,.86); max-width: 34rem; margin: 0 auto 1.4rem; font-size: 1rem; }
.eyebrow.light {
  color: var(--brass-lite);
  background: rgba(190,143,62,.16);
  border-color: rgba(220,196,138,.4);
}
/* כפתור זהב: טקסט ירוק כהה ולא לבן — לבן על זהב נותן 2.6:1 בלבד */
.btn.gold {
  background: linear-gradient(135deg, var(--brass-lite), var(--brass) 58%, #a87c2c);
  color: #16332c;
  font-size: 1.02rem; padding: .68rem 1.9rem;
  box-shadow: 0 6px 20px rgba(190,143,62,.32);
}
.btn.gold:hover { background: var(--brass-lite); color: #0f2a24; box-shadow: 0 8px 26px rgba(220,196,138,.42); }

/* ── פס גב-הספרים ────────────────────────────────────
   שמונה רצועות בצבעי הכרטיסים במדף. זה הצבע היחיד שנכנס לפתיחה
   מבלי לגעת בנוף, והוא אומר "יש כאן הרבה ספרים" עוד לפני גלילה. */
.spines { display: flex; height: 8px; }
.spines i { flex: 1; }

/* ── כרטיסי השיעורים הפתוחים, לפי מועד ──────────────
   לימור: "שלא הכל ייראה אותו דבר". שבעת הכרטיסים היו זהים כי כולם
   מאותו ספר; המועד הוא ההבדל האמיתי ביניהם, וכאן הוא מקבל צבע ושם. */
.olesson .cap { height: 2.2rem; }
.olesson .moed {
  position: absolute; inset-inline-start: .8rem; bottom: .35rem;
  font-family: "Secular One", sans-serif; font-size: .82rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
[data-moed="chanuka"] { --bk: var(--gold);   --bk-l:#e2c079; --bk-d:#a87c2c; }
[data-moed="purim"]   { --bk: var(--rose);   --bk-l:#e3a0a8; --bk-d:#ad5d69; }
[data-moed="pesach"]  { --bk: var(--sky);    --bk-l:#8fcbe6; --bk-d:#3d90b8; }
[data-moed="shoa"]    { --bk: #6C7B77;       --bk-l:#94a29d; --bk-d:#4c5a56; }
[data-moed="shavuot"] { --bk: var(--olive);  --bk-l:#b8c09a; --bk-d:#7d8563; }
[data-moed="tisha"]   { --bk: var(--clay);   --bk-l:#d79a72; --bk-d:#a35e39; }

/* ── ספר שעוד לא התחיל ───────────────────────────────
   כרטיס "בקרוב" במדף, והפאנל שנפתח כשלוחצים עליו. */
.badge.soon { background: rgba(255,255,255,.92); color: #8a6a20; }
.book.soon .cap { filter: saturate(.6); }
.book .meta.soon { color: #8a6a20; font-weight: 600; }

/* ── כל פאנל שמזמין להצטרף — כהה וזהב ────────────────
   לימור: "כשצריך כרטיס כהה כמו להצטרפות למנוי, אז זכוכית ירוקה
   כהה עם כיתוב לבן וזהב וכפתור זהב מתגוון". שלושת המקומות שבהם
   מבקשים ממנה להצטרף — פס המנויות בעמוד הבית, ספר נעול, וספר
   שעוד לא התחיל — מקבלים עכשיו את אותו טיפול בדיוק. הקרם החיוור
   ששימש כאן קודם נראה כמו הודעת מערכת, לא כמו הזמנה. */
.note.soon, .note.locked {
  background:
    radial-gradient(120% 160% at 88% 0%, var(--dark-2), transparent 62%),
    var(--dark);
  color: var(--on-dark);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-lift);
}
.note.soon h2, .note.locked h2 { color: #fff; margin-bottom: .3em; }
.note.soon p,  .note.locked p  { color: rgba(243,238,225,.86); }
.note.soon::after, .note.locked::after { background: var(--brass); }
/* קו פליז בראש הפאנל, בדיוק כמו בפס המנויות */
.note.soon::before, .note.locked::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(to left, var(--brass), rgba(190,143,62,0) 70%);
}
.note.soon .btn, .note.locked .btn { margin-top: .9rem; color: #2a1f0b; }

/* ── זהב מתגוון ──────────────────────────────────────
   לימור ביקשה שהכפתור הזהוב "יתגוון". הרקע רחב מהכפתור ונע לאט
   על פניו, כמו אור שעובר על מתכת. תנועה איטית מספיק כדי שתורגש
   ולא תטריד, ומכובה למי שביקשה בטלפון לעצור תנועות. */
.btn.gold, .gate .btn, .note.soon .btn, .note.locked .btn {
  background-image: linear-gradient(100deg,
    #a87c2c 0%, var(--brass) 22%, #f0dcab 42%, var(--brass-lite) 52%,
    var(--brass) 70%, #a87c2c 100%);
  background-size: 260% 100%;
  animation: brass-shift 7s ease-in-out infinite alternate;
}
@keyframes brass-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.gold, .gate .btn, .note.soon .btn, .note.locked .btn { animation: none; background-position: 40% 50%; }
}

/* ── פס ההצטרפות: אותה זכוכית כהה של פס המנויות ────── */
.join h2 .accent { color: var(--brass-lite); }