/* ============================================================
   LangFlame · המעטפת המשותפת — כותר עליון ופוטר לכל עמוד באתר
   ------------------------------------------------------------
   הכללים כאן עומדים בפני עצמם ולא נשענים על הפלטה של העמוד
   המארח. זו לא הידור אלא הכרח: 228 העמודים נושאים 228 פלטות,
   חלקן ב־<style> פנימי, וכל מה שיילקח מהן ייראה אחרת בכל עמוד —
   כלומר בדיוק ההפך ממעטפת אחידה.

   מאותה סיבה כל בורר כתוב עם שני מחלקות לפחות (0,2,x). ה־<style>
   הפנימי של העמוד מופיע *אחרי* הקישור הזה ב־<head>, אז בשוויון
   סגוליות הוא היה מנצח: `nav.main a` הוא (0,1,1) בדיוק כמו
   `.lf-chrome a`. `.lf-chrome .lf-nav a` כבר לא.

   מצב כהה מופיע פעמיים — פעם עם [data-theme="dark"] ופעם בתוך
   שאילתת המדיה מצומצמת ל־:not([data-theme="light"]) — כמו בכל
   שאר גיליונות האתר. בלוק שמותנה רק בשאילתה משאיר את המעטפת
   בהירה כשלוחצים על המתג במכונה כהה.
   ============================================================ */

.lf-chrome{
  --lfc-bg1:#245ba8; --lfc-bg2:#183f74; --lfc-ink:#ffffff;
  --lfc-dim:rgba(255,255,255,.72); --lfc-soft:rgba(255,255,255,.14);
  --lfc-hover:rgba(255,255,255,.22); --lfc-on:rgba(255,255,255,.28);
  --lfc-edge:rgba(255,255,255,.28);
  --lfc-menu:#ffffff; --lfc-menu-ink:#182338; --lfc-menu-line:#e7e2d6;
  --lfc-menu-hover:#eaf1fb;
  font-family:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.5;
  /* צבע רקע מפורש מתחת למעבר: מי שקורא רקע כדי לחשב ניגודיות —
     tools/verify/theme.mjs בכלל זה — מקבל מ־background-image ערך
     שקוף, ומטפס משם ל־body, שהוא בהיר. הלבן על הכחול היה נמדד
     כלבן על נייר. */
  background-color:var(--lfc-bg1);
  background-image:linear-gradient(135deg,var(--lfc-bg1),var(--lfc-bg2));
  color:var(--lfc-ink);
  position:relative; z-index:40;
}
.lf-chrome *{box-sizing:border-box}

:root[data-theme="dark"] .lf-chrome{
  --lfc-bg1:#1b3358; --lfc-bg2:#101f36; --lfc-ink:#eceae2;
  --lfc-dim:rgba(236,234,226,.66); --lfc-soft:rgba(255,255,255,.10);
  /* המסומן מודגש בהכהיה ולא בהבהרה: על רקע כהה, ריבוע לבן־שקוף
     מרים את הרקע לכיוון הכתב ומוריד את הניגודיות של הפריט
     שאמור לבלוט ביותר — theme.mjs מדד אותו כנקודה הגרועה בעמוד. */
  --lfc-hover:rgba(255,255,255,.14); --lfc-on:rgba(0,0,0,.34);
  --lfc-edge:rgba(236,234,226,.26);
  --lfc-menu:#222220; --lfc-menu-ink:#eceae2; --lfc-menu-line:#333330;
  --lfc-menu-hover:#12233a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lf-chrome{
    --lfc-bg1:#1b3358; --lfc-bg2:#101f36; --lfc-ink:#eceae2;
    --lfc-dim:rgba(236,234,226,.66); --lfc-soft:rgba(255,255,255,.10);
    --lfc-hover:rgba(255,255,255,.14); --lfc-on:rgba(0,0,0,.34);
    --lfc-edge:rgba(236,234,226,.26);
    --lfc-menu:#222220; --lfc-menu-ink:#eceae2; --lfc-menu-line:#333330;
    --lfc-menu-hover:#12233a;
  }
}

/* ---------- שורת הכותר ---------- */

/* שורת הכותר משתרעת על כל הרוחב ולא נעצרת ב־1180 כמו גוף העמוד:
   רוחב הוא בדיוק המשאב שחסר לה, ו־1180 היה מכריח את רשימת המשאבים
   לגלול גם על מסך רחב. */
.lf-chrome .lf-bar{
  padding:8px 16px; display:flex; align-items:center; gap:5px;
}
/* גלילה אופקית ולא גלישה לשורה שנייה — שורה שנייה דוחפת את תוכן
   העמוד למטה בכל 222 העמודים. אבל *רק רשימת המשאבים* גוללת: כשכל
   השורה גללה, "החשבון שלי" ומתג הערכה יצאו מהמסך בצד השני ברוחב
   1280 רגיל, כלומר הפריטים שאמורים להיות בכל עמוד היו הראשונים
   להיעלם. הקצוות מקובעים, האמצע זז. */
.lf-chrome .lf-scroll{
  flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;
}
.lf-chrome .lf-scroll::-webkit-scrollbar{display:none}
.lf-chrome .lf-brand,
.lf-chrome .lf-pick,
.lf-chrome .lf-end,
.lf-chrome .lf-theme{flex:0 0 auto}

.lf-chrome .lf-brand{
  font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:900;
  font-size:1.12rem; color:var(--lfc-ink); text-decoration:none;
  display:inline-flex; flex-direction:column; align-items:flex-start;
  padding:4px 6px; border-radius:8px; flex:0 0 auto; white-space:nowrap;
}
.lf-chrome .lf-wordmark{display:inline-flex; align-items:center; gap:7px}
/* שורת המותג. --lfc-dim מוגדר בשתי הערכות ולכן אין כאן פלטה שנייה. */
.lf-chrome .lf-motto{
  font-family:'Assistant','PT Sans',system-ui,sans-serif;
  font-size:.55rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lfc-dim); line-height:1.25;
  margin-top:1px;
}
.lf-chrome .lf-brand:hover{background:var(--lfc-soft)}

.lf-chrome .lf-nav{display:flex; align-items:center; gap:2px}

.lf-chrome .lf-nav a,
.lf-chrome .lf-nav button{
  font:inherit; font-size:.84rem; font-weight:600;
  color:var(--lfc-ink); text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  padding:6px 10px; border-radius:18px; transition:background .15s;
}
.lf-chrome .lf-nav a.lf-star{font-size:1rem; padding:5px 9px}
.lf-chrome .lf-nav a:hover,
.lf-chrome .lf-nav button:hover{background:var(--lfc-hover)}
.lf-chrome .lf-nav a[aria-current="page"]{background:var(--lfc-on)}

/* מפריד בין קבוצת "המסלול" לקבוצת "החשבון" */
.lf-chrome .lf-sep{
  flex:0 0 auto; width:1px; align-self:stretch; margin:4px 6px;
  background:var(--lfc-edge);
}

/* כפתור בחירת המסלול — מקומן של ההגדרות. */
.lf-chrome .lf-pick{
  font:inherit; font-size:.86rem; font-weight:700;
  color:var(--lfc-ink); background:var(--lfc-soft);
  border:1px solid var(--lfc-edge); border-radius:18px;
  padding:5px 12px; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
}
.lf-chrome .lf-pick:hover{background:var(--lfc-hover)}
.lf-chrome .lf-pick .lf-caret{font-size:.7em; opacity:.8}

.lf-chrome .lf-acct{
  border:1px solid var(--lfc-edge); border-radius:18px; padding:5px 12px;
}
.lf-chrome .lf-acct:hover{background:var(--lfc-hover)}

/* ---------- בורר המסלול ---------- */

.lf-chrome .lf-menu{
  position:absolute; inset-inline-start:0; inset-inline-end:0; top:100%;
  background:var(--lfc-menu); color:var(--lfc-menu-ink);
  border-block-end:1px solid var(--lfc-menu-line);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:16px; z-index:41;
}
.lf-chrome .lf-menu[hidden]{display:none}
.lf-chrome .lf-menu-in{max-width:1180px; margin:0 auto}
.lf-chrome .lf-menu h3{
  font:inherit; font-size:.84rem; font-weight:700; text-transform:none;
  margin:0 0 7px; color:var(--lfc-menu-ink); opacity:.7;
}
.lf-chrome .lf-row{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px}
.lf-chrome .lf-row:last-child{margin-bottom:0}

.lf-chrome .lf-chip{
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  color:var(--lfc-menu-ink); background:transparent;
  border:1px solid var(--lfc-menu-line); border-radius:20px;
  padding:6px 13px; display:inline-flex; align-items:center; gap:6px;
}
.lf-chrome .lf-chip:hover{background:var(--lfc-menu-hover)}
.lf-chrome .lf-chip[aria-pressed="true"]{
  background:var(--lfc-bg1); border-color:var(--lfc-bg1); color:#fff;
}
:root[data-theme="dark"] .lf-chrome .lf-chip[aria-pressed="true"]{color:#eceae2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lf-chrome .lf-chip[aria-pressed="true"]{color:#eceae2}
}
.lf-chrome .lf-chip[disabled]{opacity:.4; cursor:default}

.lf-chrome .lf-hint{
  margin:0 0 12px; font-size:.88rem; color:var(--lfc-menu-ink); opacity:.75;
}

/* ---------- הפוטר ---------- */

.lf-foot{
  font-family:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6;
  background:#f0ede5; color:#3d4658;
  border-block-start:1px solid #e7e2d6;
  padding:22px 16px; margin:0;
}
:root[data-theme="dark"] .lf-foot{
  background:#141413; color:#c9c7bf; border-block-start-color:#333330;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lf-foot{
    background:#141413; color:#c9c7bf; border-block-start-color:#333330;
  }
}
.lf-foot .lf-foot-in{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px 18px;
}
.lf-foot .lf-foot-links{display:flex; flex-wrap:wrap; gap:4px 6px}
.lf-foot .lf-foot-links a{
  font:inherit; font-size:.9rem; font-weight:600;
  color:#245ba8; text-decoration:none; padding:3px 8px; border-radius:14px;
}
.lf-foot .lf-foot-links a:hover{background:#eaf1fb; text-decoration:underline}
:root[data-theme="dark"] .lf-foot .lf-foot-links a{color:#8ab6ee}
:root[data-theme="dark"] .lf-foot .lf-foot-links a:hover{background:#12233a}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lf-foot .lf-foot-links a{color:#8ab6ee}
  :root:not([data-theme="light"]) .lf-foot .lf-foot-links a:hover{background:#12233a}
}
.lf-foot .lf-copy{font-size:.86rem; opacity:.8; direction:ltr; unicode-bidi:isolate}

/* כותר או פוטר של עמוד שהמעטפת החליפה. הוא נשאר במסמך ולא
   נמחק ממנו, כדי שהחלפה שגויה תהיה הפיכה ושהבדיקה תוכל לספור
   כמה עמודים נגעה בהם. */
.lf-chrome-replaced{display:none !important}

/* מתחת ל-560 אין רוחב לשורה אחת: המותג, בורר המסלול, הכוכב, החשבון
   ומתג הערכה לבדם צריכים ~508 פיקסלים, ולכן ב-390 כל המסמך גלש הצידה
   וכל עמוד באתר נגרר ימינה. הקיבוע פתר את 1280 והעביר את הבעיה לטלפון.
   שם הסרגל נשבר לשתי שורות: הקצוות בשורה אחת, ורשימת המשאבים גוללת
   מתחתיהם — במקום שהמשאבים ייעלמו לגמרי, שזה מה שקרה. */
@media (max-width:560px){
  .lf-chrome .lf-bar{flex-wrap:wrap; row-gap:4px}
  .lf-chrome .lf-scroll{order:3; flex:1 0 100%; min-width:0}
  .lf-chrome .lf-sep{display:none}
  .lf-chrome .lf-end{margin-inline-start:auto}
}

@media (max-width:760px){
  .lf-chrome .lf-bar{padding:7px 10px; gap:4px}
  .lf-chrome .lf-brand{font-size:1rem}
  /* שורת המותג יורדת כאן. הפס sticky, ובטלפון הוא כבר 123px מתוך 844
     מפני שהוא נשבר לשלוש שורות — שורה רביעית היא מחיר שנגבה מכל מסך
     בכל אחד מ-230 העמודים, בשביל תגית שאין לה מה לעשות שם. */
  .lf-chrome .lf-motto{display:none}
  .lf-chrome .lf-nav a,
  .lf-chrome .lf-nav button{padding:5px 9px; font-size:.82rem}
  .lf-foot .lf-foot-in{justify-content:center; text-align:center}
}
