/* העוזר — סגנון.
   RTL, נייד תחילה. שפת לוח בסגנון מאנדיי — **קרא DESIGN.md לפני שינוי
   ויזואלי**: שם מפורטות ארבע פלטות שכבר נוסו ונפסלו, והכלל היחיד שחשוב
   (הקבוצה לא צבועה — הסטטוס צבוע).
   ⚠ הפלטה כאן *לא* זהה ל-projects-dashboard. זה כלי אישי, לא דשבורד לקוחות.
   ⚠ מחלקות גנריות (.tag, .note, .card) מתנגשות בקלות — לבדוק לפני שם חדש. */

:root {
  /* ── בסגנון מאנדיי ──
     הדקדוק: הקבוצה **לא** צבועה — הסטטוס צבוע. קודם היה פס אדום מלא
     לקבוצה ובתוכו תגית אדומה, ולכן "דחוף" נבלע. עכשיו הקבוצה היא רקע
     לבן עם פס דק וטקסט צבעוני, והצ'יפ הרווי הוא היחיד שצועק. */

  --ground:  #F6F7FB;   /* רקע הלוח */
  --surface: #FFFFFF;
  --sunk:    #EFF1F6;
  --line:    #E1E4ED;
  /* ⚠ **קו שורה חלש מגבול כרטיס.** יגל דיווח "משבצות מתחברות", והמדידה
     הראתה למה: אותו `--line` בדיוק שימש גם למסגרת הכרטיס וגם למפריד
     בין השורות שבתוכו, ולכן גבול של כרטיס נראה זהה לגבול של שורה —
     ועמודה של כרטיסים נקראה כרצף אחד ארוך. עכשיו הגבול החיצוני חזק
     מהפנימי, וההיררכיה נראית בלי לספור. */
  --line-soft: #EAECF2;
  --hero:    #1F2340;
  --ink:     #323338;
  --soft:    #676879;
  /* ⚠⚠ **`--mute` הוא לרקעים, לנקודות ולפסים — לא לטקסט קטן.**
     נמדד בקנבס בשני המצבים (חובה קנבס: `color-mix` מחושב ל-`color(srgb …)`
     ופרסור ב-regex מחזיר מספרים מומצאים). הרצפה 4.5:1.

       רקע                         --mute        --soft
       לבן (--surface)             3.17  ✗       5.48  ✓
       רקע הדף / גיליון בהיר       2.96  ✗       5.12  ✓
       --sunk                      2.81  ✗       4.85  ✓
       כרטיס כהה (#1E1F29)         4.25  ✗       7.09  ✓
       גיליון כהה (#23252F)        3.96  ✗       6.61  ✓
       סרגל הלשוניות כהה           4.31  ✗       7.18  ✓

     כלומר `--mute` נופל **בשני המצבים**, לא רק בבהיר. התיקון הוחל
     ב-13/08 על מסך השיחה בלבד; מאז הועבר כל טקסט קטן ל-`--soft`.
     שני חריגים מכוונים שנשארו `--mute`, כי שם ההנמכה היא **סימן** ולא
     קישוט: השורה השלישית בתדריך (סולם שלוש-דרגות שננעל בעיצוב) וכותרת
     של משימה שהושלמה (מחוקה בקו). */
  --mute:    #8B90A3;

  --late:  #E2445C;   /* תקוע */
  --now:   #FDAB3D;   /* בעבודה */
  --meet:  #579BFC;   /* מתוזמן */
  --done:  #00C875;   /* בוצע */
  --brand: #6161FF;   /* הצבע האינטראקטיבי */
  --on-f:  #FFFFFF;

  /* ⚠ `-f` הוא **מילוי רך** ולא הצבע עצמו. קודם `--late-f: var(--late)`,
     וב-.seg הכפתור הנבחר קיבל רקע וטקסט באותו ערך בדיוק — התווית
     נעלמה. המילוי תמיד גוון שקוף, הטקסט תמיד הצבע המלא. */
  --tint: 13%;
  --late-f: color-mix(in srgb, var(--late) var(--tint), transparent);
  --now-f:  color-mix(in srgb, var(--now)  var(--tint), transparent);
  --meet-f: color-mix(in srgb, var(--meet) var(--tint), transparent);
  --done-f: color-mix(in srgb, var(--done) var(--tint), transparent);

  --accent: var(--brand);
  --fab:    var(--brand);
  --danger: var(--late);
  --ok:     var(--done);
  --warn:   var(--now);

  /* ── הכפתור הראשי ──
     ⚠ היה `--hero` (כחול-דיו) בבהיר, ולכן "שמור" בגיליון היה כהה בזמן
     ש"שלח" במחבר כבר היה סגול המותג — שני צבעים לאותו תפקיד בדיוק.
     עכשיו שניהם המותג, בשני המצבים. הנימוק המקורי נשמר: בכהה זה גם
     ממילא לא לבן, כי ריבוע לבן בלילה הוא פנס. */
  --on-brand:  #FFFFFF;
  --invert-bg: var(--brand);
  --invert-fg: var(--on-brand);
  --toast-bg:  var(--hero);
  --toast-fg:  var(--ground);
  --sheet-bg:  var(--ground);
  --scrim:     rgba(20, 24, 26, .5);

  --r: 8px;
  --pad: 16px;
  --shadow: 0 1px 2px rgba(31,35,64,.05), 0 6px 16px -10px rgba(31,35,64,.22);

  --display: 'Rubik', -apple-system, system-ui, sans-serif;
  --he: 'Rubik', -apple-system, system-ui, sans-serif;
  --num: 'Rubik', -apple-system, system-ui, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);

  --s1: #E2445C; --s2: #FDAB3D; --s3: #00C875; --s4: #579BFC;
  --s5: #A25DDC; --s6: #FF6B8B; --s7: #00D2D3;
}

/* ─────────────── מצב כהה ───────────────
   ⚠ הבלוק מופיע **פעמיים בכוונה** ושתי העותקים חייבים להישאר זהים.
   ה-CSP אוסר סקריפט מוטבע, ולכן אין דרך לקבוע `data-theme` לפני
   הציור הראשון — מודול ה-JS נטען אחרי. אילו ההיפוך היה תלוי ב-JS
   בלבד, מי שהמכשיר שלו כהה היה מקבל הבזק לבן בכל טעינה, בדיוק בשעה
   שבגללה המצב הזה קיים. לכן: ברירת המחדל (`מערכת`) היא CSS טהור
   דרך `prefers-color-scheme`, וה-JS נוגע רק כשיש בחירה מפורשת —
   ולכן גם `:not([data-theme="light"])`, שמאפשר "בהיר" על מכשיר כהה.

   הגוונים לא זהים לבהיר: על רקע כהה #E2445C יורד ל-3.5:1 מול הרקע,
   ולכן ארבעת צבעי הסטטוס עולים בבהירות. הרוויה יורדת — צבע רווי על
   שחור "רוטט" ומכביד על העין בקריאה ארוכה. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ⚠ הרקע הוכהה מ-#15161C ל-#101116 (14/08). המדידה: כרטיס מול רקע
       היה 1.10:1 — כמעט אותו צבע — והכרטיס נקרא ככרטיס רק בזכות
       מסגרת של 1px. בבהיר ההפרדה מגיעה מה**צל**, וצל שחור על
       #15161C אינו נראה כלל, ולכן אותו קוד נתן שתי תוצאות שונות.
       עכשיו 1.15:1 + מסגרת חזקה מקו-השורה. ראה --line-soft. */
    --ground: #101116; --surface: #1E1F29; --sunk: #2A2C38; --line: #33364A;
    --line-soft: #292B39;
    --hero: #F1F2F8; --ink: #DCDEEA; --soft: #A5AABF; --mute: #7C8199;

    --late: #FF6E80; --now: #FFC062; --meet: #7FB6FF; --done: #3ADD97;
    --brand: #8A8AFF;
    --on-f: #12131A;      /* טקסט על צ'יפ רווי — לבן על התכלת הבהירה נמחק */
    --tint: 20%;

    --on-brand:  #12131A;
    --invert-bg: var(--brand);
    --invert-fg: var(--on-brand);
    --toast-bg:  #2E3142;
    --toast-fg:  var(--hero);
    --sheet-bg:  #23252F;  /* הגיליון **מעל** הדף, לכן בהיר ממנו */
    --scrim:     rgba(0, 0, 0, .62);

    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.9);
    --s1: #FF6E80; --s2: #FFC062; --s3: #3ADD97; --s4: #7FB6FF;
    --s5: #BC8AEA; --s6: #FF93AC; --s7: #4FE2E3;
  }
}

:root[data-theme="dark"] {
  /* ⚠ העותק השני של הבלוק הכהה — חייב להישאר זהה לראשון. ראה DESIGN.md. */
  --ground: #101116; --surface: #1E1F29; --sunk: #2A2C38; --line: #33364A;
  --line-soft: #292B39;
  --hero: #F1F2F8; --ink: #DCDEEA; --soft: #A5AABF; --mute: #7C8199;

  --late: #FF6E80; --now: #FFC062; --meet: #7FB6FF; --done: #3ADD97;
  --brand: #8A8AFF;
  --on-f: #12131A;
  --tint: 20%;

  --on-brand:  #12131A;
  --invert-bg: var(--brand);
  --invert-fg: var(--on-brand);
  --toast-bg:  #2E3142;
  --toast-fg:  var(--hero);
  --sheet-bg:  #23252F;
  --scrim:     rgba(0, 0, 0, .62);

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.9);
  --s1: #FF6E80; --s2: #FFC062; --s3: #3ADD97; --s4: #7FB6FF;
  --s5: #BC8AEA; --s6: #FF93AC; --s7: #4FE2E3;
}

/* טפסים, פסי גלילה ובוררי תאריך מקוריים הולכים אחרי `color-scheme`,
   לא אחרי המשתנים שלנו. בלי זה שדה `date` בגיליון נשאר לבן זוהר. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

* { box-sizing: border-box; }

/* ⚠ חייב לבוא לפני כל שאר הכללים ועם !important.
   ל-[hidden] יש ספציפיות אפס, וכל כלל מחלקה עם display (כמו
   .login{display:grid}) גובר עליו — כך שהאלמנט "מוסתר" נשאר על המסך.
   זה בדיוק מה שקרה: טופס ההתחברות נשאר גלוי אחרי כניסה מוצלחת. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--he);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

h1, h2, h3 { color: var(--hero); margin: 0; font-weight: 700; text-wrap: balance; }


/* מספרים תמיד במונו ובעמודות מיושרות */
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

button, input, textarea { font: inherit; color: inherit; }

/* ─────────────── התחברות ───────────────
   שדה בגוון המותג, לא כרטיס צף על אפור. */

.login {
  min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 0;
  background: #6161FF;
  color: #FFF;
  position: relative; overflow: hidden;
}
.login::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 50% at 88% 4%,   rgba(87,155,252,.55), transparent 62%),
    radial-gradient(85% 55% at 8% 96%,   rgba(162,93,220,.50), transparent 62%),
    radial-gradient(70% 45% at 96% 92%,  rgba(0,200,117,.30),  transparent 60%);
  pointer-events: none;
}

.loginCard {
  position: relative; z-index: 1; align-self: center;
  width: min(100%, 25rem); margin-inline: auto;
  padding: 32px 26px;
  display: flex; flex-direction: column; gap: 15px;
  background: none; border: none; box-shadow: none; border-radius: 0;
}

.loginTitle {
  font-size: clamp(2.6rem, 14vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em; font-weight: 600;
  color: #FFF; margin-bottom: 0;
}
.loginSub {
  margin: 0 0 16px;
  font-size: .95rem; color: rgba(255,255,255,.75); letter-spacing: 0;
}

.login .field span {
  font-size: .78rem; font-weight: 600; letter-spacing: 0;
  color: rgba(255,255,255,.75);
}
.login .field input {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  padding: 14px 13px; min-height: 52px;
  color: #FFF; font-size: 1.05rem;
  transition: border-color .18s ease, background .18s ease;
}
.login .field input::placeholder { color: rgba(255,255,255,.45); }
.login .field input:focus-visible {
  outline: none; border-color: #FFF; background: rgba(255,255,255,.16);
}

.login .btnPrimary {
  margin-top: 10px; min-height: 56px;
  background: #FFF; color: #6161FF; border-color: #FFF;
  font-size: 1.05rem; font-weight: 700; border-radius: 8px;
}
.login .err { color: #FFE1E6; font-weight: 600; }

.loginFoot {
  position: relative; z-index: 1;
  padding: 0 26px calc(26px + var(--safe-b));
  font-size: .72rem; color: rgba(255,255,255,.45);
  display: flex; justify-content: space-between; gap: 10px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

/* ─────────────── שלד ─────────────── */

.view {
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad) calc(104px + var(--safe-b));
  max-width: 40rem;
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 12px;
}

.head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.head h1 { font-size: 1.45rem; letter-spacing: -.02em; }
/* ⚠ `--soft` ולא `--mute` — 0.8rem הוא טקסט קטן, וב-`--mute` הוא 2.96:1
   על רקע הגיליון. ראה הטבלה ליד `--mute`. `.headNote` נושא גם הודעות
   מצב ("אין קבצים", "טוען…", הסבר הפגישה), ולא רק הערות שוליים. */
.headNote { font-size: .8rem; color: var(--soft); }


/* ─────────────── התדריך ───────────────
   המסך הראשון. משפטים, לא רשת מספרים — אדם שעומד ליד הרכב עם יד אחת
   קורא משפט, הוא לא מפענח ארבעה ריבועים. */

.dateline {
  font-size: .78rem; font-weight: 500; letter-spacing: 0;
  color: var(--soft); margin: 0;      /* ראה הטבלה ליד --mute: 2.96:1 */
}

.brief {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 2px;
}
.brief p {
  margin: 0;
  font-size: 1.22rem; line-height: 1.4; font-weight: 600;
  color: var(--hero); letter-spacing: -.01em;
  text-wrap: balance;
}
.brief p + p { font-size: 1rem; font-weight: 400; color: var(--soft); }
.brief p + p + p { font-size: 1rem; color: var(--mute); font-weight: 400; }
.brief b { color: var(--danger); font-weight: 700; }

.rule { height: 1px; background: var(--line); margin: 4px 0 0; }

/* ─────────────── הרשימה ───────────────
   קבוצה = כרטיס לבן עם פס צבע דק, שורות מופרדות בקווי שיער. */

/* ⚠ המרווח על **כל** קבוצה ולא רק על קבוצה צבועה. הוא ישב על
   `.sect[data-tone]` בלבד, וקבוצה בלי גוון — "בלי תאריך", תוצאות חיפוש —
   נדבקה למה שמתחתיה בלי שום רווח. הקבוצות יושבות בתוך div רגיל ולא
   בתוך `.view`, ולכן ה-`gap` של הפריסה לא חל עליהן כלל. */
/* ⚠ 16 ולא 12: המרווח בין כרטיסים היה כמעט זהה למרווח בין שורות בתוך
   כרטיס, ושתי מידות כמעט-זהות נקראות כמו רשת אחת ולא כמו שתי רמות.
   זה החלק השני של "משבצות מתחברות" — ראה --line-soft. */
.sect { display: flex; flex-direction: column; margin-bottom: 16px; }
.sectHead {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; font-weight: 600; letter-spacing: 0;
  color: var(--tone, var(--soft));
  background: var(--surface);
  padding: 11px 14px; margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line-soft);
}
/* המונה כצ'יפ שקוף בגוון הקבוצה — מאנדיי סופר ליד השם, לא בקצה */
.sectHead b {
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--tone, var(--mute)) 14%, transparent);
  padding: 2px 8px; border-radius: 99px;
}
/* קבוצה בלי סטטוס — "בלי תאריך", תוצאות חיפוש. מקבלת כרטיס ככל קבוצה,
   אבל הכותרת ב-`--soft` (5.9:1) ולא ב-`--mute` (3.1:1). הפס שלה
   מנוטרל מיד אחרי הכלל של הכרטיס — ראה שם. */
.sect[data-tone="none"] { --tone: var(--soft); }
.sect[data-tone="late"] { --tone: var(--late); }
.sect[data-tone="now"]  { --tone: var(--now); }
.sect[data-tone="meet"] { --tone: var(--meet); }
.sect[data-tone="done"] { --tone: var(--done); }

/* ⚠ הפס הצבעוני על הקבוצה כולה, כמו לוח במאנדיי — לא על כל שורה.
   זה החריג המכוון לכלל "בלי מסגרת צבעונית בצד": הבריף נועל את השפה. */
/* ⚠ הפס נחתך בפינות כי הוא היה צר ב-2px מהמסגרת שסביבו והגבול הציץ.
   ההורה חותך (overflow+radius) והפס עצמו בלי רדיוס ובלי שוליים.
   ⚠⚠ כלל אחד בלבד. היו כאן שניים, והשני פתח ב-`border: 1px solid`
   שדרס את `border-inline-start` של הראשון — הפס הצבעוני פשוט לא צויר,
   בשני המצבים. זה הכלל המרכזי של DESIGN.md, ולכן `border-inline-start`
   חייב להישאר **אחרי** ה-`border` הכללי. */
.sect[data-tone] {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--tone);
  border-radius: 10px; overflow: hidden;
  /* ⚠ בלי `margin-bottom` כאן. הוא היה 10px ודרס את 12 של `.sect`
     (ספציפיות גבוהה יותר), כך שהמרווח בין קבוצות היה קטן מהמרווח שבין
     שאר חלקי המסך — ושתי מידות כמעט־זהות נראות כמו שגיאה. מידה אחת. */
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sect[data-tone] .row { padding-inline: 12px; }
.sect[data-tone] .sectHead { border-radius: 0; margin: 0; }
/* ⚠ **אחרי** הכלל שמעל, אחרת `border-inline-start` שם דורס אותו:
   קבוצה בלי סטטוס לא מקבלת פס צבעוני — צבע בלי משמעות הוא בדיוק מה
   שהכלל המרכזי של DESIGN.md אוסר. */
.sect[data-tone="none"] { border-inline-start-color: var(--line); }

.row {
  display: grid;
  grid-template-columns: 21px 1fr auto;
  gap: 0 11px; align-items: start;
  padding: 10px 0;
  /* ⚠ `--line-soft` ולא `--line`: המפריד **בתוך** הכרטיס חייב להיות
     חלש מהמסגרת שסביבו, אחרת גבול של שורה וגבול של כרטיס נראים זהה. */
  border-top: 1px solid var(--line-soft);
}
.sect .row:first-of-type { border-top: none; }

.check {
  grid-row: 1 / span 2;
  /* ⚠ שטח המגע גדל דרך ::after ולא דרך padding שלילי. padding+margin
     שלילי משכו את הריבוע אל מחוץ לריפוד המקטע והוא ישב על הגבול. */
  width: 20px; height: 20px; margin-top: 3px; padding: 0;
  position: relative;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) { .check:hover { border-color: var(--accent); } }
.check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check::after {
  content: ""; position: absolute; inset: -12px;
}
.check svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6);
             transition: opacity .16s ease, transform .16s cubic-bezier(.16,1,.3,1); }
.row[data-done="1"] .check { background: var(--ok); border-color: var(--ok); }
/* ⚠ הווי חייב להיות מותנה. היה כאן כלל `.check svg{opacity:1}` בלי תנאי,
   והוא ניצח את ה-0 שמעליו — הווי צויר גם בתיבה ריקה. בבהיר הוא לבן על
   לבן ולכן איש לא ראה, אבל ברגע שהצבע נגזר מהערכה זו הייתה תיבה
   מסומנת־למראית־עין. `currentColor` ולא `#fff`: על ירוק בהיר במצב כהה
   לבן נמחק. */
.row[data-done="1"] .check svg { opacity: 1; transform: scale(1); }
.row[data-done="1"] .check { color: var(--on-f); }

.rowTitle {
  font-size: 1rem; line-height: 1.4; font-weight: 500; color: var(--hero);
  overflow-wrap: anywhere;
}

/* שורת יומן: אין תיבת סימון, ולכן אין גם עמודה בשבילה. השארת עמודה
   ריקה של 21px יצרה הזחה שנראתה כמו באג יישור. */
.calRow { grid-template-columns: 1fr auto; }
.calRow .rowTitle { grid-column: 1; grid-row: 1; }
.calRow .when     { grid-column: 2; grid-row: 1; }
.calRow .meta     { grid-column: 1 / -1; grid-row: 2; }

/* ⚠ זימון מול פגישה שלי. יגל ביקש "הבחנה של זימונים ופגישות שאני קבעתי",
   והסיבה מעשית: רק את השנייה מותר וניתן לערוך. שבב שקוף ולא רווי —
   הצ׳יפ הרווי שמור ל"דחוף", וזו תווית סיווג ולא התרעה. */
.calTag {
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  color: color-mix(in srgb, var(--meet) 70%, var(--hero));
  background: color-mix(in srgb, var(--meet) 14%, transparent);
}
.calTag[data-mine="0"] {
  color: var(--soft);
  background: color-mix(in srgb, var(--soft) 13%, transparent);
}
.row[data-done="1"] .rowTitle { color: var(--mute); text-decoration: line-through; }

/* התאריך בעמודה משלו ומיושר — כך העין סורקת מועדים בלי לקרוא כותרות */
.when {
  grid-column: 3; grid-row: 1;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: .75rem; color: var(--soft); white-space: nowrap; padding-top: 3px;
}
/* ⚠ הצבע חייב להגיע לשורה עצמה. קודם שורה באיחור נראתה זהה לרגילה
   וההבדל היחיד היה תאריך ב-12px בפינה — בניגוד לדרישה ש"דחיפות
   נקראית בלי לקרוא". */
.row[data-late="1"] .rowTitle { color: var(--ink); font-weight: 500; }

.row[data-late="1"] .when { color: var(--late); font-weight: 600; }
.row[data-done="1"] .check { background: var(--done); border-color: var(--done); }
/* איחור מנצח פגישה — הכלל הזה חייב לבוא אחרי כלל הפגישה */
.row[data-meet="1"] .when {
  color: var(--on-f); background: var(--meet); font-weight: 600;
  padding: 3px 9px; border-radius: 99px; margin-top: 1px;
}
.row[data-late="1"][data-meet="1"] .when { background: var(--late); }

/* שורה שנייה אחת: פרויקט, דחיפות ופעולות יחד. פעולות בשורת גריד נפרדת
   הכפילו את גובה השורה, ורק שלוש משימות נכנסו למסך — בכלי שכל מהותו
   סריקה מהירה זה כישלון. */
/* ⚠ `--soft`: השורה הזאת נושאת מיקום ומספר קבצים — מידע ולא קישוט —
   ב-0.75rem, ו-`--mute` נתן שם 3.17:1 בבהיר ו-4.25:1 בכהה. */
.meta {
  grid-column: 2; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px;
  font-size: .75rem; color: var(--soft); padding-top: 2px;
}

/* ⚠ סימון דחיפות כנקודה ולא כמסגרת צבעונית בצד הכרטיס — מסגרת עבה
   בצד היא אחת מברירות המחדל שהעיצוב הזה מסרב להן. */
/* הצ'יפ הוא האלמנט הרווי היחיד במסך. קודם הוא ישב על פס אדום ונבלע. */
/* ⚠ לא מקונן תחת .meta: אותו צ׳יפ מופיע גם ב-.taskMeta שבתצוגת המשימה,
   ושם הוא ירד לטקסט אפור בלי רקע — כלומר "דחוף" הפסיק לצעוק בדיוק
   במסך שנפתח כדי להבין מה דחוף. */
.urgent {
  color: var(--on-f); background: var(--late); font-weight: 600;
  padding: 3px 10px; border-radius: 99px; font-size: .72rem;
  letter-spacing: .01em;
}

/* פעולות שקטות: אותו גודל כמו המטא, בלי צבע שמתחרה בשם הפרויקט
   ⚠ `--soft` ולא `--mute`. אלה **פקדים** — "ערוך", "רענן", "הסר",
   "כל הפרויקטים" — ו-3.17:1 על פקד גרוע יותר מ-3.17:1 על תווית.
   הווריאנטים עם `data-act` כבר נמדדו ותוקנו (5.5–7.0 בבהיר). */
.link {
  background: none; border: none; cursor: pointer;
  padding: 9px 5px; margin: -9px -5px;
  font: inherit; font-size: .75rem; font-weight: 500; color: var(--soft);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--soft) 45%, transparent);
  text-align: start;
}
/* חזרה למסך הקודם. ⚠ החץ הוא SVG ולא התו `›` — `Bidi_Mirrored` מתהפך
   ב-RTL והחץ הצביע קדימה במקום אחורה (DESIGN.md מלכודת 12). הקו התחתון
   על המילים בלבד: קו מתחת לחץ נראה כמו שובר בפריסה. */
.linkBack { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.linkBack svg { flex: none; }
.linkBack span {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--soft) 45%, transparent);
}
/* ⚠ הקישורים בשורת המשימה נצבעים **לפי מה שהם עושים**, לא כדי להיות
   צבעוניים: יומן=תכלת (כמו כל פגישה במערכת), דחייה=כתום (הגוון של
   "בעבודה"), מחיקה=אדום. אפור נשאר ברירת המחדל לפעולה נטולת משמעות. */
.link[data-act="cal"]   { color: color-mix(in srgb, var(--meet) 55%, var(--hero)); }
.link[data-act="snooze"]{ color: color-mix(in srgb, var(--now) 46%, var(--hero)); }
.link[data-act="del"]   { color: color-mix(in srgb, var(--late) 62%, var(--hero)); }
.link[data-act] {
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  font-weight: 600;
}
@media (hover: hover) { .link:hover { color: var(--accent); } }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.spec {
  grid-column: 2 / -1; grid-row: 3;
  margin: 8px 0 2px; padding: 11px 12px;
  background: var(--sunk); border-radius: 9px;
  font-size: .875rem; color: var(--soft); line-height: 1.65;
  white-space: pre-wrap;
}


/* ─────────────── סימון פרויקט ───────────────
   כל פרויקט מקבל גוון אבן קבוע. אחרי כמה ימים מזהים את "קמילה" לפי הצבע
   ולא לפי קריאת השם — וזו בדיוק המהירות שהמסך הזה קיים בשבילה. */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--soft); font-weight: 600;
}
.chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--stone, var(--mute));
  flex: none;
}

/* ─────────────── מסך השיחה ───────────────
   המסך היחיד באפליקציה שאינו רשימה. הוא חייב שלושה דברים שרשימה לא
   צריכה: שרשור שגדל כלפי מטה, מחבר שתמיד בהישג אגודל, וגישה לשיחות
   קודמות. הכול נשאר בשפת מאנדיי — משטחים לבנים, פינות 8, צ׳יפ רווי
   כאלמנט הצועק היחיד. */

.chatView {
  /* המחבר מקובע, ולכן הריפוד התחתון מפנה לו מקום ולא "בערך מקום".
     נמדד בדפדפן: מחבר 102 (שבב המודל + שורת הקלט) + לשוניות 67,
     ועוד נשימה כדי שההודעה האחרונה לא תיגע במחבר. */
  padding-bottom: calc(186px + var(--safe-b));
  gap: 0;
}

.chatBar {
  position: sticky; top: 0; z-index: 12;
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 8px;
  padding: 6px 0 12px;
  background: linear-gradient(var(--ground) 88%, transparent);
}
.chatIcon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, border-color .15s ease;
}
@media (hover: hover) { .chatIcon:hover { color: var(--accent); border-color: var(--accent); } }
.chatIcon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⚠ `.modeSeg` (בורר "משימה"/"שאלה") הוסר ב-14/08 — ראה ההערה מעל
   `viewCapture` ב-app.js. במקומו יושב שם השיחה, שהיה חסר: אחרי חזרה
   מהיסטוריית השיחות לא היה שום סימן באיזו שיחה עומדים. */
.chatName {
  min-width: 0;
  text-align: center;
  font-size: .84rem; font-weight: 600; color: var(--soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── השרשור ── */

.thread { display: flex; flex-direction: column; gap: 10px; }

.msg { max-width: 86%; animation: msgIn .34s cubic-bezier(.16,1,.3,1); }
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } }

.msg p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }

/* השאלה: גלולה בגוון המותג, צמודה לצד שממנו כותבים */
.msgUser {
  align-self: flex-start;
  background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--hero);
  padding: 10px 14px;
  border-radius: 16px 16px 5px 16px;
  font-size: .95rem; font-weight: 500;
}

/* התשובה: כרטיס מלא רוחב. תשובה של הסוכן היא לרוב רשימה, וגלולה
   צרה מצד אחד הייתה מבזבזת שליש משורה על מסך 375. */
.msgBot {
  align-self: stretch; max-width: 100%;
  background: var(--surface);
  /* ⚠ 1px בלבד. מסגרת צבעונית עבה בצד היא בדיוק מה ש-craft-floor אוסר,
     והפס העבה של הקבוצות ב"היום" הוא החריגה המודעת היחידה. */
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  padding: 13px 15px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 9px;
  font-size: .95rem;
}
/* ── שבב המקור ──
   הצבע היחיד שחוזר בכל תשובה, ולכן הוא זה שצובע את השיחה בפועל.
   מילוי רך + טקסט בגוון מלא — אותה נוסחה כמו הצ׳יפים בשאר האפליקציה,
   ולא ריבוע רווי שמתחרה בטקסט התשובה. */
.srcChip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  /* ⚠ 48% ולא 58%: הירוק (--done) נתן 4.18:1 בבהיר, ממש מתחת לרצפה.
     ירוק רווי הוא תמיד הגוון שנופל ראשון בניגודיות. */
  color: color-mix(in srgb, var(--tone) 48%, var(--hero));
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
}
.srcChip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 84%, var(--hero));
}

.msgMeta {
  /* ⚠ --soft ולא --mute: 0.68rem הוא טקסט קטן, ו--mute על לבן הוא 3.1:1
     בלבד — מתחת לרצפה של 4.5:1. --soft נותן 5.9:1. */
  font-size: .68rem; font-weight: 600; color: var(--soft);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* המשימות שנוצרו — לחיצות, לא סיכום מת */
.msgTasks { display: flex; flex-direction: column; gap: 6px; }
.msgTask {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: start;
  padding: 9px 11px; border-radius: 9px;
  background: var(--sunk); border: 1px solid transparent;
  font: inherit; cursor: pointer;
  transition: border-color .15s ease;
}
@media (hover: hover) { .msgTask:hover { border-color: var(--accent); } }
.msgTask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msgTaskTitle { font-size: .9rem; font-weight: 500; color: var(--hero); }
.msgTaskWhen {
  font-size: .74rem; color: var(--soft); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ממתין לתשובה */
.typing { display: flex; gap: 5px; padding: 3px 0; }
/* המונה מתחת לנקודות ההקלדה — שקיפות בהמתנה ארוכה */
.pendNote { margin: 6px 0 0; font-size: .72rem; color: var(--soft); min-height: 1em; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mute); opacity: .45;
  animation: blink 1.15s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 40% { opacity: 1; transform: translateY(-3px); } }

/* ── מסך ריק ── */

.chatEmpty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 8px 10px; text-align: center;
}
.chatHello {
  margin: 0;
  font-size: 1.6rem; line-height: 1.2; font-weight: 700;
  letter-spacing: -.02em; color: var(--hero);
}
.chatEmptyLine {
  margin: 0 0 6px; max-width: 26ch;
  font-size: 1.02rem; line-height: 1.55; font-weight: 500; color: var(--soft);
}
/* ⚠ הצבע כאן **מסמן מקור נתונים**, לא מקשט: אותו גוון חוזר בנקודה של
   שאלת הפתיחה המתאימה. זה אותו דקדוק שלפיו "דחוף" אדום ו"פגישה" תכלת
   בשאר המסכים — צבע שאפשר ללמוד ולזהות, ולא הדגשה יפה. */
/* ⚠ הגוון הגולמי נכשל בניגודיות כטקסט: `--meet` (#579BFC) על הרקע
   הבהיר הוא 2.6:1 בלבד, והמילה כאן היא 16px מודגש — כלומר טקסט רגיל
   שדורש 4.5:1. המיזוג עם `--hero` מכהה אותו בבהיר **ומבהיר אותו בכהה**,
   כי `--hero` מתהפך בין המצבים. גוון אחד, שני מצבים, בלי טבלה שנייה. */
.srcWord {
  color: color-mix(in srgb, var(--tone) 58%, var(--hero));
  font-weight: 700;
}

.openers { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 20rem; }
.opener {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--hero);
  font-size: .9rem; font-weight: 500; text-align: start; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.openerDot {
  width: 8px; height: 8px; border-radius: 3px; flex: none;
  /* מכהה מעט גם כאן: התכלת הגולמית נותנת 2.8:1 מול הכרטיס הלבן, מתחת
     ל-3:1 שנדרש מסימן שנושא משמעות. */
  background: color-mix(in srgb, var(--tone) 84%, var(--hero));
}
@media (hover: hover) {
  .opener:hover {
    border-color: var(--tone, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--accent)) 12%, transparent);
  }
}
.opener:active { transform: scale(.985); }
.opener:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "ערוך את ההצעות" — פעולה על הרשימה, לא פריט בה. מגיע בלי נקודת גוון
   ובמשקל חלש יותר כדי שלא ייקרא כהצעה רביעית. */
.openerEdit {
  justify-content: center;
  border-style: dashed; background: transparent;
  color: var(--soft); font-size: .82rem;
}

/* ── המחבר ──
   ⚠ מקובע מעל סרגל הלשוניות, ומעל המקלדת כשהיא פתוחה: --kb מתעדכן
   מ-visualViewport ב-app.js. באייפון המקלדת מקטינה את ה-visual viewport
   ולא את ה-layout viewport, ולכן `bottom: 0` נשאר במקום שכבר לא נראה. */

.composer {
  position: fixed; z-index: 22;
  inset-inline: 0;
  bottom: calc(var(--kb, 0px) + 62px + var(--safe-b));
  margin-inline: auto; max-width: 40rem;
  display: flex; flex-direction: column; gap: 7px;
  padding: 7px var(--pad) 9px;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
/* כשהמקלדת פתוחה הלשוניות ממילא מוסתרות — המחבר יורד עד הקצה */
:root[data-kb="1"] .composer { bottom: var(--kb, 0px); }
:root[data-kb="1"] .tabs { display: none; }

.cRow { display: flex; align-items: flex-end; gap: 7px; }

/* ── שבב המודל ──
   תמיד גלוי מעל תיבת הכתיבה. השאלה "באיזה מודל אני משתמש" נשאלה
   במפורש, והתשובה חייבת להיות במקום שבו לוחצים שלח — לא במסך הגדרות.
   לחיצה מחליפה דרגה, כך שהתשובה והבקרה הן אותו אלמנט. */
.modelChip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .72rem; font-weight: 600; color: var(--soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: border-color .15s ease, color .15s ease;
}
/* שטח מגע 44px בלי להגדיל את השבב — אותה תבנית כמו ב-.check */
.modelChip::after { content: ""; position: absolute; inset: -10px -6px; }
.modelChip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .modelChip:hover { border-color: var(--accent); color: var(--hero); } }

.modelDot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--mute);
}
.modelChip[data-tier="deep"] { color: var(--hero); border-color: var(--brand); }
.modelChip[data-tier="deep"] .modelDot { background: var(--brand); }
.modelTier {
  padding: 1px 7px; border-radius: 99px;
  background: var(--sunk); color: var(--soft); font-size: .68rem;
}
.modelChip[data-tier="deep"] .modelTier {
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand);
}

.cInput {
  flex: 1; min-width: 0;
  min-height: 44px; max-height: 132px; resize: none;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  font-size: 1rem; line-height: 1.45;
}
.cInput:focus-visible { outline: none; border-color: var(--accent); }
/* placeholder נמדד כטקסט גוף — --mute נפל ב-3.1:1 */
.cInput::placeholder { color: var(--soft); }

.cMic, .cSend {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
/* המיקרופון הוא הפעולה הראשית של הכלי — "מדבר, לא מקליד". הוא לובש
   את גוון המותג במנוחה, ורק בהקלטה הוא נהיה רווי ואדום. */
.cMic {
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand);
}
.cMic:active, .cSend:active { transform: scale(.94); }
.cMic:disabled { opacity: .4; cursor: not-allowed; }
.cSend {
  border: none; background: var(--brand); color: var(--on-brand);
}
.cSend:disabled { background: var(--sunk); color: var(--mute); cursor: not-allowed; }
.cMic:focus-visible, .cSend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* מקליט: המיקרופון נהיה האלמנט הרווי היחיד במסך, והוא פועם */
.composer[data-live="1"] .cMic {
  background: var(--late); border-color: var(--late); color: var(--on-f);
  animation: micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse {
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--late) 22%, transparent); }
}

/* ── שיחות קודמות ── */

.chatList { display: flex; flex-direction: column; gap: 7px; }
/* שבב סוג השיחה — הקלטה שיצרה משימות מול שאלה לסוכן. אותו דקדוק צבע
   כמו בשאר המערכת: הגוון מסמן מקור. */
.chatKind {
  margin-inline-start: 7px; padding: 1px 7px; border-radius: 99px;
  font-size: .66rem; font-weight: 700;
  color: color-mix(in srgb, var(--tone) 58%, var(--hero));
  background: color-mix(in srgb, var(--tone) 13%, transparent);
}
.chatItem {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; overflow: hidden;
}
.chatOpen {
  flex: 1; min-width: 0; text-align: start;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; background: none; border: none;
  font: inherit; cursor: pointer;
}
.chatTitle {
  font-size: .95rem; font-weight: 500; color: var(--hero);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chatWhen { font-size: .74rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.chatOpen:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.chatDel {
  flex: none; padding: 0 14px;
  background: none; border: none; border-inline-start: 1px solid var(--line);
  /* ⚠ `--soft`: זו פעולה הרסנית, ו-3.17:1 על "מחק" הוא בדיוק המקום
     שבו לא רוצים שמישהו יפספס מה הוא לוחץ. ראה הטבלה ליד --mute. */
  color: var(--soft); font: inherit; font-size: .8rem; cursor: pointer;
}
@media (hover: hover) { .chatDel:hover { color: var(--late); } }
.chatDel:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* ─────────────── כפתורים והודעות ─────────────── */

.btn {
  padding: 13px 18px; min-height: 48px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--hero);
  font-weight: 600; cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btnPrimary { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.btnRow { display: flex; gap: 10px; }
.btnRow .btn { flex: 1; }

.err { color: var(--danger); font-size: .85rem; margin: 0; }
/* הסבר כישלון הקלטה נשאר על המסך. טוסט נעלם אחרי שניות, וכאן דווקא
   צריך לקרוא הוראה בת שתי שורות ואז ללכת להגדרות המכשיר. */
.headNote[data-err="1"] { color: var(--danger); font-weight: 500; line-height: 1.5; }
/* ⚠ `--soft`: 0.9rem הוא 14.4px, כלומר "טקסט קטן" לכל דבר, וזה גם
   המשפט היחיד על המסך במצב ריק ("אין משימות פתוחות", "טוען…"). */
.empty { color: var(--soft); font-size: .9rem; text-align: center; padding: 26px 0; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
/* ⚠ `--soft`: 0.74rem עם ריווח אותיות הוא הכותרת של הכרטיס, לא רקע. */
.cardTitle { font-size: .74rem; font-weight: 700; color: var(--soft); letter-spacing: .08em; }

/* ─────────────── בורר המראה ───────────────
   שורה קטנה בתחתית מסך "שימוש". יגל ביקש שיהיה קטן ומוסתר — ברירת
   המחדל היא ממילא "מערכת", כך שרוב הזמן אין סיבה לגעת בו.
   ⚠ שטח המגע גדל דרך ::after ולא דרך גובה הכפתור — אותה מלכודת בדיוק
   כמו ב-.check: ריפוד שלילי מושך את הכפתור אל מחוץ לשורה. */

.lookRow {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  /* ⚠ `--soft` בשני אלה: 0.72rem, והכפתורים הם **פקדים** שבוחרים בהם
     מצב תצוגה. ראה הטבלה ליד --mute. הנבחר נשאר --hero, ולכן ההבחנה
     בין נבחר ללא-נבחר לא נשחקה. */
  margin-top: 6px; font-size: .72rem; color: var(--soft);
}
.lookRow > span { margin-inline-end: 3px; }
.miniPill {
  position: relative;
  padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: none;
  font-size: .72rem; font-weight: 600; color: var(--soft); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.miniPill::after { content: ""; position: absolute; inset: -9px; }
.miniPill[aria-pressed="true"] { color: var(--hero); border-color: var(--soft); }
.miniPill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─────────────── שימוש ─────────────── */

.meter { height: 9px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
.meterFill {
  height: 100%; background: var(--accent); border-radius: 99px;
  transform-origin: right center;   /* RTL: המד מתמלא מימין */
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.meter[data-state="warn"] .meterFill { background: var(--warn); }
.meter[data-state="blocked"] .meterFill { background: var(--danger); }

/* ⚠ grid ולא flex: ב-flex כל זוגות ה-dt/dd נדחסים לשורה אחת ומתקפלים
   באמצע מילה. שתי עמודות — תווית מימין, ערך משמאל, שורה לכל זוג. */
.kv {
  display: grid; grid-template-columns: 1fr auto;
  gap: 7px 14px; margin: 0; font-size: .88rem; align-items: baseline;
}
.kv dt { color: var(--soft); }
.kv dd {
  margin: 0; font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--hero); text-align: start; white-space: nowrap;
}

.bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.bar[data-zero="1"] { background: var(--line); }

/* ─────────────── טאבים ─────────────── */

.tabs {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
/* ⚠ `--soft` ולא `--mute` — **זה הניווט הראשי**, ב-0.68rem. נמדד על
   רקע הסרגל עצמו (color-mix של --surface מעל הדף, ולכן בקנבס):
   בבהיר 3.17 → 5.48, בכהה 4.31 → 7.18. הטאב הפעיל נשאר --accent,
   ולכן ההבחנה בין פעיל ללא-פעיל לא נשחקה: 4.50 מול 5.48 בבהיר. */
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px;
  font-size: .68rem; font-weight: 600;
  color: var(--soft); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tab[aria-current="page"] { color: var(--accent); }
.tabIcon {
  width: 21px; height: 21px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* אייקונים כ-mask ב-data URI: אין קובץ נוסף, אין בקשה נוספת, והצבע
   יורש מהטאב הפעיל בלי שני קבצים לכל מצב. */
.tabIcon[data-i="today"] { -webkit-mask-image: var(--i-today); mask-image: var(--i-today); }
.tabIcon[data-i="mic"]   { -webkit-mask-image: var(--i-mic);   mask-image: var(--i-mic); }
.tabIcon[data-i="proj"]  { -webkit-mask-image: var(--i-proj);  mask-image: var(--i-proj); }
.tabIcon[data-i="usage"] { -webkit-mask-image: var(--i-usage); mask-image: var(--i-usage); }

:root {
  --i-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-mic:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v4'/%3E%3C/svg%3E");
  --i-proj:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --i-usage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
}


/* ─────────────── טוסט ─────────────── */

.toast {
  position: fixed; inset-inline: 16px; bottom: calc(92px + var(--safe-b));
  z-index: 40; margin-inline: auto; max-width: 24rem;
  background: var(--toast-bg); color: var(--toast-fg);
  padding: 12px 15px; border-radius: 11px;
  font-size: .88rem; box-shadow: var(--shadow);
  animation: rise .2s ease;
}
.toast[data-kind="err"] { background: var(--danger); color: var(--on-f); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────── גיליון עריכה ───────────────
   נפתח מלמטה, לא מודאל במרכז: אגודל אחד, והמסך שמאחור נשאר בהקשר.
   זה מה שהיה חסר — אפשר היה רק לסמן בוצע, לא לשנות תאריך, עדיפות,
   פרויקט או ניסוח. */

.sheetBack {
  position: fixed; inset: 0; z-index: 50;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; max-height: 92dvh; overflow-y: auto;
  background: var(--sheet-bg);
  border-radius: 20px 20px 0 0;
  padding: 8px var(--pad) calc(20px + var(--safe-b));
  display: flex; flex-direction: column; gap: 13px;
  box-shadow: 0 -2px 8px rgba(20,24,26,.12), 0 -20px 50px -20px rgba(20,24,26,.5);
  animation: sheetUp .26s cubic-bezier(.16,1,.3,1);
}
@keyframes sheetUp { from { transform: translateY(14px); opacity: .6; } }

/* ⚠⚠ **הכלל שמונע את "השדות עולים אחד על השני".**
   `.sheet` הוא flex column שגם גולל, ובקופסה כזאת `flex-shrink` ברירת
   המחדל (1) **מכווץ כל ילד** כשהתוכן גבוה מהמסך — במקום לתת לו לגלוש
   ולגלול. בגיליון "משימה חדשה", שבו יש תשעה שדות, כל שדה נדחס לגובה
   קטן מהתוכן שלו: ה-input שמור על `min-height` ולכן גלש מחוץ לקופסה
   שלו, וישב על התווית של השדה הבא. זה נראה כמו באג ריווח והוא באג
   כיווץ. `flex: none` על כל ילד מחזיר את הגובה הטבעי ומפעיל גלילה. */
.sheet > * { flex: none; }

.grab {
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--line); align-self: center; margin: 4px 0 6px; flex: none;
}

/* ⚠ שטח האחיזה, לא הפס. הפס עצמו בגובה 4px — אצבע לא פוגעת בו. האזור
   שמסביבו הוא מה שנתפס לגרירה, והוא נמשך לרוחב מלא (ולכן `.grabZone`
   ולא ריפוד על `.grab`, ששובר את המרכוז). `touch-action: none` כאן
   בלבד: על כל הגיליון הוא היה הורג את הגלילה שבתוכו. */
.grabZone {
  align-self: stretch; display: flex; justify-content: center;
  padding: 6px 0 2px; margin: -6px 0 -2px;
  touch-action: none; cursor: grab; flex: none;
}
.grabZone:active { cursor: grabbing; }
.sheet[data-drag="1"] { animation: none; transition: none; }
.sheet[data-drag="0"] { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.sheetBack[data-drag="1"] { transition: none; }

.sheet h2 { font-size: 1.12rem; line-height: 1.35; }

.f { display: flex; flex-direction: column; gap: 6px; }
.f > span { font-size: .73rem; font-weight: 700; color: var(--soft); letter-spacing: .04em; }
.f input, .f textarea, .f select {
  width: 100%; padding: 12px 13px; min-height: 48px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; line-height: 1.55;
}
.f textarea { min-height: 110px; resize: vertical; }
.f input:focus-visible, .f textarea:focus-visible, .f select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.fRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

/* ─────────────── תאריך ושעה — בוררים משלנו ───────────────
   ⚠ הבורר המובנה של הדפדפן מצויר לפי **שפת הדפדפן**: אצל יגל השבוע
   נפתח בשני והתאריך בפורמט אמריקאי. אין דרך לשלוט בזה מ-CSS. ההסבר
   המלא ב-app.js מעל `dateField`. */

.dateBtn {
  width: 100%; min-height: 48px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink);
  font: inherit; text-align: start; cursor: pointer;
}
.dateBtn[data-empty="1"] { color: var(--soft); }
.dateBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.timeField { display: flex; align-items: center; gap: 6px; }
.timeField select {
  /* ⚠ `width: auto` דורס את `.f select { width: 100% }` — שני בוררים
     ברוחב מלא בתוך שורת flex עם רווח גולשים מהשדה. */
  flex: 1; width: auto; min-width: 0; min-height: 48px; padding: 12px 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.timeSep { color: var(--soft); font-weight: 700; }

/* גיליון קטן — ללוח החודש. מוגבל ברוחב כדי שלא יימתח על טאבלט. */
.sheetSmall { max-width: 26rem; margin-inline: auto; border-radius: 20px 20px 0 0; }

.calHead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.calTitle { font-weight: 700; font-size: 1.02rem; color: var(--hero); }
.calNav {
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--soft); cursor: pointer;
  display: grid; place-items: center;
}
.calNav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⚠ `direction: rtl` על הרשת: התא הראשון הוא **ראשון**, והוא נוחת
   בפינה הימנית העליונה — כמו כל לוח שנה ישראלי. זה בדיוק מה שהבורר
   של הדפדפן לא עשה. */
.calGrid {
  direction: rtl;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.calDow {
  text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--soft); padding-bottom: 4px;
}
.calPad { visibility: hidden; }
.calDay {
  aspect-ratio: 1; min-height: 40px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: .95rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.calDay[data-today="1"] { border-color: var(--now); color: var(--now); font-weight: 700; }
.calDay[data-sel="1"] {
  background: var(--brand); border-color: var(--brand);
  color: var(--on-brand); font-weight: 700;
}
.calDay:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calQuick { display: flex; flex-wrap: wrap; gap: 7px; }

/* בורר עדיפות בצבעי התפקידים, לא רשימה נפתחת */
/* ⚠ עמודות לפי מספר הכפתורים בפועל ולא מספר קבוע.
   היה כאן `repeat(4, 1fr)` עם שלושה כפתורי עדיפות — כלומר עמודה רביעית
   ריקה, והבורר נראה דחוק לצד אחד עם חור לצדו. זה מה שנקרא "הסידור לא
   נראה טוב" בגיליון העריכה. auto-columns מסתגל לכל מספר. */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.seg button {
  padding: 11px 6px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--soft);
  font-size: .84rem; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--pill-f, var(--sunk)); color: var(--pill, var(--hero));
  border-color: currentColor; font-weight: 700;
}
.seg button[data-v="high"]   { --pill: var(--late); --pill-f: var(--late-f); }
.seg button[data-v="normal"] { --pill: var(--meet); --pill-f: var(--meet-f); }
.seg button[data-v="low"]    { --pill: var(--done); --pill-f: var(--done-f); }

/* ⚠ נדבק לתחתית הגיליון. הגיליון גולל בתוך עצמו, ובמשימה עם אפיון ארוך
   "שמור" נדחף מתחת לקפל — כלומר צריך לגלול כדי לשמור, ביד אחת, ליד הרכב.
   `bottom: -1px` מכסה תת-פיקסל שהשאיר קו של הרקע מציץ מתחת בגלילה. */
.sheetActs {
  position: sticky; bottom: -1px; z-index: 2;
  display: flex; gap: 9px;
  padding: 11px 0 calc(4px + var(--safe-b));
  margin-top: 4px;
  background: var(--sheet-bg);
  border-top: 1px solid var(--line);
}
.sheetActs .btn { flex: 1; }
.btnGhost { color: var(--late); border-color: transparent; background: transparent; flex: 0 0 auto !important; }

/* ─────────────── תצוגת משימה ───────────────
   קריאה, לא טופס. אותם סימנים בדיוק כמו ברשימה — צ׳יפ פרויקט, תאריך,
   "דחוף" — כדי שלא תהיינה שתי שפות לאותו מידע. */

.taskMeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px;
  /* ⚠ `--soft`, בדיוק כמו `.meta` שהיא התאום שלה ברשימה — ועוד יותר
     כאן, כי זה הגיליון והרקע שלו הוא הכי חלש (2.96 בבהיר, 3.96 בכהה). */
  font-size: .8rem; color: var(--soft);
  margin: -4px 0 2px;
}
.taskMeta .bad { color: var(--late); font-weight: 700; }
.taskMeta .meetTag {
  color: var(--on-f); background: var(--meet); font-weight: 600;
  padding: 3px 10px; border-radius: 99px; font-size: .72rem;
}
.taskMeta .okTag {
  color: var(--on-f); background: var(--done); font-weight: 600;
  padding: 3px 10px; border-radius: 99px; font-size: .72rem;
}

/* האפיון הוא הסיבה שפותחים משימה — לכן הוא מקבל את המשקל של גוף טקסט
   ולא של הערת שוליים, ושומר על שבירות השורה שקלוד כתב. */
.taskSpec {
  margin: 0; padding: 13px 14px;
  background: var(--sunk); border-radius: 10px;
  font-size: .95rem; line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* בתצוגה כל השורה היא קישור לקובץ — אין "הסר", ולכן אין למה להתחרות */
a.fileRow { text-decoration: none; color: inherit; }
@media (hover: hover) { a.fileRow:hover { border-color: var(--accent); } }

/* ─────────────── חיפוש ─────────────── */

/* ⚠ `margin-bottom` ולא רק ה-`gap` של `.view`. יגל: "השדה של החיפוש
   והקובייה של באיחור מתחברים" — והמידות מסבירות למה: 12px בין החיפוש
   לכרטיס הראשון מול 16px בין כרטיס לכרטיס, כלומר החיפוש היה **צמוד
   יותר** לקבוצה הראשונה מכפי שהקבוצות צמודות זו לזו, ובכהה הוא גם
   באותו `--surface` בדיוק. שתי הקופסאות נקראו כקופסה אחת.
   זו אותה טעות של "12 מול ~10" שתועדה ב-DESIGN.md — כאן היא חזרה
   בגבול שבין שכבת הפקדים לשכבת הרשימה. 20px מוציא את החיפוש מהרשת. */
.tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch;
         margin-bottom: 8px; }
.search {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0 12px; min-height: 44px;
}
.search input { flex: 1; border: none; background: none; padding: 12px 0; min-width: 0; }
.search input:focus-visible { outline: none; }
.search:focus-within { border-color: var(--accent); }
.search svg { flex: none; color: var(--mute); }

/* ─────────────── כפתור הוספה מהירה ─────────────── */

/* היה קופסה מקווקוות ברוחב מלא מתחת לחיפוש — שתי קופסאות chrome לפני
   שרואים משימה אחת. עכשיו כפתור אחד לצד החיפוש. */
.quickAdd {
  display: grid; place-items: center;
  padding: 0 15px; min-height: 44px;
  background: var(--brand); border: none;
  border-radius: var(--r); color: var(--on-brand);
  font-size: 1.35rem; font-weight: 400; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .quickAdd:hover { border-color: var(--accent); color: var(--accent); } }
.quickAdd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.pill {
  padding: 7px 13px; min-height: 38px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--soft);
  font-size: .8rem; font-weight: 600; cursor: pointer;
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pill[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }

/* ─────────────── לשונית ההקלטה ───────────────
   הייתה כפתור צף. בימין הוא כיסה תיבות סימון, בשמאל הוא היה מחוץ
   להישג האגודל. בסרגל הוא לא מכסה כלום ותמיד באותו מקום. */

.tabMic { position: relative; }
.micBtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fab); color: var(--on-brand);
  margin-top: -17px; margin-bottom: 1px;
  box-shadow: 0 2px 5px rgba(20,24,26,.2), 0 10px 20px -10px rgba(27,107,82,.6);
  transition: transform .16s cubic-bezier(.16,1,.3,1);
}
.micBtn svg { fill: currentColor; }
.tabMic:active .micBtn { transform: scale(.93); }
.tabMic[aria-current="page"] .micBtn { background: var(--accent); }
.tabs { overflow: visible; }

/* ─────────────── כרטיס פרויקט ───────────────
   קודם היה שם ועיגול צבע וזהו. מנהל שפותח "פרויקטים" צריך לדעת
   כמה פתוח, כמה באיחור ומתי הדבר הקרוב — אחרת זו רשימת שמות. */

.pcard {
  display: grid; grid-template-columns: 4px 1fr auto;
  gap: 0 13px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; overflow: hidden;
  padding: 0; margin-bottom: 8px;
  width: 100%; text-align: start; cursor: pointer;
  font: inherit; color: inherit;
}
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcard::before { content: ""; grid-column: 1; align-self: stretch; background: var(--stone); }
.pcardBody { grid-column: 2; padding: 13px 0; display: flex; flex-direction: column; gap: 3px; }
.pcardName { font-size: 1.02rem; font-weight: 600; color: var(--hero); }
/* ⚠ `--soft`: "3 באיחור · הבא: מחר · 8 הושלמו" הוא כל התוכן של הכרטיס
   מלבד השם והמספר — בדיוק המידע שבשבילו הכרטיס נבנה מחדש. */
.pcardMeta { font-size: .78rem; color: var(--soft); display: flex; gap: 9px; flex-wrap: wrap; }
.pcardMeta .bad { color: var(--late); font-weight: 700; }
.pcardCount {
  grid-column: 3; padding-inline-end: 15px;
  font-size: 1.5rem; font-weight: 700; color: var(--hero);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pcardCount small { display: block; font-size: .62rem; font-weight: 600;
                    color: var(--soft); text-align: center; margin-top: 3px; }

/* ─────────────── קבצים ותמונות ─────────────── */

.files { display: flex; flex-direction: column; gap: 9px; }
.fileList { display: flex; flex-direction: column; gap: 7px; }
.fileRow {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
}
.fileThumb {
  width: 42px; height: 42px; flex: none; border-radius: 7px;
  object-fit: cover; background: var(--sunk);
  display: grid; place-items: center;
  /* ⚠ `--soft`: הסיומת ("PDF") היא מה שמזהה את הקובץ כשאין תמונה
     ממוזערת, והיא יושבת על --sunk — הרקע שבו --mute הכי גרוע (2.81:1). */
  font-size: .66rem; font-weight: 700; color: var(--soft); text-transform: uppercase;
}
.fileBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* ⚠ התיקון לשמות קבצים בעברית **אינו ב-CSS** אלא ב-`fileLabel()` שב-JS.
   נבדקו חמש אפשרויות על "מחירון ספק 2026.pdf" בדפדפן:
     טבעי            → מחירון ספק pdf.2026   ✗
     direction:ltr   → ‎.pdfמחירון ספק 2026   ✗ (גרוע יותר)
     unicode-bidi:isolate / bdi dir=ltr      ✗
     LRM לפני הסיומת → מחירון ספק 2026.pdf   ✓
   הסיבה: הנקודה יושבת בין מספר לאותיות לטיניות, נחשבת נייטרלית, ומפצלת
   את הסיומת מהמספר לשתי ריצות שמסודרות מימין לשמאל. */
.fileName {
  color: var(--hero); font-size: .92rem; font-weight: 500; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fileSize { font-size: .74rem; color: var(--soft); font-variant-numeric: tabular-nums; }

.attach {
  display: grid; place-items: center; min-height: 46px;
  border: 1px dashed var(--line); border-radius: 10px;
  color: var(--accent); font-size: .9rem; font-weight: 600; cursor: pointer;
}
.attach input { display: none; }
.attach[data-busy="1"] { opacity: .55; pointer-events: none; }
.attach[data-busy="1"] span::after { content: " · מעלה…"; }