/* ═══════════════════════════════════════════════════════════════════
   ימיש כדורי — מערכת העיצוב
   ═══════════════════════════════════════════════════════════════════

   **קובץ אחד, שבעה מסכים.** עד עכשיו כל מסך נשא עותק של ה-CSS שלו,
   ולכן "מערכת" הייתה שם לשבע גרסאות שנפרדו זו מזו בשקט. הקובץ הזה
   מוגש מ-`/brand.css` — נתיב פתוח כמו `/fonts`, כי דף הנחיתה, הכניסה
   וההרשמה נטענים **לפני שיש זהות** ו-`/static` יושב מאחורי השער.

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

/* ---- הגופן. מתארח אצלנו ולא נטען מגוגל: בקשה חיצונית מכל דף היא
        גם השהיה וגם דליפה, ומי שפותח מסך שמציג מחירים לא צריך
        שגוגל תדע על כך. ---- */
@font-face{
  font-family:'Assistant'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Assistant'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/assistant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---- ניטרלים: סולם פלדה, לא אפור מת ----
     גוון קר קל (כחלחל) בכל השלבים. אפור נייטרלי לגמרי נראה זול על
     מסך, וגוון עקבי הוא מה שגורם לממשק להיראות מתוכנן. */
  --ink-900:#0a0e13; --ink-800:#141a22; --ink-700:#212a35;
  --ink-600:#374252; --ink-500:#566373; --ink-400:#7d8b9c;
  --ink-300:#aab6c3; --ink-200:#cfd8e1; --ink-150:#e2e9ef;
  --ink-100:#eef3f7; --ink-50:#f7fafc;  --paper:#ffffff;

  /* ---- הלהבה: צבע הלייזר. פעולה ראשית אחת למסך. ---- */
  --flame-700:#8f2f0a; --flame-600:#c2410c; --flame-500:#e2570f;
  --flame-100:#ffe9db; --flame-50:#fff6f0;

  /* ---- סמנטיים. מושתקים בכוונה — ממשק תעשייתי, לא ממשק ילדים. ---- */
  --ok-700:#14532d;   --ok-600:#15803d; --ok-200:#b8e6c8; --ok-50:#f2fbf5;
  --warn-700:#7c4a03; --warn-600:#a16207; --warn-200:#f3dda1; --warn-50:#fdfaef;
  --bad-700:#8f1d1d;  --bad-600:#b91c1c; --bad-200:#f3c9c9; --bad-50:#fdf4f4;

  /* ---- מרחב: סולם של 4. כל padding ו-gap במערכת יוצא מכאן. ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* ---- טיפוגרפיה. clamp כדי שהכותרת תנשום בטלפון ובמסך רחב. ---- */
  --fs-display:clamp(32px,6.2vw,54px);
  --fs-h1:clamp(26px,4vw,36px);
  --fs-h2:clamp(20px,2.5vw,25px);
  --fs-h3:18px; --fs-body:16.5px; --fs-sm:14.5px; --fs-xs:13px;

  --lh-tight:1.18; --lh-snug:1.35; --lh-body:1.65;

  /* ---- צורה. 10 לכרטיס, 8 לפקד, עיגול מלא לתגית. ---- */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* ---- עומק. קו שיער + צל רך מאוד. צל כבד נראה כמו תבנית. ---- */
  --shadow-1:0 1px 2px rgba(10,14,19,.05);
  --shadow-2:0 1px 2px rgba(10,14,19,.05), 0 6px 16px -6px rgba(10,14,19,.10);
  --shadow-3:0 2px 4px rgba(10,14,19,.05), 0 14px 34px -12px rgba(10,14,19,.16);

  --dur:.16s; --ease:cubic-bezier(.2,.6,.3,1);

  --page:900px;    /* מידת קריאה למסכי תוכן */
  --page-wide:1120px;
}

/* ═══ בסיס ═══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-50); color:var(--ink-800);
  font-family:'Assistant',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; color:var(--ink-900); line-height:var(--lh-tight); text-wrap:balance}
h1{font-size:var(--fs-h1); letter-spacing:-.022em; font-weight:700}
h2{font-size:var(--fs-h2); letter-spacing:-.016em; font-weight:700}
h3{font-size:var(--fs-h3); letter-spacing:-.01em; font-weight:650}
p{margin:0; text-wrap:pretty}
a{color:var(--flame-600); text-underline-offset:3px}
a:hover{color:var(--flame-700)}
small{font-size:var(--fs-sm)}
.muted{color:var(--ink-500)}
.tiny{font-size:var(--fs-xs); color:var(--ink-500); line-height:1.6}

/* **כל מספר כספי.** ספרות טבלאיות כדי שעמודה תתיישר, ו-`isolate` כי
   מחרוזת שמערבבת עברית, ספרה וסימן מתהפכת בדפדפן — נתפס שלוש פעמים
   ביום אחד. */
.num,td.num,th.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; text-align:left}
.money{font-variant-numeric:tabular-nums; font-weight:650; letter-spacing:-.01em}

/* ═══ פריסה ═══ */
.wrap{max-width:var(--page); margin-inline:auto; padding-inline:var(--s5)}
.wrap-wide{max-width:var(--page-wide); margin-inline:auto; padding-inline:var(--s5)}
@media (min-width:760px){ .wrap,.wrap-wide{padding-inline:var(--s6)} }
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.row{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.spacer{flex:1}

/* ═══ כותרת עליונה ═══ */
.topbar{background:var(--paper); border-bottom:1px solid var(--ink-150)}
.topbar .wrap,.topbar .wrap-wide{
  display:flex; align-items:center; gap:var(--s4);
  min-height:62px; padding-block:var(--s2);
}
.brand{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; color:inherit}
.brand svg{flex:none; width:30px; height:30px; color:var(--flame-600)}
.brand .name{display:flex; flex-direction:column; line-height:1.12}
.brand .name b{font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink-900)}
.brand .name span{font-size:11.5px; color:var(--ink-400); letter-spacing:.06em; font-weight:600}

/* 44 פיקסלים הוא יעד המגע המינימלי. קישור טקסט היה 20 — מספיק
   לעכבר, לא לאגודל. */
.navlink{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--s3);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  color:var(--ink-600); border-radius:var(--r-sm);
}
.navlink:hover{color:var(--ink-900); background:var(--ink-100)}

/* **הסרגל העליון בטלפון.** נוסף 27.8.2026 אחרי בדיקת עין ב-390:
   מרגע שהתווסף קישור שלישי (חשבון · הצעות · קטלוג · תמחור) הסרגל
   נשבר לשתי שורות, ושם המותג עצמו נשבר לשלוש. שני שינויים ולא
   הסתרה: תת-הכותרת של המותג יורדת, והקישורים מתקרבים. **אף קישור
   אינו נעלם** — ניווט שנעלם בטלפון הוא ניווט שאין. */
@media (max-width:620px){
  .topbar .wrap,.topbar .wrap-wide{gap:var(--s2); min-height:56px}
  .brand .name span{display:none}
  .brand svg{width:26px; height:26px}
  .brand .name b{font-size:15px}
  .navlink{padding-inline:7px; font-size:13.5px; min-height:40px; white-space:nowrap}
  /* **גלילה ולא גלישה.** `.row` עוטף בברירת מחדל, וארבעה קישורים
     על 390 פיקסלים דחפו את הסרגל לשתי שורות (נמדד: 116 פיקסלים
     במקום 56). גלילה אופקית שומרת שורה אחת ואינה מסתירה דבר. */
  .topbar nav.row{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; min-width:0;
  }
  .topbar nav.row::-webkit-scrollbar{display:none}
}

/* ═══ כפתורים ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; padding:0 var(--s6); border-radius:var(--r-sm);
  font:inherit; font-size:16px; font-weight:650; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform .1s var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary{background:var(--flame-600); color:#fff; box-shadow:var(--shadow-1)}
.btn-primary:hover:not(:disabled){background:var(--flame-700); color:#fff}
.btn-secondary{background:var(--paper); color:var(--ink-800); border-color:var(--ink-200); box-shadow:var(--shadow-1)}
.btn-secondary:hover:not(:disabled){border-color:var(--ink-300); background:var(--ink-50)}
.btn-quiet{background:transparent; color:var(--ink-600)}
.btn-quiet:hover:not(:disabled){background:var(--ink-100); color:var(--ink-900)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-sm{min-height:38px; padding-inline:var(--s4); font-size:var(--fs-sm)}
.btn-block{width:100%}

/* ═══ שדות ═══ */
.field{display:block}
.field>label,label.lbl{
  display:block; font-size:var(--fs-xs); font-weight:600; color:var(--ink-600);
  margin-bottom:6px; letter-spacing:.01em;
}
input[type=text],input[type=password],input[type=number],input:not([type]),select,textarea{
  width:100%; min-height:46px; padding:0 var(--s3);
  font:inherit; font-size:16px; color:var(--ink-900);
  background:var(--paper); border:1px solid var(--ink-200); border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea{padding:var(--s3); min-height:120px; line-height:1.55; resize:vertical}
select{appearance:none; padding-inline-end:var(--s8);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-400) 50%),linear-gradient(135deg,var(--ink-400) 50%,transparent 50%);
  background-position:calc(var(--s4) - 3px) center, calc(var(--s4) + 2px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
input:hover,select:hover{border-color:var(--ink-300)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--flame-500);
  box-shadow:0 0 0 3px var(--flame-100);
}
.hint{font-size:var(--fs-xs); color:var(--ink-500); margin-top:5px; min-height:16px}
.hint.bad{color:var(--bad-600)}

/* ═══ כרטיס ═══ */
.card{
  background:var(--paper); border:1px solid var(--ink-150);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--shadow-1);
}
.card-lg{padding:var(--s8)}
.card>h2,.card>h3{margin-bottom:var(--s2)}
.card-title{
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-400);
  letter-spacing:.09em; margin-bottom:var(--s4);
}

/* ═══ הודעות ═══ */
.note{border-radius:var(--r-md); padding:var(--s4) var(--s5); font-size:var(--fs-sm); line-height:1.6; border:1px solid}
.note+.note{margin-top:var(--s3)}
.note-ok{background:var(--ok-50); border-color:var(--ok-200); color:var(--ok-700)}
.note-warn{background:var(--warn-50); border-color:var(--warn-200); color:var(--warn-700)}
.note-bad{background:var(--bad-50); border-color:var(--bad-200); color:var(--bad-700)}
.note-info{background:var(--ink-100); border-color:var(--ink-200); color:var(--ink-700)}

/* ═══ תגיות ═══ */
.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:650;
  padding:3px 9px; border-radius:var(--r-full); background:var(--ink-100); color:var(--ink-600);
  border:1px solid var(--ink-150); white-space:nowrap;
}
.tag-ok{background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200)}
.tag-warn{background:var(--warn-50); color:var(--warn-700); border-color:var(--warn-200)}
.tag-bad{background:var(--bad-50); color:var(--bad-700); border-color:var(--bad-200)}
.tag-flame{background:var(--flame-50); color:var(--flame-700); border-color:var(--flame-100)}

/* ═══ טבלאות ═══ */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--s2) * -1); padding-inline:var(--s2)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
thead th{
  font-size:var(--fs-xs); font-weight:650; color:var(--ink-400); text-align:right;
  padding:0 var(--s2) var(--s2); border-bottom:1px solid var(--ink-200); white-space:nowrap;
  letter-spacing:.03em;
}
tbody td{padding:var(--s3) var(--s2); border-bottom:1px solid var(--ink-100); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background-color var(--dur) var(--ease)}
tbody tr:hover{background:var(--ink-50)}

/* ═══ נתון בודד ═══ */
.stats{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media (min-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .stats-3{grid-template-columns:repeat(3,1fr)} }
.stat{background:var(--paper); border:1px solid var(--ink-150); border-radius:var(--r-md); padding:var(--s4) var(--s5)}
.stat .k{font-size:var(--fs-xs); color:var(--ink-500); font-weight:600}
.stat .v{font-size:23px; font-weight:700; color:var(--ink-900); letter-spacing:-.02em; margin-top:3px; line-height:1.2}
.stat .v.sm{font-size:16.5px; font-weight:650}
.stat-ok{background:var(--ok-50); border-color:var(--ok-200)} .stat-ok .v{color:var(--ok-700)}
.stat-warn{background:var(--warn-50); border-color:var(--warn-200)} .stat-warn .v{color:var(--warn-700)}
.stat-bad{background:var(--bad-50); border-color:var(--bad-200)} .stat-bad .v{color:var(--bad-700)}

/* ═══ מצב ריק ═══ */
.empty{
  border:1px dashed var(--ink-200); border-radius:var(--r-md); background:var(--ink-50);
  padding:var(--s5); color:var(--ink-500); font-size:var(--fs-sm); line-height:1.65;
}
.empty b{color:var(--ink-800)}

/* ═══ נגישות ותנועה ═══
   טבעת מיקוד אחת לכל מה שאפשר להגיע אליו במקלדת. `:focus-visible`
   ולא `:focus` — עכבר לא אמור לצייר טבעת. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--flame-500); outline-offset:2px; border-radius:var(--r-sm);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
.hidden{display:none !important}
.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}

/* ═══════════════════════════════════════════════════════════════════
   גשר אל אוצר המילים הקודם
   ═══════════════════════════════════════════════════════════════════
   ששת המסכים שקדמו למערכת כתבו `.note.bad` ולא `.note-bad`,
   `button.ghost` ולא `.btn-secondary`, `.none` ולא `.empty`. הכינויים
   כאן מאפשרים להעביר אותם בהחלפת גיליון אחת **בלי לגעת ב-JavaScript
   שמייצר את הסימון** — וזה מה שהופך את המעבר לבטוח: אין רגע שבו
   מסך עובד חצי.

   **זה גשר ולא ברירת מחדל.** סימון חדש נכתב בצורה הראשית
   (`.note-warn`, `.btn-secondary`, `.empty`), והחלק הזה נועד להצטמצם.
   ═══════════════════════════════════════════════════════════════════ */
.note.ok{background:var(--ok-50); border-color:var(--ok-200); color:var(--ok-700)}
.note.warn{background:var(--warn-50); border-color:var(--warn-200); color:var(--warn-700)}
.note.bad{background:var(--bad-50); border-color:var(--bad-200); color:var(--bad-700)}
.note{border:1px solid var(--ink-200)}

.tag.ok{background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200)}
.tag.warn{background:var(--warn-50); color:var(--warn-700); border-color:var(--warn-200)}
.tag.bad{background:var(--bad-50); color:var(--bad-700); border-color:var(--bad-200)}

.stat.ok{background:var(--ok-50); border-color:var(--ok-200)} .stat.ok .v{color:var(--ok-700)}
.stat.warn{background:var(--warn-50); border-color:var(--warn-200)} .stat.warn .v{color:var(--warn-700)}
.stat.bad{background:var(--bad-50); border-color:var(--bad-200)} .stat.bad .v{color:var(--bad-700)}
.stat.total{background:var(--flame-50); border-color:var(--flame-100)} .stat.total .v{color:var(--flame-700)}
.stat .v.small,.stat .v.sm{font-size:16.5px; font-weight:650}

/* כפתור עירום הוא הפעולה הראשית; `.ghost` הוא המשני. */
button:not(.btn):not(.ghost),.btn.primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; padding:0 var(--s6); border-radius:var(--r-sm);
  font:inherit; font-size:16px; font-weight:650; letter-spacing:-.01em;
  border:1px solid var(--flame-600); background:var(--flame-600); color:#fff;
  cursor:pointer; text-decoration:none; box-shadow:var(--shadow-1);
  transition:background-color var(--dur) var(--ease), transform .1s var(--ease);
}
button:not(.btn):not(.ghost):hover:not(:disabled),.btn.primary:hover{background:var(--flame-700)}
button.ghost,.btn.ghost,a.ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; padding:0 var(--s6); border-radius:var(--r-sm);
  font:inherit; font-size:16px; font-weight:600;
  background:var(--paper); color:var(--ink-800); border:1px solid var(--ink-200);
  cursor:pointer; text-decoration:none; box-shadow:var(--shadow-1);
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
button.ghost:hover:not(:disabled),.btn.ghost:hover,a.ghost:hover{
  border-color:var(--ink-300); background:var(--ink-50); color:var(--ink-900);
}
button:active:not(:disabled),.btn:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed}

.none{
  border:1px dashed var(--ink-200); border-radius:var(--r-md); background:var(--ink-50);
  padding:var(--s5); color:var(--ink-500); font-size:var(--fs-sm); line-height:1.65;
}
.none b{color:var(--ink-800)}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.quiet{color:var(--ink-500); font-size:var(--fs-xs); margin:var(--s2) 0 0; line-height:1.6}
.hint,.sub{color:var(--ink-500)}
.err{background:var(--bad-50); border:1px solid var(--bad-200); color:var(--bad-700);
     border-radius:var(--r-md); padding:var(--s4) var(--s5); font-size:var(--fs-sm)}
.headline{font-size:23px; font-weight:700; line-height:1.3; margin:0 0 var(--s2); color:var(--ink-900); letter-spacing:-.02em}
@media (min-width:760px){ .headline{font-size:26px} }
.pill{
  display:inline-flex; align-items:center; font-size:12px; font-weight:650;
  padding:3px 9px; border-radius:var(--r-full); background:var(--ink-100);
  color:var(--ink-600); border:1px solid var(--ink-150); margin-inline-start:var(--s2);
}
.pill.ok{background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200)}
.pill.warn{background:var(--warn-50); color:var(--warn-700); border-color:var(--warn-200)}

/* ---- סרגל צד ----
   מוזרק על ידי `shell.js`. הרוחב חי כמשתנה כדי שהתוכן יזוז איתו
   ולא ירדוף אחריו: `body` מקבל ריפוד התחלה בדיוק בגודלו. */
:root{ --sb-w:238px }

.sidebar{
  position:fixed; inset-block:0; inset-inline-start:0; width:var(--sb-w); z-index:40;
  background:var(--paper); border-inline-end:1px solid var(--ink-150);
  display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s3);
}
body:has(.sidebar){ padding-inline-start:var(--sb-w) }
/* מסך שכבר נושא topbar לא צריך גם אותו וגם סרגל — הסרגל מנצח. */
body:has(.sidebar) .topbar{ display:none }
/* **והסרגל חייב להחזיר את מה שהסתיר.** ה-topbar לא היה רק ניווט:
   הוא היה גם המרווח העליון של הדף. ברגע שהוא הוסתר, כל מסך שהסתמך
   עליו התחיל **בפיקסל אפס** — הכרטיס הראשון נגזר בשפת החלון.
   נמדד 28.8.2026 ב-`/`, `/catalog` ו-`/dashboard`: `top: 0` בכולם,
   וזה מה שגרם למסכים להיראות לא-מעוצבים יותר מכל דבר אחר.
   בטלפון הריפוד כבר קיים (56px מתחת לכפתור התפריט) ולכן הכלל הזה
   שייך למסך הרחב בלבד. */
@media (min-width:901px){
  body:has(.sidebar){ padding-block-start:var(--s5) }
}

.sb-brand{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s2);
  text-decoration:none; color:var(--ink-900); margin-bottom:var(--s3);
}
.sb-brand svg{ width:30px; height:30px; color:var(--flame-600); flex:none }
.sb-brand b{ display:block; font-size:var(--fs-sm); letter-spacing:-.01em }
.sb-brand small{ display:block; font-size:var(--fs-xs); color:var(--ink-500) }

.sb-links{ display:flex; flex-direction:column; gap:2px }
.sb-link{
  display:flex; align-items:center; gap:var(--s3);
  padding:9px var(--s3); border-radius:var(--r-md);
  color:var(--ink-600); text-decoration:none; font-size:var(--fs-sm); font-weight:500;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sb-link svg{ width:19px; height:19px; flex:none; color:var(--ink-400) }
.sb-link:hover{ background:var(--ink-50); color:var(--ink-900) }
.sb-link.on{ background:var(--flame-50); color:var(--flame-700); font-weight:650 }
.sb-link.on svg{ color:var(--flame-600) }
.sb-link em{
  margin-inline-start:auto; font-style:normal; font-size:11px; font-weight:700;
  background:var(--flame-600); color:#fff; padding:1px 6px; border-radius:var(--r-full);
}

.sb-foot{ margin-top:auto; border-top:1px solid var(--ink-150); padding-top:var(--s3) }
.sb-legal{
  display:flex; flex-wrap:wrap; gap:2px 10px;
  padding:var(--s2) var(--s3) 0; font-size:11px; line-height:1.9;
}
.sb-legal a{ color:var(--ink-400); text-decoration:none }
.sb-legal a:hover{ color:var(--flame-600); text-decoration:underline }
.sb-who{ padding:var(--s2) var(--s3); font-size:var(--fs-xs); line-height:1.5 }
.sb-who b{ display:block; color:var(--ink-900); font-size:var(--fs-sm) }
.sb-who span{
  color:var(--ink-500);
  /* שתי שורות ולא יותר: היכולות הן שני משפטים מלאים, והשלישית
     הייתה דוחפת את התקנון והנגישות מתחת לקצה הסרגל. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* **`button` בסלקטור, ו-`.ghost` על האלמנט — שניהם חובה.**
   שורת הגשר `button:not(.btn):not(.ghost)` הופכת כל כפתור חשוף
   לכפתור ראשי כתום, וסגוליותה (0,2,1) גוברת על `.sb-toggle` לבדו.
   `.ghost` מוציא אותו מהגשר; `button.sb-toggle` (0,1,1) גובר על
   `button.ghost` מפני שהוא מאוחר יותר בקובץ. */
button.sb-toggle{
  display:none; position:fixed; inset-block-start:10px; inset-inline-start:10px; z-index:50;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--ink-200); border-radius:var(--r-md);
  box-shadow:var(--shadow-1); color:var(--ink-700); padding:0; min-height:0;
}
button.sb-toggle svg{ width:20px; height:20px }

@media (max-width:900px){
  /* **הסרגל נסגר, הקישורים לא נעלמים.** ניווט שנעלם בטלפון הוא
     ניווט שאין — אותו לקח בדיוק כמו ה-topbar שהוגלל ולא הוסתר. */
  body:has(.sidebar){ padding-inline-start:0; padding-block-start:56px }
  button.sb-toggle{ display:flex }
  .sidebar{
    transform:translateX(100%); transition:transform var(--dur) var(--ease);
    box-shadow:var(--shadow-3);
  }
  body.sb-open .sidebar{ transform:none }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .sidebar{ transition:none }
}