/* ============================================================
   ניוזלטר פלנטע — מערכת פנימית
   בהיר, נקי, על לבן. הפרדת אזורים בהבדלי אפור עדינים.
   ============================================================ */

:root {
  --bg:            #FAFAF9;   /* רקע האפליקציה */
  --surface:       #FFFFFF;   /* כרטיסים, סרגל, שדות */
  --sunken:        #F4F5F3;   /* אזור מוטבע — פריטי רשימה, גוף בלוק */
  --sunken-2:      #EEEFEC;

  --border:        #EDEDEA;
  --border-mid:    #E3E4E0;
  --border-strong: #D3D4CF;
  --focus-ring:    0 0 0 3px var(--accent-wash);

  --ink:           #1B1D1A;
  --ink-soft:      #565A53;
  /* היה #8B8F87 ונתן 3.29:1 על לבן ו-2.85:1 על רקע מוטבע - מתחת לסף
     WCAG AA (4.5:1) לטקסט קטן. הוא נושא מידע אמיתי: תאריכים, "מי עדכנה",
     תווית האישור ומספרי הבלוקים. הערך הזה הוא ההחשכה המינימלית שעוברת AA
     על כל הרקעים במוצר (4.55:1 במקרה הגרוע), ובאותה משפחת גוון. */
  --ink-faint:     #6A6D67;

  --accent:        #1F7A54;   /* ירוק פלנטע רגוע */
  --accent-hover:  #1A6A49;
  --accent-wash:   #EAF4EF;
  --accent-line:   #C4DED2;

  /* היה #A07C2C ונתן 3.44:1 מול הרקע הזהוב שלו - מתחת ל-AA. הזהב משמש
     גם כטקסט (תגית המשתמשת, סטטוס "אצל נטע") וגם כרקע (תווית "עורכת
     עכשיו"); ההחשכה משפרת את שניהם, כי על רקע כהה יותר הלבן בולט יותר. */
  --gold:          #836624;
  --gold-wash:     #F7F1E3;

  --danger:        #B23B2B;
  --ok:            #2F7D4E;
  --ok-wash:       #EAF5EE;

  /* גובה אחיד לכל פקד אינטראקטיבי בשורת פעולות (הדר העורך, סרגלים) */
  --control-h:     2.5rem;

  /* ---------- סקאלת טיפוגרפיה ----------
     שמונה מדרגות בפיקסלים שלמים, מעוגנות ב-15px של גוף העמוד. כל font-size
     בממשק הזה חייב לצאת מכאן - בלי ערכים חופשיים. לפני זה היו 26 ערכים שונים
     בקובץ (‎.82/.84/.85/.86 וכו'), כלומר הפרשים של חצי פיקסל שאף אחד לא רואה
     אבל שוברים את היכולת להגיד "זו מדרגה אחרת".
     המרווחים צפופים למטה (12→13→14→15) כי טקסט ממשק קטן צריך צעדים עדינים,
     ונפתחים למעלה (17→20→24→28) כי כותרות צריכות ניגוד אמיתי.
     שים לב: rem נמדד מול שורש המסמך (16px), לא מול גוף העמוד. --fs-base הוא
     בדיוק 15px, כלומר גודל הגוף שהיה כאן קודם. */
  --fs-micro:      .75rem;    /* 12 - תגיות, גלולות סטטוס, מספרי מיקום, כותרות-על */
  --fs-xs:         .8125rem;  /* 13 - תוויות שדה, טולטיפ, שורות מטא, פירור-לחם */
  --fs-sm:         .875rem;   /* 14 - שורות בתפריט/רשימה, פסקאות בכרטיס, טוסט */
  --fs-base:       .9375rem;  /* 15 - גוף העמוד, שדות טופס, כפתורים ראשיים, ניווט */
  --fs-lg:         1.0625rem; /* 17 - שם של כרטיס או פריט (בלוק, גיליון, שירות) */
  --fs-xl:         1.25rem;   /* 20 - כותרת סקציה, כותרת חלון */
  --fs-2xl:        1.5rem;    /* 24 - כותרת מסך משנה (שער כניסה, שם הגיליון) */
  --fs-3xl:        1.75rem;   /* 28 - כותרת עמוד ראשית */

  --radius:        14px;
  --radius-sm:     11px;
  --radius-lg:     20px;
  --radius-pill:   100px;

  --shadow-sm:     0 1px 2px rgba(20, 22, 20, .04), 0 1px 3px rgba(20, 22, 20, .06);
  --shadow-md:     0 4px 12px rgba(20, 22, 20, .08), 0 2px 4px rgba(20, 22, 20, .05);
  --shadow-lg:     0 12px 40px rgba(20, 22, 20, .16);

  --sans: 'Noto Sans Hebrew', 'Helvetica Neue', 'Arial Hebrew', sans-serif;
}

* { box-sizing: border-box; }

/* גלילה עדינה בכל האפליקציה - לא פס עבה עם מסילה שתמיד תפוס בעיניים.
   התפס בפועל בעורך: פס הגלילה העבה של רשימת הסקשנים ישב בדיוק על התפר
   של ידית הגרירה וגנב לה את מעברי העכבר - היא לא הייתה "נעלמת", העכבר
   פשוט לא היה מגיע אליה. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* פוקוס אחיד: טבעת רכה בצבע המותג על כל אלמנט אינטראקטיבי, לא רק שדות טופס */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius: var(--radius-sm); }
.who-btn:focus-visible, .picker-item:focus-visible { border-radius: var(--radius); }
.actor-chip:focus-visible, .status:focus-visible, .swatch:focus-visible,
.toggle:focus-visible, .approve-btn:focus-visible { border-radius: var(--radius-pill); }

.loading { padding: 5rem; text-align: center; color: var(--ink-faint); }
.hidden, [hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--sans); font-weight: 700; color: var(--ink); }

/* ---------- כפתורים ---------- */

.btn-primary {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: .7rem 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background .12s ease;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary[disabled] { opacity: .45; cursor: default; }
.btn-primary .ico { width: 17px; height: 17px; flex-shrink: 0; }

/* ירוק עמוק - זהה למותג פלנטע האמיתי (לוגו, פוטר), לפעולות ראשיות בולטות יותר */
.btn-deep { background: #17370C; border-color: #17370C; }
.btn-deep:hover { background: #0F260A; border-color: #0F260A; }

.btn-ghost {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: .6rem 1.15rem;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.btn-ghost:hover { border-color: var(--border-strong); background: var(--sunken); }
.btn-ghost.small { font-size: var(--fs-xs); padding: .38rem .85rem; }

.link-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  transition: color .12s ease;
}
.link-btn:hover { color: var(--ink); }
.link-btn.danger { color: var(--danger); }
.link-btn.tiny { font-size: var(--fs-xs); padding: 0 .3rem; }
.link-btn.tiny[disabled] { opacity: .3; cursor: default; }
/* כפתור אייקון בלבד (סידור פריטים ברשימה) - האייקון הוא ה-SVG, לא תו טקסט */
.link-btn.icon-only { display: inline-grid; place-items: center; padding: .15rem; }
.link-btn.icon-only .ico { width: 15px; height: 15px; }

.error { color: var(--danger); font-size: var(--fs-sm); margin: 0; min-height: 1.2em; }

/* ---------- שערי כניסה ---------- */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg);
}

.gate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 26rem;
  text-align: center;
}

/* הלוגו הוא סימן לבן על שקוף (וקטורי, בלי זהב ובלי ריבוע ירוק מוטבע) -
   בדיוק כמו המקור - ולכן צריך רקע ירוק כהה מאחוריו כדי שיהיה קריא,
   בדיוק כמו שהיה לפני שהתחלתי לגעת בזה. */
.mark {
  display: block;
  height: 3.6rem;
  width: 3.6rem;
  margin: 0 auto .85rem;
  padding: .7rem;
  background: #17370C;
  border-radius: var(--radius);
  object-fit: contain;
}
.mark-sm {
  display: block;
  height: 1.9rem;
  width: 1.9rem;
  flex-shrink: 0;
  padding: .35rem;
  background: #17370C;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.gate-title { font-size: var(--fs-2xl); margin: 0 0 .45rem; }
.gate-note { color: var(--ink-soft); font-size: var(--fs-base); margin: 0 0 1.75rem; }

.gate-form { display: grid; gap: 1rem; text-align: right; }

.field { display: grid; gap: .4rem; }
.field-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
}

.pw-wrap { position: relative; display: block; }
.field .pw-wrap input[type="password"],
.field .pw-wrap input[type="text"] { padding-inline-start: 2.9rem; }
.pw-toggle {
  position: absolute;
  inset-inline-start: .5rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.pw-toggle:hover { color: var(--ink); background: var(--sunken); }
.pw-toggle .eye-off { display: none; }
.pw-toggle.showing .eye-open { display: none; }
.pw-toggle.showing .eye-off { display: block; }

/* ---------- שדות טופס — שמנים ---------- */

input[type="password"],
input[type="text"],
input[type="email"],
input[type="date"],
input[type="url"],
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: .72rem .9rem;
  width: 100%;
  direction: rtl;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 5.5rem; resize: vertical; }

/* ---------- בחירת משתמשת ---------- */

.who-list { display: grid; gap: .55rem; }
.who-btn {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: .8rem 1.1rem;
  cursor: pointer;
  text-align: right;
  transition: border-color .12s ease, background .12s ease;
}
.who-btn:hover { border-color: var(--accent); background: var(--accent-wash); }

/* ============================================================
   מבנה: תפריט צד קבוע + תוכן
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 15.5rem) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .16s ease;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  gap: .25rem;
  /* בלי חיתוך, בשני המצבים. שני דברים יוצאים במכוון מגבול הסרגל: כפתור הכיווץ
     הצף (חצי ממנו יושב על הקו) והטולטיפים במצב מכווץ. כשהיה כאן
     overflow-x:hidden הכפתור נחתך בדיוק באמצע ונראה כמו חצי עיגול תקוע על
     הקו - זה מה שגיא צילם. התוויות מתכווצות בלי לברוח כי כל אחת חותכת את
     עצמה (overflow:hidden + max-width:0 על .nav-label/.brand-text). */
  overflow: visible;
  /* קובע הקשר ערימה (stacking context) משלו - בלעדיו ה-z-index של כפתור הכיווץ
     הצף מתחרה רק מול אחיו בתוך הסרגל, לא מול תוכן העמוד הראשי שמצויר אחריו ב-DOM */
  z-index: 10;
}
/* חלון נמוך במיוחד: אז - ורק אז - עדיף לגלול מאשר לחתוך תוכן.
   בגובה כזה ממילא אין מקום לטולטיפ, והכפתור הצף פחות קריטי מגישה לניווט. */
@media (max-height: 34rem) {
  .sidebar { overflow-y: auto; overflow-x: hidden; }
}
/* --sidebar-w נקרא על ידי .app (ההורה). משתנה שנקבע על .sidebar לא עולה כלפי מעלה,
   ולכן הכיווץ הסתיר תוויות אבל לא צימצם את הרוחב. נקבע על ההורה. */
.app:has(.sidebar.collapsed) { --sidebar-w: 4.3rem; }

.sidebar-top {
  display: flex;
  align-items: center;
  padding-bottom: .9rem;
}
.brand {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .6rem;
  text-align: right;
  flex: 1;
  min-width: 0;
}
.brand:hover { opacity: .75; }
.brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* כפתור הכיווץ יושב צף על הקו שבין הסרגל לתוכן, באמצע הגובה - לא בשורת הלוגו,
   כדי שלא יתערבב ויזואלית עם שינויי הרוחב של הלוגו/תווית בזמן האנימציה.
   הסלקטור button.sidebar-collapse (לא .sidebar-collapse) בכוונה - צריך לנצח את
   [data-tooltip]{position:relative} שמוגדר בהמשך הקובץ באותה ספציפיות בדיוק. */
button.sidebar-collapse {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .1s ease, color .1s ease, border-color .1s ease, transform .16s ease;
}
.sidebar-collapse:hover { background: var(--sunken); color: var(--ink); border-color: var(--border-strong); }
.sidebar-collapse .ico { width: 14px; height: 14px; }
/* פתוח: החץ (chevron-left, מצביע שמאלה) מסובב 180° כדי שיצביע ימינה - לכיוון
   הקצה שהתפריט יתכווץ אליו. מכווץ: לא מסובב - מצביע שמאלה, לכיוון ההתרחבות.
   translate(-50%,-50%) חייב להישאר בכל מצב - הוא מה שממרכז את הכפתור, לא רק הסיבוב. */
.sidebar:not(.collapsed) .sidebar-collapse { transform: translate(-50%, -50%) rotate(180deg); }

/* התוויות דוהות ומתכווצות יחד עם כיווץ התפריט - לא נעלמות בפתאומיות (display:none)
   בזמן שהרוחב עדיין באמצע האנימציה. אותה משך זמן בדיוק כמו .app (0.16s) כדי
   שהכל יזוז כמקשה אחת ולא כמה חלקים לא מתואמים. */
.brand-text,
.nav-label {
  opacity: 1;
  max-width: 10rem;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .16s ease, max-width .16s ease;
}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label { opacity: 0; max-width: 0; }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem 0;
}
.nav-group + .nav-group {
  border-top: 1px solid var(--border);
  margin-top: .3rem;
}

.nav-item {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: .58rem .65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: right;
  width: 100%;
  transition: background .1s ease, color .1s ease;
}
.nav-item:hover { background: var(--sunken); color: var(--ink); }
.nav-item.active {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}
.nav-item[disabled] { opacity: .35; cursor: default; }
.nav-item[disabled]:hover { background: none; color: var(--ink-soft); }

.nav-ico {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.nav-ico svg { width: 18px; height: 18px; }
.nav-item.active .nav-ico { color: var(--accent); }

/* אייקון גנרי (הדר, תפריטים, כפתורים) — עוקב אחרי צבע הטקסט */
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.nav-label { flex: 1; }

.nav-badge { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-faint); }
.nav-badge.all { color: var(--ok); }

/* ---------- טולטיפ מעוצב (לא ה-title הדפדפני) - קלט מ-data-tooltip ---------- */

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  /* פיזי, לא logical - inset-inline-end ב-RTL ממופה ל-left, לא ל-right */
  right: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  padding: .35rem .7rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 30;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: .25s;
}
/* בתפריט פתוח (לא מכווץ) התוויות כבר גלויות - לא צריך טולטיפ כפול */
.sidebar:not(.collapsed) .nav-item[data-tooltip]::after { content: none; }

/* גרסה שיושבת מתחת לפקד, לכפתורי אייקון בתוך שורות פעולה צפופות (הדר העורך,
   כותרת הבלוק, מתגי התצוגה). טולטיפ שמאלי היה נדחף אל מחוץ לעמודה שם. */
[data-tooltip][data-tip="bottom"]::after {
  /* translateX(-50%) אינו תלוי כיוון (transform לא מתהפך ב-RTL) - מרכוז אמיתי */
  right: auto;
  left: 50%;
  top: calc(100% + .45rem);
  transform: translateX(-50%) translateY(-4px);
  /* max-content שומר טולטיפ קצר בשורה אחת; משפט ארוך (כמו הסבר האישור) נשבר
     במקום למתוח פס באורך חצי מסך ולייצר גלילה אופקית בעמודת הסקשנים. */
  white-space: normal;
  width: max-content;
  max-width: 15rem;
  text-align: center;
  line-height: 1.45;
}
[data-tooltip][data-tip="bottom"]:hover::after,
[data-tooltip][data-tip="bottom"]:focus-visible::after { transform: translateX(-50%) translateY(0); }

/* פריטי "הגיליון הפתוח" — תמיד מוצגים, מעומעמים כשאין גיליון פתוח */
.nav-item[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
}

.actor-chip {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: .3rem .9rem;
  cursor: pointer;
}
.actor-chip:hover { border-color: var(--gold); }

/* בתפריט מכווץ הסרגל ברוחב 4.3rem — התגית והיציאה חייבות להצטמצם, אחרת הן גולשות החוצה */
.sidebar.collapsed .sidebar-foot { align-items: center; }
/* בלי overflow:hidden - font-size:0 כבר מסתיר את השם, ו-overflow היה חותך את
   הטולטיפ ("ספיר — החלפת משתמשת") שיוצא מחוץ לגבול התגית */
.sidebar.collapsed .actor-chip {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 0;            /* מסתיר את השם המלא בלי לגעת ב-DOM */
}
/* הטולטיפ יורש font-size:0 מהתגית המכווצת - חייב גודל משלו כדי להיראות */
.sidebar.collapsed .actor-chip[data-tooltip]::after { font-size: var(--fs-xs); }
.sidebar.collapsed .actor-chip::before {
  content: attr(data-initial);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sidebar.collapsed .logout { font-size: var(--fs-micro); }

/* ---------- פופאובר החלפת זהות - ליד תגית "מי עובדת", לא מסך מלא ---------- */

.actor-popover {
  position: fixed;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 14rem;
  padding: .4rem;
  animation: actor-pop-in .14s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes actor-pop-in {
  from { opacity: 0; transform: translateY(4px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* בלי letter-spacing: בעברית אין אותיות גדולות, וריווח אותיות רק מפרק את
   המילה ומאט את הקריאה. הכלל גורף בכל המוצרים. */
.actor-popover-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  padding: .7rem .7rem .5rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.actor-popover-list { display: grid; gap: .1rem; padding-bottom: .2rem; }
.actor-popover-row {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  text-align: right;
  border: 0;
  background: none;
  cursor: pointer;
  transition: background .1s ease;
}
.actor-popover-row:hover { background: var(--sunken); }
.actor-popover-avatar {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.actor-popover-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actor-popover-row.current { color: var(--accent); font-weight: 700; }
.actor-popover-row.current .actor-popover-avatar { background: var(--accent-wash); color: var(--accent); }
.actor-popover-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

/* הערה לצוות על בלוק - אותה מסגרת מיקום כמו actor-popover, תוכן שונה */
.note-popover {
  position: fixed;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 18rem;
  padding: .4rem;
  animation: actor-pop-in .14s cubic-bezier(.2, .9, .3, 1.2);
}
.note-popover-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-sm);
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  margin-bottom: .5rem;
}
.note-popover-actions { display: flex; gap: .5rem; padding: 0 .3rem .3rem; }
.note-popover-text {
  padding: .3rem .7rem .5rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: pre-wrap;
}
.note-popover-meta { padding: 0 .7rem .5rem; font-size: var(--fs-micro); color: var(--ink-faint); }

/* כפתור ההערה - פיל עם תווית, לא עוד אייקון עגול בין כל השאר (נטע לא שמה
   לב שיש כזה כשהוא היה icon-btn בודד). לנטע יש תמיד תווית "הערה" - הפעולה
   צריכה להיות מובנת מבט אחד, לא תלויה בריחוש שקיים כפתור שם. למי שלא נטע
   הכפתור מוצג רק כשיש הערה בפועל, עם תווית "הערה מנטע" וצבע בולט. */
.block-note-btn {
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: .2rem .6rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.block-note-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.block-note-btn .ico { width: 14px; height: 14px; }
.block-note-btn.has-note {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}

@media (max-width: 52rem) {
  .app { grid-template-columns: 1fr; overflow-x: hidden; }
  .sidebar {
    position: static;
    height: auto;
    /* min-width:0 חייב על כל שלב בשרשרת ה-flex, לא רק על .sidebar עצמו - כל
       ילד שלא מוותר על רוחב-התוכן-המינימלי שלו דוחף את כל השורה מעבר למסך.
       overflow-x:hidden כרשת ביטחון נוספת - גם אם משהו עוד לא עוטף מושלם,
       העמוד לא יגלול הצידה בגללו. */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-inline-start: 0;
    border-bottom: 1px solid var(--border);
    padding: .7rem 1rem;
    gap: .35rem;
  }
  .sidebar > * { min-width: 0; }
  /* כפתור הכיווץ הצף מוצב absolute יחסית ל-.sidebar - ברוחב הזה .sidebar
     הופך ל-position:static ואין מה לכווץ בכלל (התפריט כבר שורה אופקית) */
  .sidebar-collapse { display: none; }
  .brand { padding: 0 .5rem 0 1rem; min-width: 0; flex-shrink: 1; }
  .brand-text { max-width: 8rem; }
  .nav-group { flex-direction: row; flex-wrap: wrap; padding: 0; border: 0 !important; margin: 0 !important; min-width: 0; }
  .nav-item { width: auto; padding: .45rem .65rem; min-width: 0; }
  .nav-label { display: none; }
  .sidebar-foot {
    margin-inline-start: auto; padding: 0; border: 0;
    flex-direction: row; align-items: center; gap: .75rem; min-width: 0; flex-shrink: 0;
  }
}

/* ---------- תוכן ---------- */

.view { min-width: 0; }
.page, .wrap { max-width: 56rem; margin: 0 auto; padding: 2.75rem 2.5rem 6rem; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.page-head h1 { font-size: var(--fs-3xl); margin: 0; }
.sub { color: var(--ink-soft); font-size: var(--fs-base); margin: .2rem 0 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 1rem; }

/* ============================================================
   דף תבניות — רשימה מימין, תיאור + תצוגה חיה משמאל
   ============================================================ */

/* אין גובה קבוע/גלילה פנימית בכוונה - העמוד כולו גולל, לא חלונית סגורה בתוך
   חלונית. ראית תמיד את כל התוכן של הרכיב הנבחר בלי סרגל גלילה כפול. */
.tmpl-view {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  align-items: start;
}

.tmpl-nav {
  position: sticky;
  top: 0;
  border-inline-end: 1px solid var(--border);
  background: var(--sunken);
  padding: 1.75rem 1.25rem;
}
.tmpl-nav-head { margin-bottom: 1.25rem; }
.tmpl-nav-head h1 { font-size: var(--fs-2xl); margin: 0; }
.tmpl-nav-head .sub { margin: .25rem 0 0; }

.tmpl-nav-list { display: grid; gap: .3rem; }
.tmpl-nav-row {
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  text-align: right;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.tmpl-nav-row:hover { background: var(--surface); }
.tmpl-nav-row.active { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.tmpl-nav-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.tmpl-nav-row.active .tmpl-nav-name { color: var(--accent); }

.tmpl-detail { padding: 1.75rem 2.25rem 4rem; }
.tmpl-empty {
  color: var(--ink-faint);
  font-size: var(--fs-base);
  padding: 3rem 0;
  text-align: center;
}

.tmpl-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.tmpl-detail-head h2 { font-size: var(--fs-xl); margin: 0; }
.tmpl-detail-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .55rem 0 .35rem;
}
.tmpl-meta-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
}
/* text-wrap: pretty - איסור מילה בודדת בשורה אחרונה, כמו בכל טקסט גוף במוצר */
.tmpl-hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 30rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.tmpl-preview-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.tmpl-preview-frame {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  background: var(--sunken);
  border-radius: var(--radius);
}
.tmpl-preview-iframe {
  width: 600px;
  max-width: 100%;
  /* גובה התחלתי בלבד — fitPreview() ב-app.js מכווץ אותו לגובה התוכן האמיתי */
  height: 24rem;
  transition: height .18s ease;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 60rem) {
  .tmpl-view { grid-template-columns: 1fr; }
  .tmpl-nav { position: static; border-inline-end: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- דף לוג ---------- */

.log-list.card { overflow: hidden; }
.log-item {
  display: grid;
  grid-template-columns: 6.5rem 5rem 1fr;
  gap: .6rem;
  padding: .7rem 1.2rem;
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border);
}
.log-item:last-child { border-bottom: 0; }
.log-when { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.log-who { font-weight: 600; color: var(--accent); }
.log-what { color: var(--ink-soft); }

/* ---------- דף משתמשים ---------- */

/* הכרטיס ברוחב מלא כמו כל שאר עמודי ההגדרות (56rem מ-.page) - לא מוגבל
   בנפרד. עמודות קבועות (לא flex) כדי שכל הכותרות מתיישרות בדיוק מעל
   השדות בכל השורות, כולל "כניסה אחרונה" החדשה. */
.users-table.card { overflow: hidden; }
.user-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 8rem auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: 0; }
.user-row-head {
  padding: .55rem 1.2rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--sunken);
}
.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.user-name { width: 100%; max-width: 22rem; }
.user-last-login { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }
.user-row .link-btn { justify-self: end; }

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

.settings-page { max-width: 58rem; }

.settings-section { margin-bottom: 2.75rem; }
.settings-section:last-child { margin-bottom: 0; }

/* חוק הקרבה: הכותרת שייכת לרכיב שמתחתיה - רווח קטן מתחת, גדול מעל (2.75rem
   שמגיע מ-.settings-section). בלי זה שתי הסקציות נקראות כרשימה אחת. */
.section-head { margin-bottom: .75rem; }
.section-head h2 { font-size: var(--fs-xl); margin: 0; }
/* balance ולא pretty: זו שורה-שתיים בלבד, ו-balance מחלק אותן שווה במקום להשאיר
   שארית קצרה בשורה השנייה. איסור מילה בודדת בשורה אחרונה חל בכל המוצר. */
.section-head .sub { margin: .25rem 0 0; max-width: 34rem; text-wrap: balance; }

/* גלולת סיכום בראש העמוד: המידע הכי שימושי כאן הוא כמה חיבורים באמת פעילים */
.conn-summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--sunken);
  border-radius: var(--radius-pill);
  padding: .3rem .85rem;
  white-space: nowrap;
}
.conn-summary-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.conn-summary.all { background: var(--ok-wash); color: var(--ok); }
.conn-summary.all .conn-summary-dot { background: var(--ok); }

/* 2x2 בדסקטופ, עמודה אחת מתחת ל-~840px. לא ארבע בשורה: לטקסט "מה צריך" צריך רוחב. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: .85rem;
}

.svc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.svc-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.svc-head { display: flex; align-items: center; gap: .7rem; }

/* אריח הלוגו הוא לא קישוט: לארבעת הלוגואים צלליות שונות לגמרי (ה-A של Anthropic
   גבוהה, המשולש של Drive רחב, ענן Cloudinary דק). בלי אריח שמשווה להם משקל הם
   נקראים בגדלים שונים והשורה נשברת. */
.svc-logo {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: var(--sunken);
  border-radius: var(--radius-sm);
}
.svc-logo img { display: block; width: 1.35rem; height: 1.35rem; object-fit: contain; }
/* ה-SVG של Smoove מכיל padding מובנה - בגודל אחיד הוא נראה קטן ב-30% מהשאר */
.svc-logo img[data-optical="wide"] { width: 2rem; height: 2rem; }

.svc-id { display: grid; min-width: 0; flex: 1; }
.svc-name { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.svc-role { font-size: var(--fs-xs); color: var(--ink-faint); }

.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--ink-faint);
  white-space: nowrap;
}
.svc-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
/* מחובר: ירוק מלא. לא מחובר: הנקודה האדומה נושאת את הסימן, הרקע נשאר נייטרלי -
   ארבע גלולות אדומות הופכות את המסך למסך תקלה, בזמן ששום דבר לא שבור. */
.svc-pill.on { background: var(--ok-wash); color: var(--ok); }
.svc-pill.on .svc-dot { background: var(--ok); }

/* margin-bottom חובה בנוסף ל-margin-top:auto של הרגל: בקוביה מלאה ה-auto
   מתאפס, והקו מתחת לטקסט "מה צריך" נצמד אליו במרחק של פחות מ-8 פיקסלים */
.svc-need { margin-top: .95rem; margin-bottom: .95rem; }
.svc-need-label { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-faint); }
.svc-need-text {
  margin: .2rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* margin-top:auto מיישר את כל הרגליים בשורה גם כשטקסט "מה צריך" באורך שונה */
.svc-foot {
  margin-top: auto;
  padding-top: .95rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
}
.svc-foot .field { flex: 1; min-width: 0; }
.svc-foot .btn-ghost { flex-shrink: 0; }
.svc-ok {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-xs);
  color: var(--ok);
}
.svc-ok .ico { width: 15px; height: 15px; }
.svc-foot .link-btn { margin-inline-start: auto; }
.svc-note { font-size: var(--fs-xs); color: var(--ink-faint); margin: 0; }

/* שורת האמת של הכרטיס: מה השירות עצמו ענה, ומתי. "יש ערך שמור" הוא לא
   "החיבור עובד", והמסך חייב להראות את ההבדל ולא רק גלולה ירוקה. */
.svc-verify {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: .15rem;
}
.svc-verify-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: pretty;
}
.svc-verify[data-state="ok"] .svc-verify-text { color: var(--ok); }
.svc-verify[data-state="bad"] .svc-verify-text { color: var(--danger); }
.svc-foot .svc-verify .link-btn { margin-inline-start: 0; flex-shrink: 0; }

/* אדום רק כשהשירות באמת דחה את הערך. "עוד לא נבדק" הוא לא תקלה, והוא נשאר
   נייטרלי - אחרת מסך שלם נצבע אדום בזמן ששום דבר לא שבור. */
.svc-pill.bad { background: #FBEDEA; color: var(--danger); }
.svc-pill.bad .svc-dot { background: var(--danger); }

/* ערך מוסתר - נקודות במקום תווים, עם עין להצגה זמנית והעתקה. הערך עצמו
   לא נטען עד לחיצה מפורשת (ensureValue) - לא חלק מטעינת העמוד הרגילה. */
.svc-value-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .25rem .3rem .25rem .9rem;
}
.svc-value {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}
.svc-eye .ico, .svc-copy .ico { width: 15px; height: 15px; }
.svc-eye, .svc-copy { width: 1.8rem; height: 1.8rem; }

.settings-card { padding: 1.4rem 1.6rem; }

/* הכרטיס עצמו ברוחב מלא כמו כל שאר העמוד - השדות בפנים מוגבלים ברוחב
   נוח להקלדה, לא כל הכרטיס. שני דברים שונים: יישור עמוד מול נוחות טופס. */
.password-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.password-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .9rem;
  max-width: 30rem;
}
.password-form .field { flex: 1 1 9.5rem; min-width: 9.5rem; }
.password-actions { display: flex; align-items: center; gap: .9rem; }
.password-form .error { flex-basis: 100%; margin: 0; }

/* ---------- רשימת גיליונות ---------- */

/* שתי עמודות: הרשימה מימין (רוחב עיקרי), הפתק לצוות משמאל. margin-inline-end
   ולא margin:auto - כדי שהעודף ילך שמאלה ולא יתחלק לשני הצדדים, כלומר
   שהתוכן כולו יזוז ימינה במקום להישאר ממורכז. */
.issues-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 2.5rem;
  align-items: start;
  max-width: 78rem;
  margin-inline: 0 auto;
  padding: 2.75rem 2.5rem 6rem;
}
.issues-main { min-width: 0; }
@media (max-width: 68rem) {
  .issues-page { grid-template-columns: minmax(0, 1fr); max-width: 56rem; margin-inline: auto; }
  .team-note-card { order: -1; }
}

/* התרעת "כבר יש גיליון לתאריך הזה" באשף - לפני שנוצר כפול ורק אחד מהם יוצא */
.ni-clash {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--gold-wash);
  color: var(--gold);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  margin-bottom: .9rem;
  font-size: var(--fs-sm);
  text-wrap: pretty;
}
.ni-clash[hidden] { display: none; }
.ni-clash .link-btn { color: inherit; font-weight: 600; margin-inline-start: auto; }

/* פס "לשישי הקרוב עוד אין גיליון" - הרשימה מזכירה מה מחכה, לא רק מתעדת מה היה */
.friday-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  background: var(--gold-wash);
  color: var(--gold);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-wrap: pretty;
}
.friday-banner .link-btn { margin-inline-start: auto; color: inherit; font-weight: 600; }

.issues-toolbar { display: flex; justify-content: flex-end; margin-bottom: .85rem; }
.issues-toolbar[hidden] { display: none; }
.issues-month-filter {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: .4rem .7rem;
  cursor: pointer;
}

.issues-month-head {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  margin: 1.6rem 0 .65rem;
}
.issues-month-head:first-child { margin-top: 0; }

.issues-load-more {
  display: block;
  margin: 1.1rem auto 0;
}

/* גוון ירוק-פלנטע עדין עדין - רומז "זה מקום של נטע" בלי לצעוק צבע.
   min-height כדי שהפתק לא יתכווץ לשורה קומפקטית ויאבד נוכחות ליד הרשימה. */
.team-note-card {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.3rem;
  min-height: 13rem;
  display: flex;
  flex-direction: column;
}
.tn-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .9rem;
}
/* ריק: פתק שאין בו כלום לא צריך אווטאר-של-אף-אחת ושורת מטא ריקה - שורה
   קומפקטית אחת, לא מבנה מלא בלי תוכן. גדל למלא את הכרטיס כדי שהריק
   לא ייראה כמו טעות מדידה. */
.tn-empty {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  text-align: center;
  justify-content: center;
}
.tn-pin { width: 15px; height: 15px; flex-shrink: 0; }

.tn-filled { flex: 1; display: flex; flex-direction: column; }
.tn-text {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
}
/* המטא (מי וכתי כתבה) יושב למטה, אחרי הטקסט - לא מעליו כמו כותרת הודעה */
.tn-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}
.tn-avatar { width: 1.7rem; height: 1.7rem; font-size: var(--fs-micro); }
.tn-meta { font-size: var(--fs-micro); color: var(--ink-faint); }
.tn-input {
  width: 100%;
  flex: 1;
  min-height: 8rem;
  padding: .75rem .8rem;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.tn-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.tn-actions { margin-top: .8rem; display: flex; gap: .6rem; justify-content: flex-end; }
.tn-actions:has(.tn-edit:not([hidden])) { justify-content: flex-start; margin-top: .6rem; }
.tn-actions[hidden] { display: none; }

/* עריכה על תוכן קיים נשארת קישור עדין; "הוספת פתק" הראשונה צריכה להיראות
   כמו הזמנה, לא כמו לינק אפור קל לפספס - נטע צריכה לראות אותה. */
.tn-edit {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  transition: color .12s ease;
}
.tn-edit:hover { color: var(--ink); }
.tn-edit.tn-edit-add {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: .5rem 1rem;
  font-weight: 600;
}
.tn-edit.tn-edit-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tn-edit.tn-edit-add .ico { width: 15px; height: 15px; }

.issues { display: grid; gap: .65rem; }

.issue-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.issue-row:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.issue-left { flex: 1; min-width: 0; }

.issue-title { font-weight: 600; font-size: var(--fs-lg); }
.issue-meta {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .15rem;
}
.issue-sent-tag {
  color: var(--ok);
  font-weight: 600;
  background: var(--ok-wash);
  border-radius: var(--radius-pill);
  padding: .1rem .6rem;
}
.issue-menu-wrap { flex-shrink: 0; }

.status {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--ink-soft);
  white-space: nowrap;
}
.status[data-s="draft"]    { background: var(--sunken); color: var(--ink-faint); }
.status[data-s="exported"] { background: var(--ok-wash); color: var(--ok); }

.empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ============================================================
   עורך הגיליון
   ============================================================ */

.editor { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---------- כותרת המסמך: יושבת בעמודת התוכן, מעל הבלוקים ----------
   קודם היה סרגל עליון רוחבי שדחס פירור-לחם, כותרת, תאריך ושתי פעולות
   לשורה אחת, והשאיר כ-400px ריקים בצד שמאל. עכשיו הכל מיושר לאותה
   עמודה של רשימת הסקשנים, ושורת הפעולות נצמדת בגלילה. */

.doc-head {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--bg);
  /* פס מלא לרוחב הפאנל, אחרת תוכן נגלל מציץ מצדי עמודת התוכן */
  margin-inline: -1.75rem;
  padding-inline: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.doc-head-inner {
  padding-block: 1.4rem 1.15rem;
}

/* שורת הפעולות נצמדת לאותה עמודת-קריאה (42rem) כמו הכותרת והסקשנים מתחתיה.
   קודם היא נמתחה לכל רוחב הפאנל, כלומר גלשה כ-2rem מעבר לקצה הכרטיסים משני
   הצדדים - הפירור-לחם בלט ימינה מכותרת הגיליון וכפתור ההפקה בלט שמאלה מקצה
   הכרטיס. זה מה שנקרא "עקום": שלוש שורות זו מעל זו, כל אחת בקו אחר.
   עכשיו פירור-לחם, כותרת וכותרת "סקשנים" חולקים קו ימין אחד, וכפתור ההפקה
   יושב בדיוק על קו שמאל של הכרטיסים. */
/* שורת הפעולות (פירור-לחם + ⋮ + הורדת HTML) נמתחת לכל רוחב הפאנל - השם קרוב
   לימין, הפעולות קרובות לשמאל. רק כותרת הגיליון+תאריך מתיישרת לעמודת התוכן
   (42rem) כמו הבלוקים מתחתיה - הן שני דברים שונים, לא צריכות אותו קו. */
.doc-head-title {
  max-width: 42rem;
  margin-inline: auto;
}

.doc-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--control-h);
}

/* מסך צר: פירור-לחם ושלוש פעולות לא נכנסים לשורה אחת, והתפריט ⋮ נדחק אל
   מחוץ למסך - כלומר "הסרת הגיליון" ו"העתקה ללוח" פשוט נעלמות. במקום לדחוס,
   שורת הפעולות יורדת שורה ונשארת שלמה. */
@media (max-width: 44rem) {
  .doc-head-bar { flex-wrap: wrap; }
  .hdr-actions { width: 100%; justify-content: flex-start; }
}

.doc-head-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .85rem;
}

/* פירור-לחם קטן וקליל, לא כפתור-חזרה גדול */
.crumb {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem;
}
.crumb:hover { color: var(--ink); }
.crumb .ico { width: 14px; height: 14px; }

.approval-status {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-faint);
}
.approval-count { font-weight: 700; color: var(--ink-faint); }
.approval-status.all { color: var(--ok); }
.approval-status.all .approval-count { color: var(--ok); }
.approval-status:not(.all) .approval-count { color: var(--ok); }

/* שם הגיליון הוא כותרת העמוד, לא פקד בסרגל - לכן גדול, נקי ממסגרת,
   והמסגרת מופיעה רק במעבר עכבר כדי לרמוז שאפשר לערוך.
   הסלקטור חייב להיות input.issue-title-input: הכלל הכללי input[type="text"]
   ספציפי יותר מ-.issue-title-input לבדו, ולכן כל הבלוק הזה לא פעל בכלל
   (הכותרת הוצגה 0.95rem בתוך תיבת קלט לבנה). */
input.issue-title-input {
  flex: 0 1 auto;
  /* בלי width:auto נשאר width:100% מהכלל הכללי של הקלטים,
     והכותרת נמתחת לכל העמודה ומרחיקה את התאריך לקצה השני */
  width: auto;
  field-sizing: content;
  min-width: 10rem;
  max-width: 100%;
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.35;
  color: var(--ink);
  border-color: transparent;
  background: transparent;
  padding: .25rem .5rem;
  margin-inline-start: -.5rem;
}
input.issue-title-input:hover { border-color: var(--border-mid); background: var(--surface); }
input.issue-title-input:focus { border-color: var(--accent); background: var(--surface); }

.issue-date-field {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  width: 11.75rem;
  height: var(--control-h);
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 0 .65rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.issue-date-field:hover { border-color: var(--border-strong); }
.issue-date-field:has(input:focus) { border-color: var(--accent); box-shadow: var(--focus-ring); }
/* הטבעת הגלובלית (input:focus-visible) הצטברה על זו של המיכל עצמו - שתי
   טבעות שונות-רדיוס חופפות נראו כמו כפתור מוגזם. הפנימי כאן שקוף ובלי
   border משלו, אז הטבעת החיצונית מספיקה. */
.issue-date-field input:focus-visible { box-shadow: none; }
.issue-date-field .ico { width: 16px; height: 16px; flex-shrink: 0; }
.issue-date-field { position: relative; }
/* input.issue-date נשאר type=hidden אחרי אתחול flatpickr (מחזיק את הערך האמיתי
   ל-Y-m-d) - השדה הנראה הוא ה-altInput שהיא יוצרת, אותו מיכל בדיוק */
.issue-date-field input.flatpickr-input,
.issue-date-field input[type="text"] {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: .5rem .3rem .5rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- לוח השנה של flatpickr - צבעי המותג במקום הכחול הכתום שבברירת המחדל ---------- */
.flatpickr-calendar {
  font-family: var(--sans);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  direction: rtl;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays { background: var(--surface); color: var(--ink); fill: var(--ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-family: inherit; }
span.flatpickr-weekday { color: var(--ink-faint); font-weight: 600; }
.flatpickr-day { color: var(--ink); border-radius: var(--radius-sm); }
/* "היום" בגוון עדין ונייטרלי - לא בצבע המותג, אחרת זה נראה כמו שתי תוצאות
   נבחרות בו-זמנית (העיגול המלא של הבחירה מול עיגול-קו של "היום"). */
.flatpickr-day.today { border-color: var(--border-strong); }
.flatpickr-day.today:hover { border-color: var(--border-strong); background: var(--sunken); }
.flatpickr-day:hover { background: var(--sunken); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--ink-faint); opacity: .5; }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--accent); }

/* ---------- פעולות ראש העורך: הפקת HTML + תפריט ⋮ ---------- */

.hdr-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-inline-start: auto; }
/* איפוס בסיס לכל כפתור אייקון "עירום" - בלי זה נופל לעיצוב ברירת המחדל הכעור
   של הדפדפן (מסגרת outset, רקע אפור). כל כפתור אייקון בלי מחלקת עיצוב משלו
   (btn-primary/btn-ghost וכו') חייב לעבור דרך כאן. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
/* כפתור ⋮ שפתח את התפריט שלו נשאר מודגש כמו hover, בלי טולטיפ - האייקון ברור מספיק */
.menu-wrap:has(.menu:not([hidden])) > .icon-btn { background: var(--sunken); color: var(--ink); }
.icon-btn .ico { width: 18px; height: 18px; }

/* שורת הפעולות של העורך: כל הפקדים על אותו גובה ואותו קו בסיס.
   בלי זה נוצרו חמישה גבהים שונים (24/38/44/49/53) בשורה אחת. */
.doc-head .btn-primary,
.doc-head .btn-ghost,
.doc-head .icon-btn { height: var(--control-h); }
.doc-head .btn-primary,
.doc-head .btn-ghost { padding-block: 0; display: inline-flex; align-items: center; }

/* ---------- תפריטון תלוי (⋮) — משותף להדר ולבלוק ---------- */

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .35rem);
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .35rem;
  display: grid;
  min-width: 12rem;
}
.menu-item {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  text-align: right;
  cursor: pointer;
}
.menu-item:hover { background: var(--sunken); }
.menu-item.danger { color: var(--danger); }

/* עמודת התצוגה המקדימה נושמת עם רוחב המסך במקום להישאר 26rem קבועים:
   בלפטופ צר היא לא חונקת את רשימת הסקשנים, ובמסך רחב היא גדלה
   במקום להשאיר שוליים ריקים משני צדי הרשימה. */
/* --preview-w נגרר בפועל ע"י היד שעל התפר (ב-app.js) ונשמר לגיליון הבא.
   ה-clamp הוא רק ברירת מחדל לפני שנגררה פעם ראשונה. הרוחב הזה הוא של
   המסגרת סביב התצוגה - לא של התבנית עצמה, שנשארת קבועה (390px/100%) לפי
   .preview-pane[data-view] למטה. */
.editor-body {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--preview-w, clamp(23rem, 30%, 34rem));
  overflow: hidden;
}
/* מצב "תצוגת מחשב": התבנית מחכה ל-640px (.preview-pane[data-view="desktop"]
   .preview), אבל עמודת התצוגה עצמה נשלטת רק ע"י --preview-w הנגרר - אם
   מישהי גררה אותה צרה (או שהיא כזו כברירת מחדל במסך לא רחב), שני המצבים
   נדחסים לאותו max-width:100% ונראה שהטוגל "לא עושה כלום". עמודה רחבה
   מספיק במצב הזה, לא תלויה במה שנגרר. */
.editor-body.preview-desktop {
  grid-template-columns: minmax(0, 1fr) minmax(660px, var(--preview-w, 660px));
}

.blocks-pane {
  height: 100%;
  overflow-y: auto;
  /* אין ריפוד עליון - כותרת המסמך נצמדת לראש הפאנל ומחזיקה את הרווח בעצמה */
  padding: 0 1.75rem 4rem;
}
/* עדכון 2.9.26: גיא ביקש למקם את "X/Y מאושרים" מול הכותרת, לא מתחתיה - יש
   מקום פנוי בצד השמאלי של השורה. מחליף את ההעדפה הקודמת (כותרת ותת-שורה). */
.blocks-pane-head {
  max-width: 42rem;
  margin: 1.6rem auto .55rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.blocks-pane-head h2 { font-size: var(--fs-xl); margin: 0; line-height: 1.35; }

/* טוגל "רצועת הודעה": לא בלוק ברשימה, מתג אחד קבוע מעל הרשימה - להדליק
   כשרוצים לכתוב הודעה נקודתית, לכבות כשנגמר השבוע. הטקסט נערך כאן,
   בשדה שצמוד לטוגל עצמו - לא בקוביה שקופצת לתוך רשימת הסקשנים. */
.announcement-toggle-row {
  max-width: 42rem;
  margin: 0 auto .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.announcement-toggle-hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.announcement-toggle-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-sm);
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.announcement-toggle-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- פס מצב הגיליון ----------
   סטטוס, רגע ההפקה ותג "נשלח בסמוב" - במקום שבו העבודה קורית. הפעולות האלה
   ישבו בתפריט ⋮ במסך הרשימה, רחוק מהרגע שבו מחליטים עליהן. */

.issue-state {
  max-width: 42rem;
  margin: 1.4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.istate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.istate-stamp { font-size: var(--fs-sm); color: var(--ink-soft); }
.istate-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-inline-start: auto;
}
.istate-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--gold-wash);
  color: var(--gold);
  border-radius: var(--radius);
  padding: .6rem .9rem;
  font-size: var(--fs-sm);
  text-wrap: pretty;
}
.istate-flag {
  font-weight: 600;
  font-size: var(--fs-micro);
  padding: .16rem .55rem;
  border-radius: var(--radius-pill);
  background: #fff;
}

/* ---------- "מישהי אחרת עדכנה" ---------- */

.issue-sync {
  max-width: 42rem;
  margin: .75rem auto 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .9rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.issue-sync-text { text-wrap: pretty; }
.issue-sync .link-btn { margin-inline-start: auto; }
.blocks {
  display: flex;
  flex-direction: column;
  max-width: 42rem;
  margin-inline: auto;
}

/* ---------- תצוגה מקדימה קבועה ---------- */

.preview-pane {
  position: relative;
  height: 100%;
  /* התצוגה היא העמודה השמאלית ב-RTL. inline-end הוא צד שמאל, כלומר קצה החלון —
     שם הקו לא נראה, ובתפר מול רשימת הסקשנים לא היה קו בכלל. */
  border-inline-start: 1px solid var(--border);
  background: var(--sunken);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ידית גרירה על התפר עצמו, כילד ישיר של editor-body ולא של preview-pane -
   preview-pane עם overflow:hidden היה חותך לה חצי מהגוף (translate דוחף
   אותה מחוץ לקופסה שלה). left: var(--preview-w) ממקם אותה בדיוק על התפר,
   מדיד מהקצה הפיזי השמאלי של editor-body - לא תלוי RTL/LTR. שקופה כברירת
   מחדל ומופיעה במעבר עכבר (opacity לא מבטל hover, אז היא "מתגלה" בדיוק
   מתחת לסמן שכבר שם). */
button.preview-expand {
  position: absolute;
  top: 50%;
  left: var(--preview-w, clamp(23rem, 30%, 34rem));
  z-index: 20;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 2.4rem;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: ew-resize;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .15s ease, background .1s ease, color .1s ease, border-color .1s ease;
  touch-action: none;
}
.preview-expand:hover,
.preview-expand:focus-visible,
.preview-expand.dragging {
  opacity: 1;
  background: var(--sunken);
  color: var(--ink);
  border-color: var(--border-strong);
}
.preview-expand .ico { width: 12px; height: 12px; }
/* בזמן גרירה: אין ברירה לטקסט/iframe להיבחר בטעות, ואין טרנזישן על הרוחב
   עצמו - הוא צריך לעקוב אחרי העכבר מיידית, לא להישאר צעד מאחור. */
body.resizing-preview { cursor: ew-resize; user-select: none; }
body.resizing-preview .preview-frame { pointer-events: none; }

.preview-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.preview-title { flex: 1; font-weight: 700; font-size: var(--fs-sm); }
.copy-html { flex-shrink: 0; }
.preview-pane.stale .refresh {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

/* מתג עם "אצבע" נגררת אחת, לא שני כפתורים עם רקע נפרד - קודם הפינה
   המעוגלת של הרקע הפעיל לא התיישרה בדיוק עם המסגרת החיצונית, וזה נראה
   כמו מסגרת שבורה. בלי overflow:hidden - הוא היה חותך את הטולטיפים. */
.view-switch {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.view-thumb {
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  width: calc(50% - 2px);
  background: var(--accent-wash);
  border-radius: 6px;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.preview-pane[data-view="desktop"] .view-thumb { transform: translateX(-100%); }
.view-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.7rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .18s ease;
}
/* ה-svg בתוך הכפתור לפעמים "תופס" את הקליק בעצמו (במיוחד ב-Safari/HiDPI)
   ולא מעביר אותו הלאה לכפתור - pointer-events:none מכריח כל קליק על
   האייקון להיפתר ישירות על ה-button שמכיל אותו. */
.view-btn svg { pointer-events: none; }
.view-btn:hover { color: var(--ink); }
.view-btn[aria-pressed="true"] { color: var(--accent); }

.preview-frame {
  flex: 1;
  padding: .9rem;
  overflow: auto;
  display: flex;
  justify-content: center;
}
.preview {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.preview-pane[data-view="mobile"] .preview {
  width: 390px;
  max-width: 100%;
  flex-shrink: 0;
}
/* רוחב קבוע כמו מובייל, לא 100% - אחרת הרחבת החלונית (preview-wide) הייתה
   מותחת את התבנית האמיתית, לא רק נותנת לה יותר שוליים. 640 = 600 (רוחב
   הטבלה בתבנית עצמה) + מסגרת "לקוח מייל" סביבה. */
.preview-pane[data-view="desktop"] .preview {
  width: 640px;
  max-width: 100%;
  flex-shrink: 0;
}

@media (max-width: 72rem) {
  .editor { height: auto; overflow: visible; }
  .editor-body,
  .editor-body.preview-desktop {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .blocks-pane { height: auto; overflow: visible; }
  .preview-pane {
    height: auto;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    order: 2;
  }
  .preview-frame { height: 34rem; }
  /* אין תפר אנכי במצב מוערם - הכפתור נשען על מיקום שלא קיים */
  .preview-expand { display: none; }
}

/* ---------- קוביית בלוק ---------- */

.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease, opacity .16s ease;
}
.block.open { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.block.dragging { opacity: .45; }
/* קו היעד בגרירה: צל פנימי ולא בורדר. בורדר של 2px החליף בורדר של 1px
   והזיז את כל מה שמתחת בפיקסל - קפיצה שנראתה כמו ג'יטר בזמן הגרירה. */
.block.drop-target { box-shadow: inset 0 2px 0 0 var(--accent), var(--shadow-sm); }
/* נעול על ידי מישהי אחרת: חייב לצעוק "אל תיגעי בזה עכשיו" מרחוק, ולא להסתמך
   על שורת מידע אפורה. מסגרת זהב מלאה + תווית עם שם העורכת ליד שם הבלוק. */
.block.locked {
  background: var(--gold-wash);
  border-color: var(--gold);
}
.block-lock-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: .16rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #fff;
  white-space: nowrap;
}
.block-lock-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: .85;
}
.block.approved { border-color: var(--ok); }

.block-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  user-select: none;
}
/* ידית גרירה: אייקון SVG כמו כל שאר האייקונים במערכת (היה תו יוניקוד ⠿
   שנראה אחרת בכל מערכת הפעלה). ה-svg שקוף ללחיצות כדי שאירוע הגרירה
   ייתפס על ה-span עצמו, שהוא בעל draggable. */
.grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  cursor: grab;
  flex: none;
  transition: color .12s ease;
}
.grip .ico { width: 18px; height: 18px; pointer-events: none; }
.grip:hover { color: var(--ink-soft); }
.grip:active { cursor: grabbing; }
.grip-locked { opacity: .35; cursor: default; }
.grip-locked:hover { color: var(--ink-faint); }
.block-id { flex: 1; display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.block-name { font-weight: 600; font-size: var(--fs-lg); }

/* ‎.block-cat (תגית "קבוע / שבועי / לפי צורך") ירדה מהמוצר לפי בקשת גיא -
   "סתם יבלבל אותן". אין להחזיר בלי החלטה שלו. */

.block-meta { font-size: var(--fs-micro); color: var(--ink-faint); white-space: nowrap; }
.chev { color: var(--ink-faint); transition: transform .15s ease; }
.block.open .chev { transform: rotate(180deg); }

/* אותו ריפוד אופקי כמו הכותרת (1.1rem) — קודם היה 1.25rem והתוכן לא התיישר איתה */
.block-body { display: none; padding: .5rem 1.1rem 1.4rem; }
/* פתיחת בלוק הייתה קפיצה חדה. הרכה קצרה על התוכן בלבד - בלי אנימציית גובה
   שמקפיצה את כל הרשימה תוך כדי. הסגירה מיידית (display:none לא מונפש). */
/* grid-template-columns: minmax(0,1fr) ולא ברירת המחדל (auto).
   מסלול auto לא יורד מתחת ל-min-content של הילד הרחב ביותר, ולכן פריט אחד עם
   טקסט תצוגה ארוך (שורת הסיכום של פריט מקופל ברשימת השאלות) מתח את כל גוף
   הבלוק 63 פיקסלים מעבר לרוחב הכרטיס - כל השדות חרגו יחד שמאלה. מדוד בדפדפן:
   ‎.block-body היה 670 והתוכן 733. minmax(0,1fr) מרשה למסלול להצטמצם. */
.block.open .block-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  animation: block-body-in .2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes block-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- שדות בתוך בלוק ---------- */

.f { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.f-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.f input[type="url"] { direction: ltr; text-align: left; }
.f-hint { font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.5; }

/* סרגל כלים קטן מעל שדה טקסט עשיר - כרגע בולד בלבד */
.f-toolbar { display: flex; gap: .25rem; }
.f-tool-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-xs);
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  color: var(--ink-soft);
  background: var(--sunken);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.f-tool-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
/* הסמן בתוך קטע שכבר מסומן: הכפתור דלוק, כלומר לחיצה נוספת תסיר את הסימון.
   מסגרת כפולה ולא צבע מלא - הכפתור צריך להיראות "לחוץ", לא "אחר". */
.f-tool-btn.on {
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-wash);
}
.f-tool-btn.on:hover { background: var(--accent-wash); border-color: var(--accent); }
/* אות אחת, לא גופן נטוי אמיתי - Assistant לא כולל נטוי, והדפדפן היה
   מזייף אותו בהטיה מכוערת. serif נטוי נראה כמו כפתור נטוי בכל עורך. */
/* direction:ltr - בלי זה "A+" מוצג בעברית כ-"+A" */
.f-tool-btn.wide { width: auto; min-width: 1.6rem; padding: 0 .3rem; direction: ltr; }
.f-tool-btn.italic { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.f-tool-btn .ico { width: .85rem; height: .85rem; }
/* כפתור המרקר נושא את הצהוב של עצמו - פס בתחתית האות, כמו סימון אמיתי */
/* השם mark כבר תפוס בקובץ הזה - הוא הלוגו בראש המסך (ריבוע ירוק 3.6rem),
   והכפתור ירש ממנו גובה, ריפוד ורקע. משם הקלאס הארוך. */
.f-tool-btn.tool-mark {
  background-image: linear-gradient(#FBE8A6, #FBE8A6);
  background-size: 100% 45%;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.f-warn { color: var(--danger); }

/* ---------- אימוג'ים ---------- */

/* כפתור בתוך שדה כותרת: נוכח בריחוף ובמיקוד, שקוף כשלא צריך אותו */
.f-input-box { position: relative; }
.f-input-box input { padding-inline-end: 2.4rem; }
.f-emoji-btn {
  position: absolute;
  inset-inline-end: .45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  line-height: 1;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.f-input-box:hover .f-emoji-btn,
.f-input-box:focus-within .f-emoji-btn { opacity: .75; }
.f-emoji-btn:hover { opacity: 1; background: var(--sunken); }
.f-tool-btn.emoji { font-size: var(--fs-sm); }

.emoji-pop {
  position: fixed;
  z-index: 60;
  width: 19rem;
  padding: .6rem;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.14));
}
.emoji-search { margin-bottom: .5rem; }
.emoji-tabs {
  display: flex;
  gap: .15rem;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.emoji-tab {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  line-height: 1;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s ease, background .12s ease;
}
.emoji-tab:hover { opacity: 1; background: var(--sunken); }
.emoji-tab.on { opacity: 1; background: var(--accent-wash); }
/* גובה קבוע: בלי זה הפופאובר קופץ בין קטגוריה של 30 אימוג'ים לאחת של 60 */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .1rem;
  height: 11.5rem;
  overflow-y: auto;
}
.emoji-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: background .1s ease, transform .1s ease;
}
.emoji-cell:hover { background: var(--sunken); transform: scale(1.15); }
.emoji-empty {
  grid-column: 1 / -1;
  align-self: start;
  padding: 1.2rem .4rem;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-align: center;
}
.f-thumb {
  max-width: 9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-top: .4rem;
}

.block-hint {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  /* אפור עדין, לא ירוק - ירוק בממשק הזה מסמן אישור/הצלחה, לא מידע כללי */
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
}

/* ---------- בורר סוג התבנית ---------- */

.type-picker {
  padding: .2rem 0 .8rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--border-mid);
}
.type-picker .f-label { color: var(--ink-soft); }
.type-select {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-mid);
  cursor: pointer;
  padding-inline-end: 2rem;
}

/* ---------- הוספת בלוק בין קוביות ---------- */

.insert-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  position: relative;
}
.insert-row::before {
  content: "";
  position: absolute;
  inset-inline: .5rem;
  height: 1px;
  background: var(--border-mid);
  opacity: 0;
  transition: opacity .12s ease;
}
.insert-row:hover::before { opacity: 1; }

.insert-btn {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: .15rem .7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.insert-btn .ico { width: 15px; height: 15px; }
.insert-row.last .insert-btn .ico { width: 16px; height: 16px; }
.insert-row:hover .insert-btn,
.insert-btn:focus-visible { opacity: 1; }
.insert-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }

.insert-row.last { min-height: auto; margin-top: 1rem; }
.insert-row.last::before { display: none; }
.insert-row.last .insert-btn {
  opacity: 1;
  border: 1px dashed var(--border-strong);
  padding: .6rem 1.5rem;
  font-size: var(--fs-sm);
}

/* ---------- אישור בלוקים ---------- */

.approve-btn {
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: .2rem .7rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.approve-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.approve-ico { width: 14px; height: 14px; display: none; }
.block.approved .approve-btn {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--ok-wash);
}
.block.approved .approve-ico { display: block; }

/* תפריט ⋮ הבלוק (החלפת סוג, הסרה) — במקום כפתור "הסרה" גלוי תמיד */
.block-menu-wrap { flex-shrink: 0; }
.block-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.block-menu-btn:hover { opacity: 1; background: var(--sunken); color: var(--ink); }
.block-menu-btn .ico { width: 17px; height: 17px; }
.block:hover .block-menu-btn, .block-menu-wrap:has(.menu:not([hidden])) .block-menu-btn { opacity: 1; }

/* ---------- בורר צבע הקבוצה ---------- */

.swatches {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.swatches.in { opacity: 1; transform: none; }
.swatch {
  font-family: inherit;
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: .35rem .9rem .35rem .6rem;
  cursor: pointer;
  color: var(--ink-soft);
  position: relative;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.swatch:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* נבחר = רקע רך בגוון הצבע, לא טבעת כפולה רועשת סביב הכפתור */
.swatch.on {
  border-color: var(--c);
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
}
.swatch-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--c);
  display: inline-block;
  flex-shrink: 0;
}
.swatch-add { padding: .35rem .6rem; position: relative; }
.swatch-add .swatch-dot {
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 1px dashed var(--border-strong);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.swatch-add:hover .swatch-dot {
  transform: rotate(90deg);
  border-color: var(--accent);
  color: var(--accent);
}
/* × הסרה - מופיע רק בהעברת עכבר, לא תופס מקום קבוע בעיצוב */
.swatch-del {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-inline-start: -.2rem;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .12s ease, transform .12s ease, background .12s ease, color .12s ease;
}
.swatch:hover .swatch-del { opacity: 1; transform: scale(1); }
.swatch-del:hover { background: var(--danger); color: #fff; }
.color-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* ---------- טוגל ---------- */

/* שדה טוגל: קו הפרדה עדין מעל, כדי שיקרא כדגל-מצב נלווה ולא כשדה תוכן צף */
.toggle-field {
  border-top: 1px solid var(--border);
  padding-top: .9rem;
  margin-top: .1rem;
}

/* בלי מסגרת ובלי קפסולה: המתג עצמו הוא הרכיב, והטקסט לצידו הוא התווית שלו.
   הקפסולה שהייתה כאן יצרה "כפתור בתוך כפתור" ונקראה כפעולה ולא כדגל־מצב. */
.toggle {
  font-family: inherit;
  font-size: var(--fs-sm);
  display: inline-flex;
  /* גוף הבלוק הוא grid, ובלי זה הרכיב נמתח לכל רוחב הכרטיסייה
     והמתג התרחק מהתווית שלו בכ-600 פיקסל */
  justify-self: start;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color .12s ease;
}
.toggle:hover { color: var(--ink); }
.toggle-knob {
  width: 32px; height: 19px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease;
}
.toggle-knob::after {
  content: "";
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: inset-inline-start .15s ease;
}
.toggle.on { color: var(--ink); font-weight: 500; }
.toggle.on .toggle-knob { background: var(--accent); }
.toggle.on .toggle-knob::after { inset-inline-start: 15px; }

/* ---------- רשימה חוזרת ---------- */

.list-field { gap: .6rem; }
.list-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
/* בולט יותר מכפתור "רגיל" - זו הפעולה הראשית של השדה הזה, לא פעולה משנית */
.list-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.list-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.list-add .ico { width: 15px; height: 15px; }

/* בורר גודל תמונה: אותו מתג של שאר המערכת, רק עם תווית משני צדדיו.
   הצד הפעיל מודגש כדי שאפשר יהיה לקרוא את המצב בלי ללחוץ. */
.imagemode-field { gap: .5rem; }
.imagemode-toggle { gap: .5rem; }
.imagemode-side { font-size: var(--fs-sm); color: var(--ink-faint); transition: color .12s ease, font-weight .12s ease; }
.imagemode-side.active { color: var(--ink); font-weight: 600; }

/* עד 3 כפתורים לפריט - שורות פשוטות, לא כרטיסי list-item עם מספור/גרירה.
   "+ הוספת כפתור" טקסטואלי ועדין בכוונה - לא עוד כפתור גס באותו משקל
   ויזואלי כמו list-add, זו פעולה משנית בתוך פריט, לא הפעולה הראשית שלו. */
.buttons-field { gap: .5rem; }
.buttons-rows { display: grid; gap: .4rem; }
.buttons-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; align-items: center; }
.buttons-row input {
  font: inherit;
  font-size: var(--fs-sm);
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.buttons-remove {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.buttons-remove:hover { color: var(--danger); background: var(--sunken); }
.buttons-add {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 0;
  background: none;
  padding: .1rem 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  cursor: pointer;
}
.buttons-add:hover { color: var(--accent); }
.buttons-add-ico { font-size: .95em; font-weight: 700; }

.list-item {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
  opacity: 0;
  /* פריט חדש נוסף בסוף הרשימה, ולכן הוא עולה למקומו מלמטה. קודם הוא ירד
     מלמעלה - כיוון הפוך למקום שבו הוא באמת מופיע, וזה מה שהרגיש קופצני. */
  transform: translateY(6px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.16, 1, .3, 1);
}
.list-item.in { opacity: 1; transform: none; }
.list-item .f input,
.list-item .f textarea,
.list-item .f select { background: var(--surface); }

.list-item-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border-mid);
  cursor: pointer;
}
.list-item.collapsed .list-item-head { padding-bottom: 0; border-bottom: 0; }
.list-item.collapsed .list-item-body { display: none; }
.list-item-chev { width: 15px; height: 15px; color: var(--ink-faint); flex-shrink: 0; transition: transform .15s ease; }
.list-item:not(.collapsed) .list-item-chev { transform: rotate(180deg); }
.list-num {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-pill);
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
}
/* min-width:0 - בלי זה שורת התצוגה המקוצרת (white-space:nowrap) תורמת את כל
   אורכה למידת ה-min-content של השורה, והפריט מסרב להצטמצם */
.list-peek {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   חלונות ומגירות
   ============================================================ */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(24, 26, 23, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 28rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.modal-box.wide { max-width: 44rem; }
.modal-box h3 { margin: 0; font-size: var(--fs-xl); }
.modal-actions { display: flex; gap: .75rem; align-items: center; }

/* דיאלוג אישור מעוצב - במקום confirm() של הדפדפן */
.confirm-box { max-width: 24rem; }
.confirm-message { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.6; text-wrap: pretty; }
.confirm-box .modal-actions { flex-direction: row-reverse; justify-content: flex-start; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #96301F; border-color: #96301F; }

/* אשף גיליון חדש - שם, תאריך, ובחירה מפורשת אילו מדורים ייכנסו */
.new-issue-box { max-height: 80vh; }
.new-issue-box .field { gap: .35rem; display: flex; flex-direction: column; }
.ni-top-row { display: flex; align-items: flex-end; gap: .6rem; }
.ni-date-field { width: 9.5rem; }
.ni-title-field { flex: 1 1 auto; min-width: 0; }
.ni-title-wrap { position: relative; display: flex; align-items: center; }
.ni-title-wrap .ni-title { width: 100%; padding-inline-end: 2.1rem; }
.ni-title-reset {
  position: absolute;
  inset-inline-end: .35rem;
  width: 1.6rem;
  height: 1.6rem;
}
.ni-title-reset .ico { width: 14px; height: 14px; }
.ni-blocks-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-top: .3rem; }
.ni-blocks {
  display: grid;
  gap: .3rem;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem;
}
.ni-block-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 .6rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ni-block-row:hover { background: var(--sunken); }
.ni-block-check { grid-row: span 2; align-self: center; accent-color: var(--accent); }
.ni-block-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ni-block-hint { grid-column: 2; font-size: var(--fs-micro); color: var(--ink-faint); }
.new-issue-box .modal-actions { flex-direction: row-reverse; justify-content: flex-start; }

/* מודל הוספת בלוק — רשימה מימין, תצוגה מקדימה חיה משמאל (כמו מסך תבניות) */
.picker-modal {
  max-width: 56rem;
  height: 85vh;
  padding: 0;
  overflow: hidden;
  /* .modal-box מוסיף gap:1.1rem בין ילדיו. כאן זה יצר פס לבן בין הכותרת
     לגוף, והרקע האפור של רשימת התבניות לא הגיע עד הקצה. */
  gap: 0;
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.picker-body {
  flex: 1;
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  min-height: 0;
}

.picker-list {
  height: 100%;
  overflow-y: auto;
  padding: .75rem;
  display: grid;
  gap: .3rem;
  border-inline-end: 1px solid var(--border);
  background: var(--sunken);
}
.picker-item {
  font-family: inherit;
  text-align: right;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
  cursor: pointer;
  display: grid;
  gap: .15rem;
  transition: background .1s ease, border-color .1s ease;
}
.picker-item:hover { background: var(--surface); }
.picker-item.active { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.picker-item b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.picker-item.active b { color: var(--accent); }
.picker-item span { font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.4; }

/* שכפול בלוק לגיליון אחר - רשימה חד-טורית פשוטה, אין מה להציג בפאנל
   פרטים כמו בבחירת סוג בלוק (בוחרים גיליון, לא רואים תצוגה מקדימה שלו). */
.dup-picker-box { max-width: 30rem; }
.dup-picker-hint { margin: 0; padding: 0 1.5rem; color: var(--ink-faint); font-size: var(--fs-sm); }
.dup-picker-list {
  display: grid;
  gap: .3rem;
  padding: 0 1.1rem 1.3rem;
  max-height: 60vh;
  overflow-y: auto;
}
.dup-picker-row {
  font-family: inherit;
  text-align: right;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  transition: background .1s ease, border-color .1s ease;
}
.dup-picker-row:hover { background: var(--surface); border-color: var(--accent-line); }
.dup-picker-row[disabled] { opacity: .5; cursor: default; }
.dup-picker-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dup-picker-date { font-size: var(--fs-micro); color: var(--ink-faint); white-space: nowrap; }

/* תיאור למעלה, תצוגה מקדימה באמצע, כפתור ההוספה למטה - קודם רואים, אז מחליטים.
   רק אזור התצוגה המקדימה נגלל; הכותרת והכפתור נשארים במקומם. */
.picker-detail {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.picker-empty { margin: auto; color: var(--ink-faint); font-size: var(--fs-base); }
.picker-detail-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  flex: none;
  padding: 1.35rem 1.5rem 1.1rem;
}
.picker-detail-head h4 { font-size: var(--fs-lg); margin: 0; }
.picker-detail-head .tmpl-hint { margin: 0; max-width: none; }
.picker-detail .tmpl-preview-frame {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: block;
  padding: 1.25rem;
  background: var(--sunken);
  border-radius: 0;
  border-top: 1px solid var(--border);
}
.picker-detail .tmpl-preview-iframe {
  display: block;
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  /* גובה התחלתי בלבד - fitPreview() מכווץ לגובה התוכן האמיתי */
  height: 20rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.picker-foot {
  flex: none;
  display: flex;
  justify-content: flex-start;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 44rem) {
  .picker-modal { height: 90vh; }
  .picker-body { grid-template-columns: 1fr; }
  .picker-list { border-inline-end: 0; border-bottom: 1px solid var(--border); max-height: 40%; }
}

/* מודל "איך הרכיב נראה בכלל" - אותה תצוגה מקדימה כמו בעמוד תבניות */
.history-box { max-width: 40rem; max-height: 85vh; padding: 0; overflow: hidden; }
.history-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.history-body .tmpl-preview-frame { padding: 0; background: none; border-radius: 0; }
.history-body .tmpl-preview-iframe { box-shadow: none; }

/* ============================================================
   טוסט — הודעת "נשמר" חולפת, במקום טקסט קבוע בהדר
   ============================================================ */

.toast-host {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  /* בלי תקרה ההודעה נמתחה על כל רוחב המסך בשורה אחת (נמדד 1277px) */
  max-width: min(38rem, calc(100vw - 3rem));
  text-align: start;
  text-wrap: pretty;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: .6rem 1.1rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--ok); }

/* הודעת שגיאה: אייקון אזהרה במקום וי, פס אדום, ונשארת עד שסוגרים אותה.
   כישלון שנעלם לבד אחרי שתי שניות שקול לכישלון שקט. */
.toast-warn { width: 16px; height: 16px; flex-shrink: 0; color: #FF9A8B; }
.toast.err {
  background: #4A1E17;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 154, 139, .35);
  pointer-events: auto;
}
.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-inline-start: .25rem;
  padding: .15rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.toast-close .ico { width: 14px; height: 14px; }
.toast-close:focus-visible { outline: 2px solid #FF9A8B; outline-offset: 1px; }

/* ---------- מספר מיקום הבלוק ---------- */

/* מספר, לא תגית. שקט ליד הידית ומתעדכן חי תוך כדי גרירה. */
.block-num {
  flex-shrink: 0;
  min-width: 1.35rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.block.open .block-num,
.block.dragging .block-num { color: var(--accent); }

/* כפתור אישור על בלוק שעוד לא נפתח - נשאר לחיץ (הלחיצה מסבירה למה לא) */
.approve-btn.needs-open { opacity: .5; }
.approve-btn.needs-open:hover { opacity: .75; }

/* שדה טקסט בתוך מודל אישור (promptDialog) */
.confirm-input { margin: 0 0 .35rem; }
.confirm-input.bad { border-color: var(--danger); }

/* חלון הוספת קישור - שתי תוויות קטנות מעל שני שדות */
.link-fields { display: grid; gap: .15rem; margin-top: .6rem; }
.link-field-label { font-size: var(--fs-xs); color: var(--ink-soft); }
.link-fields .confirm-input { margin: 0 0 .5rem; }
/* תכונת dir לבדה לא מספיקה - direction ב-CSS של שדות הטופס גוברת עליה,
   והכתובת הייתה מוצגת הפוכה ("//:https") */
.link-fields .confirm-input[dir="ltr"] { direction: ltr; text-align: left; }

/* ============================================================
   אסור מילה בודדת בשורה אחרונה - בכל טקסט במוצר
   ============================================================
   כלל רוחבי של גיא: כותרת או פסקה לא נגמרות במילה יתומה. עד עכשיו זה
   הוחל על שלושה סלקטורים ספציפיים, ולכן למשל ההערה במסך "מי עובדת עכשיו"
   נשברה ל"...אפשר להחליף בכל" / "רגע.".
   balance לכותרות - מחלק את השורות שווה. pretty לגוף - מונע יתומה בסוף.
   דפדפן שלא מכיר מתעלם בשקט. */
h1, h2, h3, h4,
.gate-title, .page-head h1, .block-name, .tmpl-nav-name, .issue-title {
  text-wrap: balance;
}
p, .sub, .gate-note, .f-hint, .block-hint, .tmpl-hint, .empty,
.confirm-message, .block-locked-notice, .preview-title, .tmpl-preview-label {
  text-wrap: pretty;
}

/* ============================================================
   כיבוד "צמצום תנועה" של מערכת ההפעלה
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}