/* ==== העיצוב של האתר — תצוגה ב, «מודרני» (רועי בחר 9/10/2026) ====
 *
 * style.css הוא הבסיס, וגם דף הניהול ודף הנתונים החבוי טוענים אותו — ולכן לא
 * נוגעים בו. הקובץ הזה נטען אחריו רק בעמודים הציבוריים (הבית, סדרות השיעורים,
 * סדרה, אוסף, החשבון), ודורס צבעים, גופן וצורה.
 *
 * הרעיון: אתר לימוד חם ומזמין — גופן אחד (רוביק), קרם חם, טרקוטה לפעולה
 * וטורקיז עמוק לרקעים. התיקונים של רועי («שירגיש פחות AI»): בלי תגיות
 * מעוטרות מעל כותרות, בלי נקודה ירוקה, בלי סיסמאות על התמונה, בלי לב בכפתור
 * התרומה, ותמונת הרב במלבן מלא — לא בעיגול שחותך את הפנים.
 *
 * הגופן: מתוך מאגר הגופנים של מכונת העיצוב (OFL), מוגש מהאתר עצמו.
 */

@font-face{font-family:"Rubik"; src:url(/fonts/rubik-400.woff2) format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"Rubik"; src:url(/fonts/rubik-700.woff2) format("woff2"); font-weight:700; font-display:swap}

:root{
  --bg:#FBF7F2; --surface:#FFFFFF; --surface-2:#F5EEE5;
  --ink:#1F1A17; --ink-2:#554D46; --ink-3:#6A625B;
  --line:#EEE5DA; --line-2:#DDD0BF;
  --accent:#B4532A; --accent-ink:#FFFFFF; --accent-soft:#FBE8DC; --accent-text:#A0441D; --ring:#B4532A;
  --teal:#0F4C4A; --teal-ink:#EAF4F2; --teal-soft:#E2EFEC; --sun:#E9AD45; --sun-text:#F6D08A;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(70,45,20,.05), 0 12px 32px -14px rgba(70,45,20,.2);
  --shadow-lift:0 1px 2px rgba(70,45,20,.05), 0 20px 40px -18px rgba(70,45,20,.35);
  --font:"Rubik","Arial Hebrew",Arial,system-ui,sans-serif;
  --wrap:1200px;
  --head-h:68px;
  --band-y:clamp(48px,8vw,96px);
}
@media (max-width:899px){ :root{--head-h:60px} }
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171310; --surface:#211B17; --surface-2:#2B241E;
    --ink:#F6EFE7; --ink-2:#D3C7BA; --ink-3:#AA9C8D;
    --line:#352C24; --line-2:#4B3F34;
    --accent:#E58A5C; --accent-ink:#1A120D; --accent-soft:#3B2519; --accent-text:#F2A47D; --ring:#E58A5C;
    --teal:#123F3D; --teal-soft:#16302E;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.6);
    --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 20px 40px -18px rgba(0,0,0,.7);
  }
}

/* ---------- בסיס ---------- */
body{font-family:var(--font); background:var(--bg)}
h1, h2, h3{letter-spacing:-.015em}
.wrap{max-width:var(--wrap)}
/* בדף הבית ובעמוד הסדרות כל קטע מביא את הריווח שלו; בשאר העמודים — כמו ב-style.css */
.page-home main, .page-lib main{padding:0}
.section-h{font-size:1.3rem}
.btn{cursor:pointer}
.btn-lg{min-height:52px; padding:var(--s3) var(--s5); font-size:1rem}
.btn-ghost{background:var(--surface)}
.btn-primary{box-shadow:0 8px 18px -10px rgba(180,83,42,.6)}
@media (prefers-color-scheme:dark){ .btn-primary{box-shadow:none} }
/* קטע שקיבל פוקוס אחרי גלילה אליו — בלי מסגרת סביב כל הקטע */
section[tabindex="-1"]:focus, div[tabindex="-1"]:focus, footer[tabindex="-1"]:focus{outline:none}
/* כל קפיצה לקטע (קישור, פוקוס מהמקלדת) עוצרת מתחת לראש העמוד הצף */
html{scroll-padding-top:calc(var(--head-h) + var(--s3))}

/* ---------- ראש העמוד: צף מעל העמוד בכל הגלילה ---------- */
.site-head{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line); transition:box-shadow .2s ease}
@supports (backdrop-filter:blur(8px)){ .site-head{background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px)} }
@media (prefers-color-scheme:dark){
  .site-head{background:rgba(33,27,23,.96)}
  @supports (backdrop-filter:blur(8px)){ .site-head{background:rgba(33,27,23,.92)} }
}
.is-scrolled .site-head{box-shadow:0 8px 24px -18px rgba(70,45,20,.45)}
.site-bar{display:flex; align-items:center; gap:var(--s3) var(--s5); height:var(--head-h)}
.brand{display:inline-flex; align-items:center; gap:10px; min-height:44px; min-width:0; color:var(--ink); text-decoration:none; flex:none}
.brand-mark{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px;
  background:var(--accent); color:var(--accent-ink)}
.brand-mark svg{width:22px; height:22px}
.brand-txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-name{font-weight:700; font-size:1.16rem; letter-spacing:-.01em; white-space:nowrap}
.brand-sub{font-size:.76rem; color:var(--ink-3); margin-top:2px; white-space:nowrap}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:var(--s1)}
.main-nav a{display:flex; align-items:center; min-height:44px; padding:0 var(--s3); border-radius:999px;
  color:var(--ink-2); font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap;
  transition:color .18s ease, background .18s ease}
.main-nav a:hover{color:var(--accent-text); background:var(--accent-soft)}
.main-nav a[aria-current="page"]{color:var(--accent-text)}
/* style.css נותן ל-.topbar פס שלם משלו; כאן הוא רק הקבוצה של התרומה והחשבון */
.site-bar .topbar{display:flex; align-items:center; min-height:0; padding:0; margin-inline-start:auto; flex:none}
.site-bar .top-act{margin:0; gap:var(--s2)}
.donate{min-height:40px; padding:0 16px; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.donate:hover{background:var(--accent); border-color:var(--accent); filter:brightness(.93)}
@media (prefers-color-scheme:dark){ .donate:hover{filter:brightness(1.08)} }
.acct{min-height:40px; font-weight:700}
.nav-btn{display:none; place-items:center; width:44px; height:44px; flex:none; padding:0; order:3;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer}
.nav-btn svg{width:22px; height:22px; grid-area:1/1}
.nav-btn .nav-ic-close{display:none}
.nav-open .nav-btn .nav-ic-open{display:none}
.nav-open .nav-btn .nav-ic-close{display:block}
.nav-btn[aria-expanded="true"]{background:var(--surface-2)}
@media (max-width:899px){
  .site-bar{gap:var(--s2)}
  .nav-btn{display:grid}
  .site-bar .topbar{order:2}
  .main-nav{display:none; position:absolute; inset-inline:0; top:100%; padding:var(--s2) var(--s4) var(--s4);
    background:var(--surface); border-bottom:1px solid var(--line-2); box-shadow:0 18px 30px -18px rgba(0,0,0,.35)}
  .nav-open .main-nav{display:block; animation:menu-in .18s cubic-bezier(.22,1,.36,1)}
  .main-nav ul{flex-direction:column; gap:2px; max-width:var(--wrap); margin:0 auto}
  .main-nav a{min-height:52px; font-size:1.06rem; border-radius:var(--r); padding:0 var(--s3)}
  .main-nav li + li a{border-top:1px solid var(--line); border-radius:0}
  .main-nav li + li a:hover{border-radius:var(--r)}
}
@keyframes menu-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@media (max-width:480px){
  .brand-mark{width:34px; height:34px; border-radius:10px}
  .brand-mark svg{width:20px; height:20px}
  .brand-name{font-size:1.04rem}
  .brand-sub{font-size:.7rem}
  .site-bar .top-act{gap:6px}
  .donate, .acct{min-height:40px; padding-inline:12px}
}
/* מסך צר: «עם הרב…» יורד מתחת לשם רק כשאין מקום — הכפתורים קודמים */
/* טלפון: השם בלי הסמל — המקום הולך לתרומה ולכניסה, שנשארות בשורה */
@media (max-width:399px){ .brand-mark{display:none} }
@media (max-width:359px){
  .brand-sub{display:none}
  .site-bar{gap:6px}
  .donate, .acct{padding-inline:10px}
}
/* מסך צר מאוד: «כניסה» כסמל בלבד; השם המלא נשאר לקורא המסך */
@media (max-width:339px){
  .acct:not(.is-in) span{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .acct:not(.is-in){padding:0; width:40px; justify-content:center}
}

/* שרשרת המקום באתר — שורה משלה מתחת לראש העמוד */
.crumbs{padding-top:var(--s2)}
.crumbs .trail{padding:0}
/* הקישור בשרשרת הוא inline-flex, ושם עטוף ב-.nm («ספר הכוזרי <nm>לרבינו…</nm>»)
   איבד את הרווח שלפני העטיפה — «הכוזרילרבינו». רווח של מילה בין החלקים. */
.trail a{column-gap:.28em}

/* ---------- מבנה כללי של קטעים ---------- */
.band{padding-block:var(--band-y)}
.sec-head{margin-bottom:var(--s6); max-width:62ch}
/* שם הקטע מעל הכותרת: תווית שקטה, לא תגית מעוטרת */
.kicker{margin:0 0 var(--s2); font-size:.9rem; font-weight:700; color:var(--accent-text); letter-spacing:0}
.sec-title{margin:0; font-size:clamp(1.65rem,4.2vw,2.5rem); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; text-wrap:balance}
.sec-sub{margin:var(--s2) 0 0; color:var(--ink-2)}
.sec-head .hook{margin:var(--s3) 0 0}

/* ---------- פתיחה ---------- */
.hero{position:relative; padding:0; border-bottom:0;
  background:linear-gradient(180deg, var(--bg) 0%, #F7EFE5 100%)}
@media (prefers-color-scheme:dark){ .hero{background:linear-gradient(180deg, var(--bg) 0%, #1D1814 100%)} }
.hero-in{display:grid; gap:var(--s6); align-items:center; padding-block:clamp(28px,6vw,80px)}
@media (min-width:900px){ .hero-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--s7)} }
.hero h1{margin:0 0 var(--s4); font-size:clamp(2.5rem,7.2vw,4.4rem); line-height:1.02; font-weight:700; letter-spacing:-.025em}
.hero h1 > span{font-size:.42em; font-weight:400; color:var(--accent-text); margin-top:.45em; letter-spacing:0}
.lede{margin:0 0 var(--s3); font-size:clamp(1.15rem,2.4vw,1.4rem); font-weight:700; color:var(--ink)}
.blurb{margin:0; font-size:1.05rem; line-height:1.75; max-width:56ch; color:var(--ink-2)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s5) 0 0}
.has-cont .hero-go{background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:none}
.has-cont .hero-go:hover{background:var(--surface-2); filter:none}
.hero-fig{margin:0; justify-self:center; width:min(100%,420px)}
.hero-fig img{display:block; width:100%; height:auto; aspect-ratio:720/896; object-fit:cover;
  border-radius:28px; background:var(--surface-2); box-shadow:0 30px 60px -32px rgba(70,45,20,.55)}
/* טלפון: התמונה רחבה ונמוכה, כדי שהפתיחה לא תהיה שני מסכים */
@media (max-width:899px){
  .hero-fig{width:100%; max-width:520px; justify-self:start}
  .hero-fig img{aspect-ratio:840/717; border-radius:22px}
}

/* המספרים: שורה אחת עם קווים מפרידים. אורך השיעור הממוצע יושב מתחת למספר
   השיעורים — הוא מתאר אותם, ולא עומד לבד כ«עובדה צפה». */
.hero-stats{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s3) 0; margin:var(--s6) 0 0;
  padding-top:var(--s5); border-top:1px solid var(--line-2)}
.hero-stats .st{display:flex; flex-direction:column; margin:0; padding-inline:var(--s5)}
.hero-stats .st:first-child{padding-inline-start:0}
.hero-stats .st + .st{border-inline-start:1px solid var(--line-2)}
.hero-stats dt{order:2; font-size:.92rem; color:var(--ink-2); font-weight:400; margin-top:2px}
.hero-stats dd{margin:0}
.hero-stats .st-n{order:1; font-size:clamp(1.6rem,3.4vw,2rem); font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.hero-stats .st-sub{order:3; margin-top:1px; font-size:.84rem; color:var(--ink-3); white-space:nowrap}
@media (max-width:420px){
  .hero-stats .st{padding-inline:var(--s4)}
  .hero-stats dt{font-size:.86rem}
}

/* ---------- ממשיכים ללמוד ---------- */
.cont.band{margin:0; padding-block:var(--s6)}
.last-card{border:0; border-radius:24px; box-shadow:var(--shadow); padding:var(--s5)}
.last-card .cover{border-radius:16px; border:0}
.cont-link{border:0; border-radius:18px}
.cont-link .cover{border-radius:12px; border:0}
.bar{height:8px; border:0; background:var(--accent-soft)}
.last-acts .btn{border-radius:999px}
@media (max-width:520px){ .last-card{padding:var(--s4)} }

/* ---------- איך לומדים ---------- */
.how-sec{background:var(--surface); border-block:1px solid var(--line)}
.how{gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.how li{position:relative; padding:var(--s5); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg)}
.how li::before{width:32px; height:32px; margin-block-end:var(--s3); background:var(--accent); color:var(--accent-ink); font-size:.9rem}
.how b{font-size:1.18rem; margin-block-end:var(--s2)}
.how span{font-size:.98rem; line-height:1.65}
/* טלפון: המספר ליד הכותרת, לא בשורה משלו */
@media (max-width:640px){
  .how{gap:var(--s3)}
  .how li{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--s3); padding:var(--s4)}
  .how li::before{grid-row:1 / span 2; margin:0}
  .how b{margin-block-end:2px}
}
.hook{border-inline-start-color:var(--accent)}

/* ---------- רוב הלומדים מתחילים מזה ---------- */
.feat{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); min-height:180px}
.feat-card{margin:0}
.feat-link{display:flex; gap:var(--s4); height:100%; padding:var(--s4); color:inherit; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.feat-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.feat-art{width:128px; height:128px; flex:none; border-radius:16px; border:0}
.feat-body{display:flex; flex-direction:column; gap:4px; min-width:0}
.feat-t{font-size:1.3rem; font-weight:700; line-height:1.2}
.feat-by{font-size:.9rem; color:var(--accent-text); font-weight:700}
.feat-text{color:var(--ink-2); font-size:.95rem; line-height:1.55; margin-top:2px}
.feat-meta{color:var(--ink-3); font-size:.86rem; font-variant-numeric:tabular-nums}
.feat-go{display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:auto; padding-top:var(--s2);
  color:var(--accent-text); font-weight:700; font-size:.95rem}
.feat-go svg{width:16px; height:16px}
.feat-link:hover .feat-t{color:var(--accent-text)}
@media (max-width:420px){
  .feat-link{gap:var(--s3); padding:var(--s3)}
  .feat-art{width:96px; height:96px; border-radius:12px}
  .feat-t{font-size:1.16rem}
}

/* ---------- הספרייה: כרטיס לכל סדרה, עם התמונה שלה ---------- */
.lib-sec{background:var(--surface-2)}
.lib-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s4) var(--s6);
  margin-bottom:var(--s6)}
.lib-head .sec-head{margin:0}
.lib-head .search{flex:1 1 320px; max-width:460px}
#results{margin-bottom:var(--s6)}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:var(--s4)}
.card-link{gap:var(--s4); padding:var(--s4); border:0; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card-link:hover{border-color:transparent; transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.card .cover{width:112px; height:112px; border:0; border-radius:16px}
.card-body h3{font-size:1.08rem; line-height:1.35}
/* מה שבפנים: שורה שקטה עם נקודות מפרידות, לכל היותר שתי שורות — לא תגיות */
.card .parts{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; padding:0; font-size:.86rem; line-height:1.55; color:var(--ink-3)}
.card .parts li{display:inline; padding:0; border:0; background:none; font-size:inherit; color:inherit; text-wrap:wrap}
.card .parts li + li::before{content:"\00a0· "; color:var(--ink-3)}   /* הנקודה נצמדת למה שלפניה — שורה לא מתחילה בה */
.card .parts .more{color:var(--ink-3)}
/* מה שבסדרה, במשפט — לסדרה שהשם שלה לא אומר את זה (about ב-collections.json) */
.card-about{margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.card-about + .parts{margin-top:var(--s1)}
.search input{border-radius:999px; background:var(--surface)}
.hits a{border-radius:var(--r)}
@media (max-width:520px){
  .card-link{gap:var(--s3); padding:var(--s3)}
  .card .cover{width:84px; height:84px; border-radius:12px}
  .card .parts{-webkit-line-clamp:1}
  .card-body h3{font-size:1.02rem}
}

/* ---------- על הרב: התמונה במלבן מלא ---------- */
.about-in{display:grid; gap:var(--s6); align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:28px; box-shadow:var(--shadow); padding:clamp(16px,4vw,48px)}
@media (min-width:900px){ .about-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s7)} }
.about-fig{margin:0}
.about-fig img{display:block; width:100%; height:auto; aspect-ratio:840/717; object-fit:cover; border-radius:20px; background:var(--surface-2)}
.about-txt p{max-width:62ch; color:var(--ink-2); font-size:1.04rem; line-height:1.8}
.about-txt .kicker{color:var(--accent-text); font-size:.9rem; line-height:1.4}
.about-txt .about-lead{margin:var(--s2) 0 var(--s3); color:var(--ink); font-size:1.18rem; font-weight:700; line-height:1.5}
.about-links{margin-top:var(--s5)}
.about-links .btn{border-radius:999px}

/* ---------- תרומה: לוח טורקיז ---------- */
.give{padding-block:0 var(--band-y)}
.give-in{--ring:var(--sun); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s5);
  background:var(--teal); color:var(--teal-ink); border-radius:28px; padding:clamp(24px,5vw,56px)}
.give-txt{flex:1 1 420px; max-width:62ch}
.give .sec-title{color:#fff}
.give-txt p{margin:var(--s3) 0 0; color:rgba(234,244,242,.88); font-size:1.04rem}
.give .btn-primary{background:var(--sun); border-color:var(--sun); color:#2A1A05; border-radius:999px; box-shadow:none}

/* ---------- תחתית ---------- */
.site-foot{margin-top:0; padding-top:var(--band-y); padding-bottom:calc(var(--s7) + var(--s4)); background:var(--surface); border-top:1px solid var(--line)}
.contact-g{border-radius:var(--r-lg); background:var(--bg)}
.foot-grid{display:grid; gap:var(--s5) var(--s6); padding-top:var(--s6); margin-top:var(--s6);
  border-top:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:start}
.foot-name{margin:0; font-size:1.3rem; font-weight:700; color:var(--ink)}
.foot-sub{margin:0 0 var(--s3); color:var(--ink-2)}
.foot-h{margin:0 0 var(--s2); font-weight:700; color:var(--ink)}
.foot-nav ul{list-style:none; margin:0; padding:0}
.foot-nav a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); text-decoration:none}
.foot-nav a:hover{color:var(--accent-text); text-decoration:underline}
.foot-nav a[aria-current="page"]{color:var(--accent-text); font-weight:700}
html:not(.acct-on) .foot-me{display:none}
.site-foot .stats{margin:0}
.site-foot .stats dt{letter-spacing:0; color:var(--ink-3); font-weight:400}
.site-foot .stats dd{color:var(--ink)}
.site-foot .btn{border-radius:999px}
/* הודעה קצרה ותחתית העמוד לא נעלמות מאחורי הנגן */
html{scroll-padding-bottom:calc(var(--player-h) + var(--s4))}

/* ---------- עמוד סדרה ועמוד אוסף: פס טורקיז בראש ---------- */
.page-series .crumbs, .page-collection .crumbs{position:relative; z-index:1}
.s-head{--ring:var(--sun); position:relative; color:var(--teal-ink); background:var(--teal); border-bottom:0;
  box-shadow:0 0 0 100vmax var(--teal); clip-path:inset(0 -100vmax); padding-block:var(--s5) var(--s6); margin-top:var(--s2)}
.s-head .cover{border:0; border-radius:20px; box-shadow:0 18px 36px -16px rgba(0,0,0,.6); width:160px; height:160px; background:rgba(255,255,255,.08)}
.s-head h1{color:#fff; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.15}
.s-kicker{margin:0 0 var(--s2); font-size:.92rem; font-weight:700; color:var(--sun-text)}
.s-head .s-meta, .s-head .s-note{color:rgba(234,244,242,.88)}
.s-head .s-about{font-size:1rem; line-height:1.6; color:rgba(255,255,255,.96); text-wrap:pretty}
.s-head .actions .btn{border-radius:999px; background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.32)}
.s-head .actions .btn:hover{background:rgba(255,255,255,.18)}
.s-head .actions .btn-primary{background:var(--sun); border-color:var(--sun); color:#2A1A05; box-shadow:none}
.s-head .actions .btn[aria-disabled=true]{opacity:.6}
/* «המשך מאיפה שעצרת» ומסלול הלימוד: כרטיסים לבנים על הפס, בצבעים של העמוד */
.s-head .resume-btn{border:0; border-radius:20px; color:var(--ink)}
.s-head .resume > .resume-note{color:rgba(234,244,242,.85)}
.s-head .resume > .resume-note .link{color:var(--sun-text)}
.s-head .trk, .s-head .trk-cta{border-radius:20px; border:0; color:var(--ink); box-shadow:0 18px 36px -20px rgba(0,0,0,.55)}
.s-head .trk-cta{border:1px solid rgba(255,255,255,.0)}
.s-head .trk .btn, .s-head .trk-cta .btn{border-radius:999px}
@media (max-width:640px){
  .s-head{padding-block:var(--s4) var(--s5)}
  .s-head .cover{width:84px; height:84px; border-radius:14px}
  .s-head h1{font-size:1.45rem}
}
/* הפס הדביק של החיפוש יושב מתחת לראש העמוד הצף, וכל קפיצה לחלק עוצרת מתחת לשניהם */
.page-series .controls{top:var(--head-h); background:var(--bg)}
html:has(#where){scroll-padding-top:calc(var(--head-h) + var(--sticky-h) + var(--where-h) + var(--s2))}
@media (min-width:1100px){
  .toc-side{top:calc(var(--head-h) + var(--sticky-h)); max-height:calc(100vh - var(--head-h) - var(--sticky-h) - var(--player-h))}
  /* אותו רוחב כמו בשאר העמודים — ראש העמוד לא זז כשעוברים מעמוד לעמוד */
  .has-toc .wrap, .has-toc .player-inner{max-width:var(--wrap)}
}
@media (max-width:640px){
  .page-series .controls{padding-block:var(--s2)}
}
.toc-btn{border-radius:999px}
.toc-a{border-radius:10px}
.node.d1{border:0; border-radius:20px}
.node.d1 > .node-hd .node-h{border-radius:20px}
.node.d1.is-open > .node-hd .node-h{border-end-start-radius:0; border-end-end-radius:0}
.node-lbl{color:var(--accent-text)}
.chev{color:var(--accent)}
#out > .eps{border:0; border-radius:20px}
.play{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.play:hover{background:var(--accent); color:var(--accent-ink); filter:brightness(.92)}
.ep.is-playing{border-radius:14px}
.ep-num{border-radius:999px; border:0}
.player{border-top:0; border-radius:20px 20px 0 0}
/* עמוד אוסף */
#works{padding-top:var(--s6); padding-bottom:var(--s7)}
.work{border:0; border-radius:20px}
.work-h{border-radius:20px}
.work-h .cover{border:0; border-radius:14px}

/* ---------- עמוד «סדרות השיעורים» ---------- */
.lib-page-head{padding-block:var(--s6) var(--s5)}
.lib-page-head h1{margin:0 0 var(--s2); font-size:clamp(2rem,5vw,3rem); line-height:1.1}
.lib-page-head .sec-sub{margin:0 0 var(--s5)}
.lib-page-head .search{max-width:620px}
.lib-page .band{padding-block:var(--s6)}
.lib-page #results{padding-block:0 var(--s6); margin:0}
.lib-page .cont.band{padding-top:0}
.lib-page .lists.band{padding-top:0}
.lib-page .lib-all{background:var(--surface-2); padding-block:var(--s6) var(--band-y)}
.lists .pl{border:0; border-radius:20px}
.lists-more{margin:var(--s2) 0 0; font-size:.9rem; color:var(--ink-3)}

/* ---------- עמוד החשבון ---------- */
.page-me .me-head{padding-block:var(--s5) var(--s4)}
.page-me .me{padding-bottom:var(--s7)}
.me-card, .pl, .prog-link{border:0; border-radius:20px}

/* ---------- מצב כהה: מה שלא נגזר מהמשתנים ---------- */
@media (prefers-color-scheme:dark){
  .give-in{background:#123F3D}
}

@media print{ .site-head{position:static} .nav-btn{display:none!important} }

/* ---------- עמוד אוסף: חומרי עזר לספר כולו (תרשימי הכוזרי) ---------- */
.docs-sec{margin-bottom:var(--s6)}
.col-docs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3)}
.doc{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s4); background:var(--surface);
  border-radius:20px; box-shadow:var(--shadow)}
.doc-thumb{flex:none; display:block; border-radius:8px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px var(--line), 0 10px 22px -14px rgba(0,0,0,.45)}
.doc-thumb img{display:block; width:120px; height:170px; object-fit:cover; object-position:top}
.doc-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--s1)}
.doc-t{margin:0; font-size:1.12rem; font-weight:700; line-height:1.35; text-wrap:balance}
.doc-sub{margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.55; max-width:62ch}
.doc-acts{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2)}
.doc-acts .btn{border-radius:999px}
@media (max-width:520px){
  .doc{gap:var(--s3); padding:var(--s3)}
  .doc-thumb img{width:84px; height:119px}
}

/* ---------- האתר כאפליקציה (PWA, 16/10/2026) — pwa.js ----------
   «התקנת האפליקציה»: שורה בתפריט (טלפון בלבד) ושורה בתחתית — תמיד, וכרטיס פעם אחת
   ב«ממשיכים ללמוד». באייפון — חלון עם שלושת הצעדים. */
.nav-app-b{display:flex; align-items:center; width:100%; min-height:52px; padding:0 var(--s3);
  border:0; border-top:1px solid var(--line); background:none; color:var(--ink-2); font:inherit; font-weight:700;
  font-size:1.06rem; text-align:start; cursor:pointer}
.nav-app-b:hover{color:var(--accent-text); background:var(--accent-soft); border-radius:var(--r)}
@media (min-width:900px){ .nav-app{display:none!important} }
.foot-app-b{display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none;
  color:var(--ink-2); font:inherit; cursor:pointer}
.foot-app-b:hover{color:var(--accent-text); text-decoration:underline}

/* ---------- הרשמה לערוץ היוטיוב של הרב (19/10/2026) — site.js ----------
   כפתור ב«על הרב» ובתחתית של כל עמוד; בטלפון גם שורה בתפריט. */
.about-links{display:flex; flex-wrap:wrap; gap:var(--s2)}
.yt-sub .yt-ic, .nav-yt-a .yt-ic{width:22px; height:22px}
.foot-yt{margin:var(--s3) 0 0}
.nav-yt-a{gap:var(--s2)}
@media (min-width:900px){ .nav-yt{display:none!important} }

.app-card{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--s3) var(--s4);
  margin-top:var(--s5); padding:var(--s4) var(--s5); background:var(--surface); border-radius:20px; box-shadow:var(--shadow)}
.app-card-ic{display:block; width:48px; height:48px; border-radius:12px; object-fit:cover}
.app-card-h{margin:0; font-size:1.06rem; font-weight:700; line-height:1.35}
.app-card-p{margin:2px 0 0; color:var(--ink-2); font-size:.94rem; line-height:1.55; max-width:56ch}
.app-card-acts{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4)}
.app-card-acts .btn{border-radius:999px; min-width:112px; justify-content:center}
.app-card-x{min-height:44px; padding:0 var(--s2); color:var(--ink-2)}
@media (min-width:720px){
  .app-card{grid-template-columns:auto minmax(0,1fr) auto}
  .app-card-acts{grid-column:auto}
}
@media (max-width:520px){ .app-card{padding:var(--s4)} }

.app-steps{list-style:none; margin:var(--s1) 0 0; padding:0; display:grid; gap:var(--s4)}
.app-steps li{display:flex; align-items:flex-start; gap:var(--s3)}
.app-st-ic{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-text)}
.app-st-ic svg{width:24px; height:24px}
.app-st-logo{background:var(--surface-2)}
.app-st-logo img{display:block; width:30px; height:30px; border-radius:8px; object-fit:cover}
.app-st-t{display:flex; flex-direction:column; gap:2px; padding-top:2px; line-height:1.45}
.app-st-t b{color:var(--ink); font-weight:700}
.app-st-t span{color:var(--ink-2); font-size:.92rem}
.app-note{margin:0; padding:var(--s2) var(--s3); border-radius:var(--r); background:var(--surface-2);
  color:var(--ink-2); font-size:.9rem; line-height:1.55}

/* כאפליקציה באייפון: «חזרה» לפני שרשרת המקום (באנדרואיד יש כפתור של המערכת) */
.crumbs.has-back{display:flex; align-items:flex-start; gap:var(--s2)}
.crumbs.has-back .trail{flex:1 1 auto; min-width:0}
.app-back{display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 var(--s2) 0 var(--s3);
  margin-inline-start:calc(-1 * var(--s2)); border:0; border-radius:999px; background:none; color:var(--accent-text);
  font:inherit; font-weight:700; cursor:pointer}
.app-back svg{width:20px; height:20px}
.app-back:hover{background:var(--accent-soft)}
.app-back::after{content:""; width:1px; height:20px; margin-inline-start:var(--s3); background:var(--line-2)}

/* מסכים עם חריץ ופס תחתון (viewport-fit=cover): התוכן לא נכנס מתחת לחריץ
   כשהטלפון שוכב, והנגן לא מתחת לפס הבית. במחשב כל הערכים האלה הם 0.
   🚨 בלי ריפוד עליון לראש העמוד: ui.js מודד את גובהו לתוך --head-h, שהוא גם
   הגובה של .site-bar — ריפוד שם היה מגדיל את הראש בכל מדידה. שורת המצב לא
   מכסה את העמוד (apple-mobile-web-app-status-bar-style=default). */
body{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
.player{padding-left:max(var(--s4), env(safe-area-inset-left)); padding-right:max(var(--s4), env(safe-area-inset-right))}

/* ---------- «מה חדש» (16/10/2026) — whatsnew.js ----------
   כמו שאר החלונות (.dlg): גיליון מלמטה בטלפון, חלון באמצע במחשב. הכותרת וכפתור
   «הבנתי» קבועים, והרשימה גוללת ביניהם. בלי תאריכים, בלי תגיות ובלי נקודות צבע. */
.wn-dlg{width:min(520px, calc(100% - 32px)); max-height:min(760px, calc(100dvh - 48px))}
.wn-dlg[open]{display:flex; flex-direction:column}
.wn-dlg .dlg-in{flex:1 1 auto; min-height:0; padding-bottom:0; gap:0}
.wn-dlg .dlg-head{padding-bottom:var(--s2)}
.wn-dlg .dlg-head h2:focus{outline:none}           /* הפוקוס נכנס לכותרת (לא לטבעת על ה-X) */
@media (max-width:520px){ .wn-dlg{width:100%; max-height:92dvh} }
/* הרשימה והתחתית ברוחב החלון כולו (הקווים שלהן מקצה לקצה); הקווים בין הפריטים — בתוך השוליים */
.wn-list, .wn-foot{margin-inline:calc(-1 * var(--s5)); padding-inline:var(--s5); border-top:1px solid var(--line)}
@media (max-width:520px){ .wn-list, .wn-foot{margin-inline:calc(-1 * var(--s4)); padding-inline:var(--s4)} }
.wn-list{list-style:none; margin-block:0; padding-block:0; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.wn-it{padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.wn-it:last-child{border-bottom:0}
.wn-t{margin:0; font-size:1.04rem; font-weight:700; line-height:1.4; color:var(--ink); text-wrap:balance}
.wn-p{margin:var(--s1) 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.6; max-width:60ch}
.wn-act{display:inline-flex; align-items:center; gap:2px; min-height:44px; margin:var(--s1) 0 calc(-1 * var(--s2));
  padding:0 var(--s2); margin-inline-start:calc(-1 * var(--s2)); border:0; border-radius:var(--r); background:none;
  color:var(--accent-text); font:inherit; font-size:.95rem; font-weight:700; text-decoration:none; cursor:pointer}
.wn-act svg{width:18px; height:18px; flex:none}
.wn-act:hover{background:var(--accent-soft)}
.wn-act:focus-visible{outline:3px solid var(--ring); outline-offset:1px}
/* בין החדשים לוותיקים — קו כפול-עובי, בלי מילים (החלון לא מדבר על זמנים) */
.wn-sep{height:0; margin:var(--s1) 0; border-top:3px double var(--line-2)}
.wn-it:has(+ .wn-sep){border-bottom:0}
.wn-empty{padding:var(--s5) 0; color:var(--ink-2); line-height:1.6}
.wn-foot{padding-top:var(--s3); padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
@media (min-width:900px){ .nav-wn{display:none!important} }
@media (prefers-reduced-motion:reduce){ .wn-dlg[open]{animation:none} }