/* =====================================================================
   מערכת עיצוב: שלוש שכבות
   1. פרימיטיבים  (--p-*)  ערכים גולמיים, הצבעים של StayUpdated כמו שהם
   2. סמנטיים     (--bg, --fg, --accent, --sh-*...)  מה התפקיד; המצב הכהה מחליף רק כאן
   3. רכיבים      (--btn-*, --field-*, --sheet-*, --tab-*...)  רכיב משתמש רק בהם
   סולמות: רווח (--sp-*), טקסט (--fs-*, --lh-*, --ls-*), פינות (--r-*), צל (--sh-*),
   תנועה (--dur-*, --ease-*), שכבות (--z-*), מגע (--ctl-*), סביבה (--safe-*).
   הטלפון (עד 820px) משנה רק טוקנים של גודל מגע, ומוסיף את הרכיבים שלו בפרק אחד בסוף.

   תוכן הקובץ
   0. טוקנים          1. בסיס            2. רכיבים משותפים (כפתור, שדה, צ'יפ, תג, כרטיס, מתג)
   3. סרגל עליון       4. היום            5. לידים            6. לוח            7. יומן
   8. גיליון ליד       9. בוררי תאריך ושעה 10. הגדרות          11. הודעה, כפתור צף, מצבים
   12. מסך פתיחה, כניסה, חיבור             13. נתונים קשים    14. לחיצה וריחוף
   15. טלפון (אפליקציה מותקנת)             16. העדפות מערכת (שקיפות, ניגודיות)
   ===================================================================== */

/* ================= 0. טוקנים ================= */

/* ---------- 0.1 פרימיטיבים ---------- */
:root{
  /* חול / חום (בהיר) */
  --p-white:#FFFFFF;--p-sand-25:#FFFDFB;--p-sand-50:#FBF6F1;--p-sand-75:#F8F3EE;--p-sand-100:#F7EFE8;--p-sand-200:#ECE2DA;--p-peach-200:#FBD9BC;
  --p-brown-500:#6B5F5C;--p-brown-700:#403838;--p-brown-900:#2A2423;
  /* כחול */
  --p-navy-50:#E6EDF6;--p-navy-800:#22426A;--p-blue-500:#4E73A6;--p-blue-600:#355F92;
  /* צבעי מצב (בהיר) */
  --p-teal-50:#DDF4F1;--p-teal-700:#18675F;--p-green-50:#E2F2E7;--p-green-700:#237A45;--p-wa-700:#1A7A43;
  --p-orange-50:#FCEBD9;--p-orange-800:#934E0F;--p-gold-50:#FFF4DC;--p-gold-700:#9A6512;--p-gold-800:#7A5310;
  --p-red-50:#F8E2DF;--p-red-600:#C42B2B;--p-red-700:#B3342B;--p-violet-50:#EFE6F7;--p-violet-700:#6B3FA0;
  /* לילה (כהה) */
  --p-night-900:#212833;--p-night-850:#2B3340;--p-night-800:#2E333D;--p-night-700:#393D47;--p-night-650:#3A3F49;--p-night-600:#4A4F5A;
  --p-cream-100:#EFE9DC;--p-cream-200:#E0D4B9;--p-taupe-300:#C4BBAB;
  --p-sky-200:#9CCBE8;--p-sky-900:#2E3F4E;--p-mint-300:#6CCB8A;--p-mint-900:#2B4034;--p-apricot-300:#F0B37E;--p-apricot-900:#45392B;
  --p-honey-300:#F2C66D;--p-honey-900:#4A4130;--p-rose-300:#F09A9A;--p-rose-900:#4A2F30;--p-lilac-200:#D9BFF2;--p-lilac-900:#3F3650;--p-olive-900:#4A4538;
  /* גוונים לצללים, בפורמט "R G B" כדי לשים עליהם שקיפות: rgb(var(--p-shade-x) / .35) */
  --p-shade-black:0 0 0;--p-shade-white:255 255 255;--p-shade-navy:20 40 80;--p-shade-dusk:30 30 40;

  /* סולם רווח (בסיס 4px) */
  --sp-0:.125rem;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;
  /* סולם טקסט */
  --fs-2xs:.72rem;--fs-xs:.78rem;--fs-sm:.875rem;--fs-md:.9375rem;--fs-lg:1.08rem;--fs-xl:1.3rem;--fs-sheet:1.4rem;--fs-2xl:1.6rem;--fs-title:1.85rem;--fs-3xl:2rem;
  --fs-input:16px; /* פחות מזה, ואייפון מגדיל את הדף בפוקוס */
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --lh-title:1.12;--lh-snug:1.15;--lh-tight:1.2;--lh-comfy:1.5;--lh-base:1.6;
  /* ריווח אותיות: כותרות גדולות צפופות, טקסט קטן מעט מרווח */
  --ls-num:-.02em;--ls-title:-.012em;--ls-name:-.005em;--ls-small:.012em;
  /* פינות */
  --r-xs:4px;--r-sm:8px;--r-ctl:10px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-full:999px;
  /* גבהים של פקדים ויעדי מגע */
  --ctl-xs:32px;--ctl-sm:34px;--ctl-md:38px;--ctl-cell:40px;--ctl-touch:44px;--ctl-lg:48px;--ctl-xl:56px;--hit-slop:4px;
  /* נקודות שבירה (ב-@media אי אפשר להשתמש במשתנה, אז רק מתועדות כאן): טלפון 820px, טלפון צר 480px */
  /* אייקונים */
  --ic-sm:15px;--ic-md:18px;--ic-lg:22px;--ic-xl:28px;
  /* תנועה (רצה תמיד, גם עם "הפחתת תנועה": בחירה של אלמוג) */
  /* שפה אחת: שתי עקומות בלבד. --ease-out לכל מה שנכנס, יוצא או מגיב (העקומה של מעבר הדף ב-StayUpdated);
     --ease-move למה שזז ממקום למקום על המסך (הגלולה, שורה שמחליקה החוצה). אין ease-in: הוא מאחר את הרגע שמסתכלים עליו.
     מחוות (גיליון, שורות, החלקת שבוע) רצות על קפיצים ב-app.js (SPRING), כי הן נתפסות באמצע וממשיכות במהירות האצבע. */
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-move:cubic-bezier(.65,0,.35,1);
  /* משכים לפי תפקיד: לחיצה 120 · תגובה קטנה 160 · יציאה וקיפול 240 · שינוי צורה 300 · דף, גיליון והודעה נכנסים 420 · הגלולה 480 · הטבעת 700 */
  --dur-press:120ms;--dur-fast:160ms;--dur-exit:240ms;--dur-collapse:var(--dur-exit);--dur-base:300ms;--dur-page:420ms;--dur-glide:480ms;--dur-ring:700ms;--dur-loop:1.1s;
  --undo-wait:5s;--toast-wait:3s;--toast-undo-wait:6s;--confirm-wait:4s;
  --page-shift:48px;--shift-sm:4px;--shift-md:12px;--press:.97;--press-sm:.96;--press-card:.98;
  --stagger:60ms; /* כניסה ראשונה אחרי מסך הפתיחה: הפרש בין חלק לחלק */
  --press-delay:60ms; /* משטחים גדולים בתוך רשימה נגללת: הלחיצה נדלקת אחרי רגע, כדי שתחילת גלילה לא תהבהב (כמו באייפון) */
  /* שכבות */
  --z-raised:1;--z-pop:5;--z-header:20;--z-tabbar:30;--z-fab:30;--z-scrim:39;--z-sheet:40;--z-toast:50;--z-skip:60;--z-boot:80;
  /* סביבה: notch וקו הבית (0 במחשב) */
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --font:"Heebo",system-ui,Arial,sans-serif;
}

/* ---------- 0.2 סמנטיים: בהיר ---------- */
:root{
  --bg:var(--p-sand-75);--bg2:var(--p-peach-200);--surface:var(--p-white);--fg:var(--p-brown-900);--muted:var(--p-brown-500);--line:var(--p-sand-200);
  --accent:var(--p-navy-800);--accent-soft:var(--p-navy-50);
  --teal:var(--p-teal-700);--teal-soft:var(--p-teal-50);--ok:var(--p-green-700);--ok-soft:var(--p-green-50);
  --warn:var(--p-orange-800);--warn-soft:var(--p-orange-50);--gold:var(--p-gold-700);--gold-soft:var(--p-gold-50);
  --bad:var(--p-red-700);--bad-soft:var(--p-red-50);--violet:var(--p-violet-700);--violet-soft:var(--p-violet-50);
  --ink:var(--p-brown-700);--ink-fg:var(--p-white);
  --wa:var(--p-wa-700);--wa-fg:var(--p-white);--alert:var(--p-red-600);--alert-fg:var(--p-white);
  /* מילוי מלא עם טקסט לבן (פעולות החלקה): אותו גוון בשני המראות, חוץ מזהב שמוכהה בלילה */
  --fill-call:var(--p-teal-700);--fill-wa:var(--p-wa-700);--fill-mail:var(--p-navy-800);--fill-later:var(--p-gold-700);--fill-lost:var(--p-brown-500);--fill-fg:var(--p-white);
  --clay-card:var(--p-sand-25);--clay-row:var(--p-sand-50);--clay-sunk:var(--p-sand-100);--well:var(--p-sand-100);
  --clay-hi:rgba(255,255,255,.95);--clay-lo:rgba(190,140,100,.14);--clay-drop:rgba(168,110,70,.18);
  --scrim:rgb(var(--p-shade-dusk) / .35);
  --bar1:var(--p-blue-600);--bar2:var(--p-blue-500);--bar-fg:var(--p-white);--bar-fg-soft:rgb(var(--p-shade-white) / .8);--bar-ctl:rgb(var(--p-shade-white) / .18);--bar-field:rgb(var(--p-shade-navy) / .3);
  --pill:var(--p-white);--pill-fg:var(--p-navy-800);
  --today-mix:35%; /* אריח "מחר": כמה מהכחול */
  color-scheme:light}

/* ---------- 0.2 סמנטיים: כהה (רק כאן משתנה) ---------- */
:root[data-theme="dark"]{
  --bg:var(--p-night-900);--bg2:var(--p-night-700);--surface:var(--p-night-800);--fg:var(--p-cream-100);--muted:var(--p-taupe-300);--line:var(--p-night-600);
  --accent:var(--p-cream-200);--accent-soft:var(--p-olive-900);
  --teal:var(--p-sky-200);--teal-soft:var(--p-sky-900);--ok:var(--p-mint-300);--ok-soft:var(--p-mint-900);
  --warn:var(--p-apricot-300);--warn-soft:var(--p-apricot-900);--gold:var(--p-honey-300);--gold-soft:var(--p-honey-900);
  --bad:var(--p-rose-300);--bad-soft:var(--p-rose-900);--violet:var(--p-lilac-200);--violet-soft:var(--p-lilac-900);
  --ink:var(--p-cream-200);--ink-fg:var(--p-night-900);
  --fill-later:var(--p-gold-800);
  --clay-card:var(--p-night-800);--clay-row:var(--p-night-650);--clay-sunk:var(--p-night-900);--well:color-mix(in srgb,var(--p-night-800) 55%,var(--p-night-900));
  --clay-hi:rgba(255,255,255,.05);--clay-lo:rgba(0,0,0,.3);--clay-drop:rgba(0,0,0,.45);
  --bar1:var(--p-night-850);--bar2:var(--p-night-700);
  --pill:var(--p-cream-200);--pill-fg:var(--p-night-900);
  --today-mix:25%;
  --edge-lo:rgb(var(--p-shade-black) / .35);--sheet-edge:rgb(var(--p-shade-white) / .07);
  color-scheme:dark}

/* ---------- 0.2 סמנטיים: נגזרים (נבנים מהצבעים, אז עובדים בשני המראות) ---------- */
:root,:root[data-theme="dark"]{
  /* צללים */
  --sh-clay:12px 14px 28px var(--clay-drop),-8px -8px 20px var(--clay-hi),inset 4px 4px 9px var(--clay-hi),inset -4px -4px 10px var(--clay-lo);
  --sh-clay-sm:4px 5px 10px var(--clay-drop),inset 2px 2px 4px var(--clay-hi);
  --sh-raise:0 2px 6px rgb(var(--p-shade-black) / .1);
  --sh-float:0 18px 40px -14px rgb(var(--p-shade-black) / .5),0 2px 6px rgb(var(--p-shade-black) / .12); /* הודעה, כפתור צף */
  --sh-pop:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 12px 32px -12px rgb(var(--p-shade-black) / .35),0 2px 6px -2px rgb(var(--p-shade-black) / .12); /* בוררים */
  --sh-panel:-20px 0 50px -20px rgb(var(--p-shade-black) / .35);
  --sh-sheet:0 -18px 48px -18px rgb(var(--p-shade-black) / .4);
  --sh-bar:0 8px 28px -20px color-mix(in srgb,var(--p-navy-800) 70%,transparent);
  --sh-tabbar:inset 0 1px 0 var(--edge-hi),0 -8px 24px -18px rgb(var(--p-shade-navy) / .55);
  --edge-hi:rgb(var(--p-shade-white) / .16);--edge-hi-strong:rgb(var(--p-shade-white) / .5); /* קצה בהיר דק בראש סרגל הלשוניות */
  --edge-lo:rgb(var(--p-shade-navy) / .22); /* קו כהה דק בתחתית הסרגל העליון השקוף: התוכן שנגלל מתחתיו לא נמרח בו */
  --sheet-edge:transparent; /* קצה עליון בהיר לגיליון ולהודעה: בלילה, בלי זה, הגיליון נבלע ברקע */
  --ring-1:0 0 0 1px; /* מתאר פנימי של פיקסל: --ring-1 var(--x) */
  --focus:0 0 0 2px var(--accent);
  /* חומר הסרגל: אותו מעבר צבע בכל מקום; בטלפון שקוף מעט עם טשטוש */
  --bar-grad:linear-gradient(270deg,var(--bar1),var(--bar2));
  --bar-alpha:100%;
  --bar-glass:linear-gradient(270deg,color-mix(in srgb,var(--bar1) var(--bar-alpha),transparent),color-mix(in srgb,var(--bar2) var(--bar-alpha),transparent));
  --bar-blur:blur(20px) saturate(170%);
  --bar-ctl-hover:color-mix(in srgb,var(--bar-ctl),var(--p-white) 12%);
  /* קטנים */
  --tint-weak:color-mix(in srgb,var(--fg) 7%,var(--surface));
  --grab-c:color-mix(in srgb,var(--fg) 22%,transparent);
  --muted-weak:color-mix(in srgb,var(--muted) 70%,transparent);
  --dash:color-mix(in srgb,var(--accent) 35%,var(--line));
}

/* ---------- 0.3 רכיבים ---------- */
:root,:root[data-theme="dark"]{
  /* כפתור */
  --btn-h:var(--ctl-md);--btn-h-sm:var(--ctl-sm);--btn-px:var(--sp-4);--btn-px-sm:var(--sp-3);--btn-r:var(--r-ctl);--btn-fs:var(--fs-md);--btn-fs-sm:var(--fs-sm);
  --btn-bg:var(--surface);--btn-fg:var(--fg);--btn-border:var(--line);
  --btn-primary-bg:var(--ink);--btn-primary-fg:var(--ink-fg);
  --btn-ghost-fg:var(--accent);--btn-danger-fg:var(--bad);--btn-danger-border:color-mix(in srgb,var(--bad) 40%,var(--line));
  /* שדה */
  --field-h:var(--ctl-md);--field-r:var(--r-ctl);--field-px:var(--sp-3);--field-bg:var(--surface);--field-border:var(--line);--field-label:var(--muted);--field-fs:var(--fs-md);
  /* צ'יפ (סינון) ותג (סטטוס, מקור) */
  --chip-h:var(--ctl-sm);--chip-r:var(--r-full);--chip-px:var(--sp-3);--chip-on-bg:var(--accent-soft);--chip-on-fg:var(--accent);
  --tag-fs:var(--fs-xs);--tag-py:var(--sp-0);--tag-px:var(--sp-2);--tag-r:var(--r-full);
  /* כרטיס, שורה, באר (עמודת לוח, יום ביומן) */
  --card-bg:var(--clay-card);--card-r:var(--r-xl);--card-p:var(--sp-4) var(--sp-5);--card-sh:var(--sh-clay);
  --item-bg:var(--clay-row);--item-r:var(--r-lg);--item-sh:var(--sh-clay-sm);
  --well-r:calc(var(--r-md) + var(--sp-2));
  /* מתג תצוגה */
  --seg-pad:3px;--seg-r:calc(var(--r-sm) + var(--seg-pad));
  /* סרגל, גלולה, לשוניות */
  --brand-mark:28px;--nav-r:var(--r-md);--pill-sh:0 4px 12px -4px rgb(var(--p-shade-navy) / .35);
  --iconbtn:var(--ctl-sm);--avatar:var(--ctl-sm);
  /* כפתור צף והודעה */
  --fab-h:var(--ctl-lg);--toast-h:auto;--appbar-h:var(--ctl-xl);
  /* בוררים צפים, יומן, תיבת סימון */
  --pop-gap:6px;--ev-bar:4px;--check:var(--ic-lg);
  /* גיליון / מגירה */
  --sheet-w:30rem;--sheet-r:var(--r-xl);--grab-w:40px;--grab-h:5px;
  /* פעולות החלקה */
  --sw-btn-w:74px;--sw-fg:var(--fill-fg);
}

/* ================= 1. בסיס ================= */
*{box-sizing:border-box}
html{background:var(--bg2);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.locked{overflow:hidden}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 55%,var(--bg2) 100%) fixed;color:var(--fg);font:var(--fs-md)/var(--lh-base) var(--font)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,[data-open],summary,label:has(input[type=checkbox]){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* פקדים: לחיצה ארוכה לא מסמנת את הטקסט ולא פותחת תפריט "העתקה/שיתוף". תוכן (שמות, טלפונים בשדות) נשאר ניתן להעתקה */
button,.btn,.chip,.tile,.kc,.ev,nav,.fab,.seg,.steps,.grab,.dgrid,.tlist{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#d-sub span+span::before{content:" · "}
h1,h2,.empty b{text-wrap:balance}p,.why,.quote,.empty span,.tile>span,.inst small{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.muted{color:var(--muted)}
.flush{margin:0}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
.late{color:var(--bad);font-weight:var(--fw-semibold)}
h1{font-size:var(--fs-2xl);font-weight:var(--fw-medium);line-height:var(--lh-tight);margin:0}
h2{font-size:var(--fs-lg);font-weight:var(--fw-semibold);margin:0}
.ic{width:var(--ic-md);height:var(--ic-md);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.sm{width:var(--ic-sm);height:var(--ic-sm);stroke-width:2.25}
.icon .ic{margin:0}
a.btn{text-decoration:none}
td.num,.ph,.last,.dl,.dtile,.found,.fcount{font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-inline-start:var(--sp-4);top:-3rem;z-index:var(--z-skip);background:var(--ink);color:var(--ink-fg);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);text-decoration:none}
.skip:focus{top:var(--sp-2)}
main{max-width:76rem;margin:0 auto;padding:var(--sp-6) var(--sp-5) 6rem}
.view{display:none}
.view.on{display:grid;gap:var(--sp-5)} /* הכניסה מהצד: go() ב-app.js (WAAPI), כדי שמעבר מהיר ייתפס באמצע ולא יתחיל מחדש */
/* רמזים בשדות: בצבע הטקסט המשני (4.5:1 בבהיר ובכהה), לא באפור של הדפדפן */
main input::placeholder,.drawer input::placeholder,.drawer textarea::placeholder{color:var(--muted);opacity:1}

/* ================= 2. רכיבים משותפים ================= */
/* כרטיס */
.card{background:var(--card-bg);border-radius:var(--card-r);padding:var(--card-p);box-shadow:var(--card-sh)}
.head{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.quote{background:var(--clay-sunk);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}

/* כפתור: ברירת מחדל / ריחוף / לחיצה / פוקוס / מושבת. גרסאות: primary, wa, ghost, danger, sm, icon */
.btn{display:inline-flex;gap:var(--sp-1);align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-px);border:1px solid var(--btn-border);border-radius:var(--btn-r);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--btn-fs);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap;transition:transform var(--dur-press) var(--ease-out),filter var(--dur-fast),background-color var(--dur-fast),border-color var(--dur-fast)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.sm{min-height:var(--btn-h-sm);padding:0 var(--btn-px-sm);font-size:var(--btn-fs-sm)}
.btn.primary{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:var(--wa-fg)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--btn-ghost-fg)}
.btn.danger{background:transparent;border-color:var(--btn-danger-border);color:var(--btn-danger-fg)}
.btn.icon{padding:0;width:var(--btn-h-sm)}
/* כפתור עם אייקון בהתחלה: בצד האייקון 2px פחות, אחרת הוא נראה דחוק פנימה (יישור אופטי) */
.btn:not(.icon):has(> .ic:first-child){padding-inline-start:calc(var(--btn-px) - 2px)}
.btn.sm:not(.icon):has(> .ic:first-child){padding-inline-start:calc(var(--btn-px-sm) - 2px)}

/* שדה: ברירת מחדל / פוקוס / שגוי */
.field,.fields input,.fields select,.fields textarea,.titlerow input[type=search],.titlerow select,.auth-card input{min-height:var(--field-h);border:1px solid var(--field-border);border-radius:var(--field-r);padding:0 var(--field-px);background:var(--field-bg);color:var(--fg);font-size:var(--field-fs)}
.fields textarea{padding-block:var(--sp-2)}
.fields input:focus,.fields select:focus,.fields textarea:focus,.titlerow input:focus,.titlerow select:focus{outline:2px solid var(--accent);outline-offset:1px}
.fields [aria-invalid="true"]{border-color:var(--bad);box-shadow:var(--ring-1) var(--bad)}
.err{color:var(--bad);font-size:var(--fs-xs);font-weight:var(--fw-medium)}

/* צ'יפ סינון: כבוי / דלוק (aria-pressed) */
.chip{display:inline-flex;font-weight:var(--fw-medium);align-items:center;min-height:var(--chip-h);border:1px solid var(--line);background:var(--surface);border-radius:var(--chip-r);padding:0 var(--chip-px);font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--dur-fast),transform var(--dur-press) var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--chip-on-bg);border-color:transparent;color:var(--chip-on-fg);box-shadow:inset var(--ring-1) color-mix(in srgb,var(--chip-on-fg) 25%,transparent)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* תגים: סטטוס (מלא), מקור (מתאר), ספירה */
.pill,.src,.badge{display:inline-block;font-size:var(--tag-fs);line-height:var(--lh-base);padding:var(--tag-py) var(--tag-px);border-radius:var(--tag-r);white-space:nowrap}
.src{border:1px solid var(--line);color:var(--muted)}
.badge{background:var(--accent-soft);color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.s-new{background:var(--accent-soft);color:var(--accent)}
.s-contacted{background:var(--teal-soft);color:var(--teal)}
.s-follow{background:var(--warn-soft);color:var(--warn)}
.s-nurture{background:var(--violet-soft);color:var(--violet)}
.s-install_scheduled{background:var(--gold-soft);color:var(--gold)}
.s-installed{background:var(--ok-soft);color:var(--ok)}
.s-lost{background:var(--clay-sunk);color:var(--muted)}

/* מתג תצוגה */
.seg{margin-inline-start:auto;display:flex;background:var(--well);border-radius:var(--seg-r);padding:var(--seg-pad)}
.seg button{border:0;background:none;border-radius:var(--r-sm);min-height:calc(var(--ctl-sm) - 2 * var(--seg-pad));padding:0 var(--sp-3);cursor:pointer;font-size:var(--fs-sm)}
.seg button.on{background:var(--surface);box-shadow:var(--sh-raise);font-weight:var(--fw-semibold)}

/* "עוד" (כרטיסים, לוח, יומן: עד N ואז "+N") */
.more{display:inline-flex;margin-top:var(--sp-3);color:var(--accent);font-weight:var(--fw-medium);background:none;border:0;cursor:pointer;padding:var(--sp-1) 0}
.kmore,.dmore{display:block;width:100%;text-align:center;border:1px dashed var(--dash);background:none;color:var(--accent);font-weight:var(--fw-medium);font-size:var(--fs-sm);border-radius:var(--r-md);min-height:var(--ctl-sm);cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-fast)}
.dmore{margin-bottom:var(--sp-2)}

/* מצב ריק */
.empty{display:grid;justify-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted)}
.empty .ic{width:var(--ic-xl);height:var(--ic-xl);color:var(--accent)}
.empty b{color:var(--fg);font-size:var(--fs-lg);font-weight:var(--fw-semibold)}

/* ================= 3. סרגל עליון ================= */
header{position:sticky;top:0;z-index:var(--z-header);background:var(--bar-grad);color:var(--bar-fg);box-shadow:var(--sh-bar)}
.top{max-width:76rem;margin:0 auto;padding:var(--sp-2) var(--sp-5);display:flex;gap:var(--sp-4);align-items:center}
.brand{display:flex;gap:var(--sp-2);align-items:center;font-weight:var(--fw-bold);font-size:var(--fs-lg);white-space:nowrap}
.brand i{width:var(--brand-mark);height:var(--brand-mark);border-radius:var(--r-sm);background:var(--bar-ctl);display:grid;place-items:center;font-style:normal}
nav{position:relative;display:flex;gap:var(--sp-1)}
nav button{position:relative;z-index:var(--z-raised);border:0;background:none;color:var(--bar-fg);padding:var(--sp-2) var(--sp-4);border-radius:var(--nav-r);cursor:pointer;display:flex;gap:var(--sp-2);align-items:center;transition:color var(--dur-fast) var(--ease-out) var(--dur-press),background-color var(--dur-fast),transform var(--dur-press) var(--ease-out)}
nav button[aria-current="page"]{color:var(--pill-fg);font-weight:var(--fw-semibold);transition:transform var(--dur-press) var(--ease-out)}
nav .count{background:var(--alert);color:var(--alert-fg);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-semibold);min-width:1.25rem;padding:0 var(--sp-1);line-height:1.25rem;text-align:center;font-variant-numeric:tabular-nums}
/* הגלולה: גולשת (480ms, מתיחה), טבעת שנמוגה */
.nav-pill,.nav-ring{position:absolute;top:0;left:0;border-radius:var(--nav-r);pointer-events:none}
.nav-pill{background:var(--pill);box-shadow:var(--pill-sh);transform-origin:50% 100%;will-change:transform}
.nav-ring{border:2px solid var(--pill);opacity:0}
.nav-ring.go{animation:ring var(--dur-ring) var(--ease-out)}
@keyframes ring{from{opacity:.8;scale:.9}to{opacity:0;scale:1.3}}
.search{margin-inline-start:auto;position:relative}
.search input{width:15rem;height:var(--ctl-sm);border:0;border-radius:var(--field-r);padding:0 var(--field-px);background:var(--bar-field);color:var(--bar-fg)}
.search input::placeholder{color:var(--bar-fg);opacity:.9}
.who{display:flex;gap:var(--sp-2);align-items:center}
.iconbtn{width:var(--iconbtn);height:var(--iconbtn);border-radius:var(--btn-r);border:0;background:var(--bar-ctl);color:var(--bar-fg);cursor:pointer;display:grid;place-items:center;position:relative}
.iconbtn::after{content:"";position:absolute;inset:calc(-1 * var(--hit-slop))} /* שטח נגיעה מורחב */
.avatar{width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--bar-fg);color:var(--bar1);display:grid;place-items:center;font-weight:var(--fw-bold)}

/* ================= 4. היום ================= */
.greet{display:flex;align-items:center;gap:var(--sp-4);justify-content:space-between;flex-wrap:wrap}
.greet h1 b{font-weight:var(--fw-bold)}
.greet .next{flex-basis:100%;margin:0;color:var(--muted)}
.greet .next b{color:var(--fg);font-weight:var(--fw-semibold)}
.home{display:grid;grid-template-columns:minmax(22rem,1.25fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
/* אריחים */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.tile{display:block;text-align:start;border:0;cursor:pointer;background:var(--card-bg);border-radius:var(--card-r);padding:var(--sp-4) var(--sp-5);color:inherit;box-shadow:var(--card-sh);transition:transform var(--dur-fast) var(--ease-out)}
.tile b{display:block;font-size:var(--fs-3xl);font-weight:var(--fw-medium);line-height:var(--lh-tight);color:var(--accent);font-variant-numeric:normal}
.tile b small{font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-regular);margin-inline-start:var(--sp-1)}
.tile span{color:var(--muted)}
.tile.att b{color:var(--warn)}
.tile .go{display:block;font-size:var(--fs-sm);color:var(--accent);margin-top:var(--sp-1)}
.tile .tnote{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--warn);margin-top:var(--sp-1)} /* האיחור כתוב במילים, לא רק בצבע */
/* לטיפול עכשיו */
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);max-height:min(52vh,30rem);overflow-y:auto;padding:var(--sp-1);margin:calc(-1 * var(--sp-1))}
.todo li{background:var(--item-bg);border-radius:var(--item-r);padding:var(--sp-3) var(--sp-4);display:grid;gap:var(--sp-2);box-shadow:var(--item-sh)}
.todo .top2{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.todo .why{font-size:var(--fs-sm);color:var(--muted)}
.todo .why.late{color:var(--bad);font-weight:var(--fw-semibold)}
/* שם משרד ארוך: עד שתי שורות. המלא בגיליון הליד ובשדה "משרד" */
.todo .why.off2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.todo .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.todo .found{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--muted)}
.todo.moving{overflow-x:clip;overflow-clip-margin:var(--sp-4)}
.todo li.gone{display:none}
/* בוצע + ביטול */
.todo li.undo{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--ok-soft);color:var(--ok);box-shadow:none;font-size:var(--fs-sm)}
.todo li.undo span{flex:1;min-width:0;color:var(--fg)}
.todo li.undo .tn{display:inline-block;max-width:60%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-semibold)}
.todo li.undo .btn{flex:none}
.todo li.empty{background:none;box-shadow:none;padding:var(--sp-6) var(--sp-4)}
.namebtn{border:0;background:none;padding:0;font-weight:var(--fw-bold);font-size:var(--fs-lg);cursor:pointer;text-align:start;color:inherit;text-decoration:underline transparent;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-fast)}
/* התקנות קרובות */
.inst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.inst li{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.inst li:last-child{border:0}
.inst .t{font-size:var(--fs-xl);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;min-width:3.6rem}
.inst .grow{flex:1;min-width:0}.inst .grow b{display:block}.inst .grow small{color:var(--muted);font-size:var(--fs-sm)}
.inst .grow.namebtn{font:inherit}
.inst .t.none{color:var(--muted)}
.inst li.inst-empty{border:0;padding:var(--sp-2) 0}.inst li.instmore{border:0;padding:0}.inst .instmore .more{margin-top:0}
.dtile{flex:none;width:3.6rem;display:flex;flex-direction:column;align-items:center;border-radius:var(--r-md);padding:var(--sp-1) 0;background:var(--tint-weak);line-height:var(--lh-snug)}
.dtile span{font-size:var(--fs-xs);color:var(--muted)}.dtile b{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.dtile.d0{background:var(--accent)}.dtile.d0 span,.dtile.d0 b{color:var(--surface)}
.dtile.d1{background:color-mix(in srgb,var(--accent) var(--today-mix),var(--surface))}.dtile.d1 span{color:var(--fg)}
/* גרף עמודות אופקי, ימין לשמאל: הקו המשותף מימין, הערך בקצה העמודה. אורך = ערך / הערך הגדול (--v) */
.bars{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.bar{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm);padding:var(--sp-0) 0;border-radius:var(--r-sm)}
.bar .trk{display:flex;align-items:center;gap:var(--sp-2);min-width:0;border-inline-start:1px solid var(--line);min-height:1.4rem}
.bar i{display:block;flex:none;height:12px;width:calc((100% - 5.5rem) * var(--v));min-width:3px;background:var(--accent);border-radius:0;border-start-end-radius:var(--r-xs);border-end-end-radius:var(--r-xs);transition:opacity var(--dur-fast)}
.bar em{font-style:normal;color:var(--fg);font-weight:var(--fw-semibold);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar em small{display:inline;color:var(--muted);font-weight:var(--fw-regular);font-size:var(--fs-xs)}
.bars .bar-empty{list-style:none}
.dv-sum{margin:0 0 var(--sp-3);color:var(--muted);font-size:var(--fs-sm)}.dv-sum b{color:var(--fg);font-weight:var(--fw-semibold)}
.dv-note{margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--fs-xs)}
.col-empty,.inst-empty,.bar-empty{margin:var(--sp-2) var(--sp-1);font-size:var(--fs-sm);color:var(--muted)}

/* ================= 5. לידים ================= */
.titlerow{display:flex;align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap}
.titlerow input[type=search]{flex:0 1 18rem}
/* מסנני מקור ומטפל: במחשב בשורה; בטלפון מקופלים מאחורי "סינון" */
.fbtn{display:none}
.xf{display:contents}
table{width:100%;border-collapse:collapse}
th{text-align:start;font-weight:var(--fw-medium);color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
td{padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:middle}
tr.row{cursor:pointer}tr.row td{transition:background var(--dur-fast)}tr.row:active td{background:var(--clay-row)}
tbody tr:last-child td{border-bottom:0}
td .nm{font-weight:var(--fw-bold)}td .off{display:block;font-size:var(--fs-sm);color:var(--muted)}
td.ph{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.lv-page{display:flex;gap:var(--sp-3);align-items:center;justify-content:center;flex-wrap:wrap;padding:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-sm);border-top:1px solid var(--line)}

/* ================= 6. לוח ================= */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(12rem,1fr));gap:var(--sp-3);overflow-x:auto;padding-bottom:var(--sp-2)}
.col{background:var(--well);border-radius:var(--well-r);padding:var(--sp-2);min-height:18rem}
.col h2{font-size:var(--fs-md);font-weight:var(--fw-semibold);margin:var(--sp-1) var(--sp-1) var(--sp-3);display:flex;justify-content:space-between}
.col h2 span{color:var(--muted);font-weight:var(--fw-regular);font-variant-numeric:tabular-nums}
.kc{display:block;width:100%;text-align:start;border:0;color:inherit;cursor:pointer;background:var(--card-bg);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);box-shadow:var(--item-sh)}
.kc b{display:block}.kc small{color:var(--muted);font-size:var(--fs-sm)}.kc small.late{color:var(--bad)}

/* ================= 7. יומן ================= */
.weekhead{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.week{display:grid;grid-template-columns:repeat(var(--days,6),1fr);gap:var(--sp-3)}
.day{background:var(--well);border-radius:var(--well-r);padding:var(--sp-2);min-height:15rem}
.day h2{font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin:0 0 var(--sp-2);display:flex;justify-content:space-between;color:var(--muted)}
.day.today h2{color:var(--accent);font-weight:var(--fw-bold)}
.day h2 .dcount{font-style:normal;margin-inline-start:auto;margin-inline-end:var(--sp-1);background:var(--accent-soft);color:var(--accent);border-radius:var(--r-full);padding:0 var(--sp-2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.day.today h2 .dcount+span,.day h2>span{order:2}
.day:not(:has(.ev))::after{content:"אין כלום ביום הזה";display:block;font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-1)}
.dl i{font-style:normal}
.ev{--ev-c:var(--gold);position:relative;display:block;width:100%;text-align:start;color:inherit;cursor:pointer;background:var(--card-bg);border:0;border-radius:var(--r-md);padding:var(--sp-2);padding-inline-start:calc(var(--sp-2) + var(--sp-1) + var(--ev-bar));margin-bottom:var(--sp-2);font-size:var(--fs-sm);box-shadow:var(--item-sh)}
/* הפס הצבעוני: פס עגול בתוך הכרטיס. גבול צד על פינה מעוגלת יוצר סהר */
.ev::before{content:"";position:absolute;inset-block:var(--sp-2);inset-inline-start:var(--sp-1);width:var(--ev-bar);border-radius:var(--r-full);background:var(--ev-c)}
.ev.f{--ev-c:var(--teal)}.ev.done{opacity:.6}
.ev.late{--ev-c:var(--bad)}.ev.late::before{background:repeating-linear-gradient(to bottom,var(--ev-c) 0 5px,transparent 5px 8px)}.ev.late .lt{color:var(--bad);font-weight:var(--fw-semibold)}
.ev b{display:block}.ev .tm{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--muted);margin-inline-start:auto}
.legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:var(--r-xs);margin-inline-end:var(--sp-1)}
.legend i.f{background:var(--teal)}.legend i.i{background:var(--gold)}.legend i.l{background:var(--bad)}
/* בטלפון בלבד: מעבר שבוע ליד האגודל, ושבוע ריק כמשפט אחד */
.wkfoot,.wkempty{display:none}

/* ================= 8. גיליון ליד (במחשב: מגירת צד) ================= */
.drawer{position:fixed;inset-block:0;left:0;width:min(var(--sheet-w),100%);background:var(--surface);z-index:var(--z-sheet);box-shadow:var(--sh-panel);transform:translateX(-105%);visibility:hidden;transition:transform var(--dur-exit) var(--ease-out),visibility 0s linear var(--dur-exit);display:flex;flex-direction:column}
.drawer.open{transform:none;visibility:visible;transition:transform var(--dur-page) var(--ease-out)}
.drawer.is-new .old{display:none}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-exit) var(--ease-out)}
.scrim.open{opacity:1;pointer-events:auto;transition-duration:var(--dur-page)}
/* כותרת */
.dh{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.grab{display:none}
.dh .head{margin:0;flex-wrap:nowrap;align-items:flex-start}.dh .head>div{min-width:0}.dh .head .icon{flex:none;margin-top:var(--sp-0)}
.dh h2{font-size:var(--fs-xl)}.dh small{color:var(--muted);font-size:var(--fs-sm)}
.dh .acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
/* גוף */
.db{flex:1;padding:var(--sp-4) var(--sp-5);overflow:auto;display:grid;gap:var(--sp-4);align-content:start;grid-auto-rows:max-content}
.db h2{margin-bottom:var(--sp-2)}
.drawer .quote{display:grid;justify-items:start}.drawer .quote .ql{justify-self:stretch}
.qmore{margin-top:var(--sp-1)}
.steps{display:flex;gap:var(--sp-1)}
.steps button{flex:1;min-height:var(--ctl-sm);border:0;border-radius:var(--r-sm);padding:var(--sp-1);font-size:var(--fs-xs);background:var(--well);color:var(--fg);cursor:pointer}
.steps button.done{background:var(--accent-soft);color:var(--accent)}
.steps button.now{background:var(--accent);color:var(--surface);font-weight:var(--fw-bold)}
/* טופס בקבוצות: איך חוזרים אליו, מתי, עוד. "(חובה)" רק בליד חדש */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.fields label,.fields .lbl-f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--field-label)}
.fields .w2{grid-column:span 2}
.fields .fgrp{margin:var(--sp-3) 0 calc(-1 * var(--sp-1));font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg);letter-spacing:var(--ls-small)}
.fields .fgrp:first-child{margin-top:0}
.fields .req{display:none;font-weight:var(--fw-regular);color:var(--muted)}
.drawer.is-new .fields .req{display:inline}
/* היסטוריה, הערה, מחיקה */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.tl li{border-inline-start:2px solid var(--line);padding-inline-start:var(--sp-3);font-size:var(--fs-sm)}
.tl small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.tl li.tl-more{border:0;padding:0}
.tl li[tabindex]:focus{outline:none}
.note-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.note-row input{flex:1;min-width:0}
.del-link{background:none;border:0;color:var(--bad);font-size:var(--fs-sm);cursor:pointer;padding:var(--sp-1) 0;justify-self:start}
.del-link.armed{font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px} /* לחיצה ראשונה מבקשת אישור */
.repeat{font-size:var(--fs-xs);color:var(--warn);font-weight:var(--fw-semibold)}
/* תחתית */
.df{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line);display:flex;gap:var(--sp-2);align-items:center;background:var(--surface)}
.df .danger{margin-inline-start:auto}

/* ================= 9. בוררי תאריך ושעה בעברית (במקום הבורר של הדפדפן) ================= */
.dp{position:relative}
.dpbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);cursor:pointer;text-align:start;transition:border-color var(--dur-fast)}
.dpbtn .ic{color:var(--muted);transition:color var(--dur-fast)}
.dpbtn[aria-expanded="true"]{border-color:var(--accent)}.dpbtn[aria-expanded="true"] .ic{color:var(--accent)}
.dpv.none{color:var(--muted)}
/* חלון צף: פתוח / סגור (שני הבוררים אותו דבר) */
.dpop,.tlist{position:absolute;z-index:var(--z-pop);top:calc(100% + var(--pop-gap));background:var(--surface);color:var(--fg);box-shadow:var(--sh-pop);
  opacity:0;transform:translateY(calc(-1 * var(--shift-sm)));visibility:hidden;transition:opacity var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out),visibility 0s linear var(--dur-press)}
.dpop.open,.tlist.open{opacity:1;transform:none;visibility:visible;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.dpop{inset-inline-start:0;width:18.5rem;max-width:calc(100vw - 2rem);border-radius:calc(var(--r-sm) + var(--sp-3));padding:var(--sp-3);transform-origin:top right;transform:translateY(calc(-1 * var(--shift-sm))) scale(var(--press))}
.dpop .mh{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.dpop .mh b{flex:1;text-align:center;font-weight:var(--fw-semibold)}
.dpop .quick{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.dpop .quick .chip{min-height:var(--ctl-xs)}
.dpop .foot{display:flex;justify-content:space-between;margin-top:var(--sp-2)}
.dgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-variant-numeric:tabular-nums}
.dgrid .dow{font-size:var(--fs-xs);color:var(--muted);text-align:center;padding-block:var(--sp-1)}
.dgrid button{aspect-ratio:1;border:0;border-radius:var(--r-sm);background:none;cursor:pointer;font-size:var(--fs-sm);color:var(--fg);transition:background-color var(--dur-fast),transform var(--dur-press) var(--ease-out)}
.dgrid button.sat{color:var(--muted-weak)}
.dgrid button.today{box-shadow:inset var(--ring-1) var(--accent);color:var(--accent);font-weight:var(--fw-semibold)}
.dgrid button[aria-pressed="true"]{background:var(--accent);color:var(--surface);font-weight:var(--fw-semibold);box-shadow:none}
.tp{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);color:var(--fg)}
.tp .field{width:3.4rem;text-align:center;padding:0;font-variant-numeric:tabular-nums}
.tp>span{color:var(--muted);font-weight:var(--fw-semibold)}
.tpclr{border:0;background:none;color:var(--muted);width:var(--ctl-sm);height:var(--ctl-sm);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center}
.tlist{width:5.5rem;max-height:13rem;overflow:auto;border-radius:var(--r-md);padding:var(--sp-1);display:grid;gap:2px;font-variant-numeric:tabular-nums}
.tlist button{border:0;background:none;border-radius:var(--r-sm);min-height:var(--ctl-xs);cursor:pointer;color:var(--fg);font-size:var(--fs-sm)}
.tlist button[aria-selected="true"]{background:var(--accent);color:var(--surface);font-weight:var(--fw-semibold)}
@keyframes drain{to{transform:scaleX(0)}}
@keyframes dpin{from{opacity:0;transform:translateY(calc(-1 * var(--shift-sm)))}to{opacity:1;transform:none}}

/* ================= 10. הגדרות ================= */
.setgrid{display:grid;grid-template-columns:15rem 1fr;gap:var(--sp-5);align-items:start}
.setmenu{display:flex;flex-direction:column;gap:var(--sp-1)}
.setmenu button{border:0;background:none;text-align:start;min-height:var(--ctl-md);padding:0 var(--sp-3);border-radius:var(--r-md);cursor:pointer}
.setmenu button.on{background:var(--accent-soft);color:var(--accent);font-weight:var(--fw-bold)}
.setpane{display:grid;gap:var(--sp-4)}
.setpane .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--sp-3);align-items:end}
.setpane .form label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--field-label)}
.setpane .form label.chk{flex-direction:row;align-items:center;gap:var(--sp-2);min-height:var(--field-h)}
.srclist,.users{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.users{margin-bottom:var(--sp-4)}
.srclist li,.users li{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--item-bg)}
.srclist .ic{color:var(--accent)}
.srclist .st{margin-inline-start:auto}
.srclist .last{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.srclist .sname{min-width:0;flex:1 1 12rem}.srclist .pill{flex:none}
.users li .grow{flex:1;min-width:0}.users .umail{display:block;text-align:end;font-size:var(--fs-sm)}.users .pill{vertical-align:.1em}.users li .btn{flex-shrink:0}
code.url{display:block;direction:ltr;text-align:left;overflow-wrap:anywhere;background:var(--clay-sunk);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);margin:var(--sp-2) 0}
.help{margin:var(--sp-2) 0 0;padding-inline-start:var(--sp-5);color:var(--muted);font-size:var(--fs-sm);display:grid;gap:var(--sp-1)}
.themes{display:flex;gap:var(--sp-2)}

/* ================= 11. הודעה, כפתור צף ================= */
.toast{position:fixed;bottom:var(--sp-6);left:50%;z-index:var(--z-toast);display:flex;gap:var(--sp-3);align-items:center;max-width:min(34rem,calc(100vw - 2rem));min-height:var(--toast-h);background:var(--ink);color:var(--ink-fg);padding:var(--sp-2);padding-inline-start:var(--sp-4);border-radius:calc(var(--btn-r) + var(--sp-2));box-shadow:var(--sh-float),inset 0 1px 0 var(--sheet-edge);
  transform:translate(-50%,var(--shift-md));opacity:0;visibility:hidden;transition:transform var(--dur-exit) var(--ease-out),opacity var(--dur-exit) var(--ease-out),visibility 0s linear var(--dur-exit)}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform var(--dur-page) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.toast:has(.btn[hidden]){padding-inline-end:var(--sp-4)}
.toast #toast-t{min-width:0;text-wrap:pretty}
.toast .tn{display:inline-block;max-width:14em;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-semibold)}
.toast .btn{flex:none;min-height:var(--ctl-sm);background:transparent;border-color:color-mix(in srgb,var(--ink-fg) 35%,transparent);color:var(--ink-fg)}
.fab{position:fixed;bottom:var(--sp-6);inset-inline-start:var(--sp-6);z-index:var(--z-fab);display:inline-flex;gap:var(--sp-2);align-items:center;min-height:var(--fab-h);border:0;border-radius:var(--btn-r);background:var(--btn-primary-bg);color:var(--btn-primary-fg);padding:0 var(--sp-5);padding-inline-start:calc(var(--sp-5) - 2px);font-weight:var(--fw-semibold);box-shadow:var(--sh-float);cursor:pointer;transition:transform var(--dur-press) var(--ease-out)}
.fab .fl{display:inline-block;white-space:nowrap}

/* ================= 12. מסך פתיחה, כניסה, חיבור ================= */
/* מסך פתיחה: אותו כחול של הסרגל, המותג באמצע, פס טעינה דק. בלי רשת: משפט אחד וכפתור */
.boot{position:fixed;inset:0;z-index:var(--z-boot);display:grid;place-content:center;justify-items:center;gap:var(--sp-5);padding:var(--sp-6);text-align:center;
  background:var(--bar-grad);color:var(--bar-fg);transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.boot.out{opacity:0;visibility:hidden}
.boot .brand{font-size:var(--fs-2xl);gap:var(--sp-3)}
.boot .brand i{width:var(--ctl-touch);height:var(--ctl-touch);border-radius:var(--r-md)}
.boot .brand .ic{width:var(--ic-xl);height:var(--ic-xl)}
.boot-load{position:relative;width:7rem;height:3px;border-radius:var(--r-full);background:var(--bar-ctl);overflow:hidden}
.boot-load::after{content:"";position:absolute;inset-block:0;width:40%;border-radius:inherit;background:var(--bar-fg);animation:bootload var(--dur-loop) var(--ease-move) infinite}
@keyframes bootload{from{inset-inline-start:-40%}to{inset-inline-start:100%}}
.boot p{margin:0;max-width:22rem;color:var(--bar-fg);font-size:var(--fs-md);line-height:var(--lh-comfy)}
.boot #boot-msg:empty,.boot:not(.fail) #boot-retry,.boot.fail .boot-load{display:none}
.boot .btn{min-height:var(--ctl-touch);padding:0 var(--sp-6);background:var(--bar-fg);color:var(--bar1);border:0;font-weight:var(--fw-semibold)}
/* כניסה */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(var(--sp-5),var(--safe-t)) var(--sp-5) max(var(--sp-5),var(--safe-b))}
.auth-card{width:min(24rem,100%);display:grid;gap:var(--sp-3)}
.auth-card .brand{color:var(--accent);font-size:var(--fs-xl)}
.auth-card .brand i{background:var(--accent-soft)}
.auth-card label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--field-label)}
.auth-card input{font-size:var(--fs-input)}
.auth-card .btn{width:100%;min-height:var(--ctl-lg)}
/* אין חיבור: פס צר מתחת לסרגל העליון */
.net{display:flex;gap:var(--sp-2);align-items:center;justify-content:center;padding:var(--sp-1) var(--sp-4);min-height:2rem;font-size:var(--fs-sm);font-weight:var(--fw-medium);background:var(--ink);color:var(--ink-fg);text-align:center}

/* ================= 13. נתונים קשים (break-ui): שמות ארוכים, מיילים בלי רווח, 0, אלפים ================= */
/* טקסט שמגיע מבחוץ נשבר רק כשאין ברירה (מייל, קישור), אף פעם לא באמצע מילה רגילה */
.namebtn,.dh h2,.kc b,.ev b,.inst .grow b,td .nm,.quote,.off,.srclist .sname,.tl li,.toast #toast-t,.greet h1,.users .grow{overflow-wrap:anywhere}
.noname{color:var(--muted);font-style:italic;font-weight:var(--fw-medium)}
/* חיתוך לכמה שורות; את כל הטקסט רואים בריחוף (title) ובמגירה */
.clamp3,.inst .grow b,.kc b,.ev b,.ev .et,td .off,#d-sub{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{-webkit-line-clamp:3}.inst .grow b,.kc b,.ev b,.ev .et,#d-sub{-webkit-line-clamp:2}td .off{-webkit-line-clamp:1}
.inst .grow small{display:block;line-height:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote .ql{display:block;unicode-bidi:isolate}.quote .ql.gap{height:.5em}
.quote .ql.qq{color:var(--muted);font-size:var(--fs-sm)} /* המייל המקורי שצוטט בתשובה */
/* טבלה: מספרים, תאריכים ושעות לא נשברים; שם ומשרד מקבלים את הרוחב */
td.ph,td.nx,td .pill,td .src{white-space:nowrap}
td:first-child{max-width:26rem}
td.own{max-width:9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav .count,.badge,.dcount{white-space:nowrap;direction:ltr;unicode-bidi:isolate}

/* ================= 14. לחיצה וריחוף ================= */
/* לחיצה: כל מה שלוחצים עליו נענה מיד, בשלוש עוצמות (כפתור, פקד קטן, כרטיס) */
.seg button,.steps button,.setmenu button,.iconbtn,.kc,.ev{transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-fast),color var(--dur-fast)}
.btn:active,.fab:active,.kmore:active,.dmore:active{transform:scale(var(--press))}
.chip:active,.seg button:active,.steps button:active,.setmenu button:active,nav button:active,.iconbtn:active,.dgrid button:active{transform:scale(var(--press-sm))}
.tile:active,.kc:active,.ev:active{transform:scale(var(--press-card));transition-duration:var(--dur-press);transition-delay:var(--press-delay)}
/* כפתור שקוף והכפתור של שדה תאריך: הקטנה לבד לא נראית על טקסט, אז גם רקע */
.btn.ghost:active{background:var(--accent-soft)}
.dpbtn:active{background:var(--clay-row)}
.tpclr:active,.del-link:active{opacity:.6}
.tpclr,.del-link{transition:opacity var(--dur-press) var(--ease-out)}
/* ריחוף רק בעכבר: בטלפון ריחוף "נתקע" אחרי נגיעה */
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(.96)}
  .btn.ghost:hover{background:var(--accent-soft);filter:none}
  .chip:hover{background:var(--clay-row)}
  .chip[aria-pressed="true"]:hover{background:var(--chip-on-bg)}
  .tile:hover{transform:translateY(-2px)}
  .kc:hover,.ev:hover{transform:translateY(-1px)}
  .namebtn:hover{text-decoration-color:currentColor}
  .setmenu button:not(.on):hover{background:var(--clay-row)}
  nav button:not([aria-current]):hover{background:var(--bar-ctl)}
  .iconbtn:hover{background:var(--bar-ctl-hover)}
  .bars:hover .bar i{opacity:.45}.bars .bar:hover i{opacity:1}.bar:hover{background:var(--clay-row)}
  tr.row:hover td{background:var(--clay-row)}
  .seg button:not(.on):hover{background:color-mix(in srgb,var(--surface) 50%,transparent)}
  .steps button:not(.now):hover{filter:brightness(.96)}
  .kmore:hover,.dmore:hover{background:var(--accent-soft)}
  .dpbtn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .dgrid button:not([aria-pressed="true"]):hover,.tlist button:not([aria-selected="true"]):hover,.tpclr:hover{background:var(--clay-row)}
}

/* =====================================================================
   15. טלפון: אפליקציה מותקנת, לא אתר  (max-width:820px)
   סרגל עליון מתחת לשורת המצב, סרגל לשוניות תחתון מעל קו הבית, גיליון תחתון לליד,
   יעדי מגע של 44px לפחות, שדות של 16px (בלי זום), ושום דבר לא מוסתר מתחת לסרגלים.
   סדר: 15.1 טוקנים · 15.2 בסיס · 15.3 סרגלים · 15.4 כפתור צף והודעה · 15.5 היום
        15.6 לידים · 15.7 החלקה על שורה · 15.8 לוח · 15.9 יומן · 15.10 הגדרות
        15.11 גיליון · 15.12 בוררים · 15.13 טלפון צר (עד 480px)
   ===================================================================== */
@media (max-width:820px){
  /* 15.1 טוקנים: רק גדלים משתנים; צבעים לא */
  :root,:root[data-theme="dark"]{
    --btn-h:var(--ctl-touch);--btn-h-sm:var(--ctl-touch);--chip-h:var(--ctl-touch);--field-h:var(--ctl-lg);--field-fs:var(--fs-input);
    --iconbtn:var(--ctl-cell);--avatar:36px;
    --tabbar-h:64px;--tab-fs:var(--fs-2xs);--tab-ic:var(--ic-lg);
    --fab-h:var(--ctl-xl);--toast-h:3.25rem;
    --sheet-w:100%;--sheet-max:40rem;--sheet-gap:max(var(--safe-t),var(--sp-3));--sheet-foot-h:5.5rem;
    --gut:var(--sp-4);--gut-s:max(var(--gut),var(--safe-r));--gut-e:max(var(--gut),var(--safe-l)); /* ריווח צד: s = ימין (תחילת השורה), e = שמאל */
    --above-bar:calc(var(--tabbar-h) + var(--safe-b))}

  /* 15.2 בסיס */
  html,body{overscroll-behavior-y:none}
  /* שדות: 16px לפחות, אחרת אייפון מגדיל את הדף ולא מקטין חזרה */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:var(--fs-input)!important}
  .home,.week,.setgrid{grid-template-columns:minmax(0,1fr)}
  main{padding:var(--sp-4) var(--gut-s) calc(var(--above-bar) + var(--fab-h) + var(--sp-8)) var(--gut-e)}
  .view.on{gap:var(--sp-4)}
  .card{padding:var(--sp-4)}
  .skip{min-height:var(--ctl-touch);display:flex;align-items:center}
  .more{min-height:var(--ctl-touch);align-items:center}
  .kmore,.dmore,.lv-page .btn{min-height:var(--ctl-touch)}
  /* טיפוגרפיה: כותרת גדולה וצפופה, גוף רגיל, טקסט קטן מעט מרווח */
  h1{font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
  .namebtn,td .nm{letter-spacing:var(--ls-name)}
  .pill,.src,.badge,.dv-note,.tl small{letter-spacing:var(--ls-small)}

  /* 15.3 סרגלים. חומר: הכחול של StayUpdated שקוף מעט עם טשטוש, והתוכן נגלל מתחתם.
     החומר של הסרגל העליון יושב על ::before: backdrop-filter על header עצמו היה הופך אותו למכיל של סרגל הלשוניות הקבוע */
  header{background:none}
  header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar-glass);-webkit-backdrop-filter:var(--bar-blur);backdrop-filter:var(--bar-blur);box-shadow:inset 0 -1px 0 var(--edge-lo)}
  .top{padding:calc(var(--safe-t) + var(--sp-2)) var(--gut-s) var(--sp-2) var(--gut-e);min-height:calc(var(--appbar-h) + var(--safe-t))}
  .search{display:none}
  .who{margin-inline-start:auto}
  .net{padding-inline:var(--gut-e)}
  /* סרגל לשוניות תחתון, מעל קו הבית */
  header nav{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-tabbar);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1);
    padding:var(--sp-1) max(var(--sp-2),var(--safe-r)) calc(var(--sp-1) + var(--safe-b)) max(var(--sp-2),var(--safe-l));min-height:var(--above-bar);
    background:var(--bar-glass);-webkit-backdrop-filter:var(--bar-blur);backdrop-filter:var(--bar-blur);box-shadow:var(--sh-tabbar)}
  header nav button{flex-direction:column;justify-content:center;gap:var(--sp-0);padding:var(--sp-1) 0;min-height:calc(var(--tabbar-h) - var(--sp-2));font-size:var(--tab-fs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-small)}
  header nav button .ic{width:var(--tab-ic);height:var(--tab-ic);fill:currentColor;fill-opacity:0;transition:fill-opacity var(--dur-fast) var(--ease-out)}
  header nav button[aria-current="page"] .ic{fill-opacity:.16} /* מתאר ברגיל, מילוי עדין בלשונית הפתוחה */
  nav .count{position:absolute;top:var(--sp-1);inset-inline-start:calc(50% + var(--sp-1))}

  /* 15.4 "ליד חדש": צף מעל סרגל הלשוניות, ליד האגודל; בגלילה למטה מתכווץ ל-"+", ומתרומם כשמופיעה הודעה */
  .fab{bottom:calc(var(--above-bar) + var(--sp-3));inset-inline-start:var(--gut-s);min-width:var(--fab-h);justify-content:center;
    transition:translate var(--dur-exit) var(--ease-out),transform var(--dur-press) var(--ease-out),padding var(--dur-base) var(--ease-out),gap var(--dur-base) var(--ease-out)}
  .fab .ic{width:var(--ic-lg);height:var(--ic-lg)}
  .fab .fl{max-width:6.5em;overflow:hidden;transition:max-width var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
  .fab.mini{padding:0;gap:0}.fab.mini .fl{max-width:0;opacity:0}
  body:has(.toast.show) .fab{translate:0 calc(-1 * (var(--sp-3) + var(--toast-h)));transition-duration:var(--dur-page),var(--dur-press),var(--dur-base),var(--dur-base)} /* עולה יחד עם ההודעה (420) ויורד יחד איתה (240) */ /* translate נפרד, כדי שהלחיצה (transform) לא תוריד אותו בחזרה */
  body:has(#v-set.on) .fab{display:none} /* בהגדרות אין לו תפקיד, והוא הסתיר טקסט */
  /* הודעה: ברוחב המסך, מעל סרגל הלשוניות (ובתוך גיליון: מעל הכפתורים שלו) */
  .toast{left:max(var(--sp-3),var(--safe-l));right:max(var(--sp-3),var(--safe-r));bottom:calc(var(--above-bar) + var(--sp-3));max-width:none;transform:translateY(var(--shift-md))}
  .toast.show{transform:none}
  .toast #toast-t{flex:1}
  .toast{touch-action:none} /* גרירה למטה סוגרת (app.js) */
  .toast .btn{min-height:var(--ctl-touch);padding:0 var(--sp-4)}
  html.locked .toast{bottom:calc(var(--sheet-foot-h) + var(--safe-b) + var(--kb,0px))}

  /* 15.5 היום: קודם מי מחכה, אחר כך ההתקנות, ורק אחריהן המספרים והגרפים (בלי לשנות HTML) */
  .greet{gap:var(--sp-1) var(--sp-3)}
  .greet h1{font-size:var(--fs-2xl);font-weight:var(--fw-medium);letter-spacing:var(--ls-title)}
  .greet .next{line-height:var(--lh-comfy)}
  .home .stack{display:contents}
  .home .stack>.card:nth-child(2){order:1}
  .home .stack>.tiles{order:2}
  .home .stack>.card:nth-child(n+3){order:3}
  .home>.card:first-child{background:none;box-shadow:none;padding:0}
  .home>.card:first-child>.head{padding-inline:var(--sp-1);margin-bottom:var(--sp-3)}
  /* כרטיס "לטיפול עכשיו": כל הכרטיס נלחץ ופותח את הליד; הכפתורים והציטוט מעליו */
  .todo li{position:relative;padding:var(--sp-4);border-radius:calc(var(--btn-r) + var(--sp-4));box-shadow:var(--card-sh);background:var(--card-bg);transition:transform var(--dur-press) var(--ease-out)}
  .todo .namebtn::after{content:"";position:absolute;inset:0;border-radius:inherit}
  .todo .acts,.todo .quote{position:relative;z-index:var(--z-raised)}
  .todo li:has(.namebtn:active){transform:scale(var(--press-card));transition-delay:var(--press-delay)}
  /* "ביטול": פס דק שמתרוקן מראה כמה זמן נשאר */
  .todo li.undo{position:relative;overflow:hidden}
  .todo li.undo::after{content:"";position:absolute;inset-inline:var(--sp-5);bottom:var(--sp-2);height:2px;border-radius:var(--r-full);background:currentColor;opacity:.3;transform-origin:right;animation:drain var(--undo-wait) linear forwards}
  .todo .acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .todo .acts .btn{width:100%}
  .todo .acts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} /* בלי טלפון: שלוש בשורה */
  .todo .acts:has(> :nth-child(3):last-child) .btn{padding-inline:var(--sp-2)}
  .todo li.undo{min-height:var(--ctl-lg)}
  .tiles{gap:var(--sp-3)}
  /* אריחים בטלפון: כל האריח נלחץ, אז "לפתיחה" מתקצר לחץ בפינה, והאריח נמוך יותר (פחות גלילה עד הגרפים) */
  .tile{position:relative;padding:var(--sp-3) var(--sp-4);min-height:5.5rem}
  .tile b{letter-spacing:var(--ls-num);font-weight:var(--fw-semibold)}
  .tile>span:not(.go):not(.tnote){display:block;line-height:var(--lh-base)}
  .tile .go{position:absolute;top:var(--sp-3);inset-inline-end:var(--sp-4);margin:0;font-size:0}
  .tile .go::after{content:"←";font-size:var(--fs-md)}
  /* גרפים בטלפון: עמודה עבה יותר לאצבע ולעין, ושורה בגובה נגיעה כדי שהקריאה תהיה נוחה */
  .bar{min-height:2rem}
  .bar i{height:14px}
  .inst li{min-height:3.5rem}
  .inst li.inst-empty{min-height:0}

  /* 15.6 לידים: כותרת ותצוגה, חיפוש ו"סינון", והמסננים נפתחים רק כשצריך */
  .titlerow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h v" "q f" "x x";gap:var(--sp-3)}
  .titlerow h1{grid-area:h}.titlerow #lv-q{grid-area:q}.titlerow .seg{grid-area:v;justify-self:end}
  .titlerow select,.titlerow input[type=search]{width:100%;min-width:0}
  .seg{margin-inline-start:0}
  .seg button{min-height:var(--ctl-touch);padding:0 var(--sp-4)}
  .fbtn{display:inline-flex;grid-area:f;min-height:var(--field-h);gap:var(--sp-2);padding:0 var(--sp-4)}
  .fbtn.on{border-color:var(--accent);color:var(--accent);font-weight:var(--fw-semibold)}
  .fbtn .fcount{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;border-radius:var(--r-full);background:var(--accent);color:var(--surface);font-size:var(--fs-xs)}
  .xf{grid-area:x;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3)}
  .xf[data-open]{display:grid}
  /* שורת צ'יפים שנגללת לצדדים, מקצה לקצה (גם בהגדרות) */
  .chips,.setmenu.card{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);overscroll-behavior-x:contain}
  .chips::-webkit-scrollbar,.setmenu.card::-webkit-scrollbar{display:none}
  .chips .chip{flex:none}
  .legend{margin-inline-start:0;flex-wrap:wrap}
  /* רשימה כמו של אפליקציה: שורה גבוהה, שם וסטטוס למעלה, הצעד הבא והטלפון מתחת */
  #lv-list{position:relative;padding:0 var(--gut);overflow:hidden}
  #lv-list table,#lv-list tbody{display:block}
  #lv-list thead{display:none}
  #lv-list tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "x p";align-items:center;gap:var(--sp-1) var(--sp-3);
    min-height:4.5rem;padding:var(--sp-3) var(--gut);margin-inline:calc(-1 * var(--gut));border-bottom:1px solid var(--line);background:var(--card-bg);touch-action:pan-y;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color var(--dur-fast)}
  #lv-list tr.row:last-child{border:0}
  #lv-list tr.row:active{background:var(--clay-row);transition-delay:var(--press-delay)}
  #lv-list td{border:0;padding:0;background:none!important;min-width:0}
  #lv-list td:nth-child(1){grid-area:n;max-width:none}
  #lv-list td:nth-child(4){grid-area:s;justify-self:end;align-self:start}
  #lv-list td:nth-child(5){grid-area:x;font-size:var(--fs-sm);color:var(--muted)}
  #lv-list td:nth-child(2){grid-area:p;justify-self:end;font-size:var(--fs-sm);color:var(--muted)}
  #lv-list td.ph.none,#lv-list td:nth-child(3),#lv-list td:nth-child(6),#lv-list td:nth-child(7){display:none}
  #lv-list td .nm{font-size:var(--fs-lg)}

  /* 15.7 החלקה על שורה: הפעולות מתחת לשורה, נחשפות כשהיא זזה */
  #lv-list tr.row.sw-on{position:relative;z-index:var(--z-raised);box-shadow:var(--ring-1) var(--line)}
  .sw-under{position:absolute;inset-inline:0;z-index:0;display:flex;justify-content:space-between;overflow:hidden}
  .sw-side{display:flex;flex-direction:row;height:100%;width:var(--x,0px);overflow:hidden} /* מימין: התקשרות, וואטסאפ. משמאל: לא רלוונטי, ובקצה "לחזור מחר" */
  .sw-under[data-dir="call"] .sw-later,.sw-under[data-dir="later"] .sw-call,.sw-under:not([data-dir]) .sw-side,.sw-under[data-dir=""] .sw-side{width:0}
  .sw-b{flex:1 1 var(--sw-btn-w);min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);border:0;color:var(--sw-fg);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-decoration:none;cursor:pointer;
    transition:flex-basis var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
  .sw-b .ic{width:var(--ic-lg);height:var(--ic-lg)}
  .sw-b span{white-space:nowrap;transition:opacity var(--dur-fast) var(--ease-out)}
  .sw-under.tight .sw-b span{opacity:0}
  .sw-tel{background:var(--fill-call)}.sw-wa{background:var(--fill-wa)}.sw-mail{background:var(--fill-mail)}
  .sw-tomorrow{background:var(--fill-later)}.sw-lost{background:var(--fill-lost)}
  .sw-under.armed .sw-lost{flex:0 0 0;opacity:0} /* החלקה מלאה: "לחזור מחר" ממלא את הרוחב */
  .sw-under.armed .sw-tomorrow{flex-grow:1}
  .sw-b:active{filter:brightness(.92)}

  /* 15.8 לוח: עמודות שנגללות לצדדים ונעצרות כל אחת במקום (גלילה של הדפדפן, לא של קוד) */
  .kanban{grid-template-columns:repeat(6,82%);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none}
  .kanban::-webkit-scrollbar{display:none}
  .col{scroll-snap-align:start;min-height:10rem}
  .kc{min-height:var(--ctl-lg);padding:var(--sp-3)}

  /* 15.9 יומן: סדר יום. כל יום שורה: התאריך מימין, מה שיש בו משמאל. מעבר שבוע גם ליד האגודל */
  .weekhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"h h t" "n r p" "l l l";gap:var(--sp-2) var(--sp-3);align-items:center}
  .weekhead h1{grid-area:h}
  .weekhead [data-wk="7"]{grid-area:n}.weekhead [data-wk="-7"]{grid-area:p}.weekhead [data-wk="0"]{grid-area:t}
  .weekhead>b{grid-area:r;text-align:center}
  .weekhead .btn.icon{width:var(--ctl-touch)}
  .weekhead .legend{grid-area:l;gap:var(--sp-3)}
  .week{gap:var(--sp-2)}
  .week,.wkempty{touch-action:pan-y}
  .week.blank .day{display:none}
  .day{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--sp-3);align-items:center;padding:var(--sp-3);min-height:0;border-radius:calc(var(--r-md) + var(--sp-3))}
  .day>h2{display:block;margin:0;align-self:start}
  .day h2>span,.day h2 .dcount{display:none}
  .day:not(:has(.ev)){padding-block:var(--sp-2)}
  .day:not(:has(.ev))::after{padding:0;font-size:var(--fs-sm)}
  .evs{display:grid;gap:var(--sp-2);min-width:0}.evs:empty{display:none}
  .dl{display:grid;justify-items:center;line-height:var(--lh-snug);border-radius:var(--r-md);padding:var(--sp-1) 0;color:var(--muted)}
  .dl i:first-child{font-size:var(--fs-xs);font-weight:var(--fw-medium)}
  .dl i:last-child{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--fg)}
  .day.today .dl{background:var(--accent)}.day.today .dl i{color:var(--surface)}
  .ev{min-height:var(--ctl-lg);margin:0;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-md)}
  .ev .tm{font-size:var(--fs-md)}
  .dmore-list:not([hidden]){display:grid;gap:var(--sp-2)}
  .wkfoot{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .wkfoot .btn{justify-content:center}
  .wkempty{display:grid;justify-items:center;gap:var(--sp-1);margin:0;padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--muted);background:var(--well);border-radius:var(--item-r)}
  .wkempty .ic{width:var(--ic-xl);height:var(--ic-xl);margin-block-end:var(--sp-1)}
  .wkempty b{color:var(--fg);font-size:var(--fs-lg)}

  /* 15.10 הגדרות: הנושאים כשורת צ'יפים (אותו רכיב כמו .chip), כל טופס בעמודה אחת */
  .setmenu.card{flex-direction:row;background:none;box-shadow:none;gap:var(--sp-2);border-radius:0;padding-block:0}
  .setmenu button{flex:none;min-height:var(--chip-h);padding:0 var(--sp-4);border:1px solid var(--line);background:var(--surface);border-radius:var(--chip-r);font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}
  .setmenu button.on{background:var(--chip-on-bg);color:var(--chip-on-fg);border-color:transparent;font-weight:var(--fw-semibold)}
  .setpane .form{grid-template-columns:minmax(0,1fr)}
  .setpane .form .btn{min-height:var(--ctl-lg)}
  .setpane .form label.chk input{width:var(--check);height:var(--check)}
  .srclist li,.users li{flex-wrap:wrap;min-height:var(--ctl-lg)}.users li{flex-wrap:nowrap}
  .themes .chip{min-width:5.5rem;justify-content:center}

  /* 15.11 ליד: גיליון תחתון במקום מגירת צד. ידית גרירה, גרירה למטה סוגרת (קפיצים ב-app.js), עולה מעל המקלדת */
  .drawer{inset:auto 0 var(--kb,0px) 0;max-width:var(--sheet-max);margin-inline:auto;height:calc(100dvh - var(--sheet-gap) - var(--sp-2) - var(--kb,0px));
    border-radius:var(--sheet-r) var(--sheet-r) 0 0;box-shadow:var(--sh-sheet),inset 0 1px 0 var(--sheet-edge);transform:translateY(calc(100% + 2rem));will-change:transform;
    transition:transform var(--dur-exit) var(--ease-out),visibility 0s linear var(--dur-exit)}
  .drawer.open{transform:none;transition:transform var(--dur-page) var(--ease-out)}
  .drawer::after{content:"";position:absolute;inset-inline:0;top:100%;height:12rem;background:var(--surface)} /* משיכה למעלה לא חושפת חור */
  /* הקו מתחת לכותרת מופיע רק כשתוכן נגלל מתחתיה */
  .dh{padding:var(--sp-2) var(--gut) var(--sp-3);touch-action:none;cursor:grab;border-bottom-color:transparent;transition:border-color var(--dur-fast)}
  .drawer.scrolled .dh{border-bottom-color:var(--line)}
  .grab{display:block;width:var(--grab-w);height:var(--grab-h);border-radius:var(--r-full);background:var(--grab-c);margin:0 auto var(--sp-3);transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .drawer.drag .grab{background:var(--muted);transform:scaleX(1.12)} /* הידית מגיבה כשתופסים */
  textarea{resize:none;field-sizing:content;min-height:5.5rem;max-height:14rem} /* בטלפון אין ידית שינוי גודל: השדה גדל עם הטקסט */
  #d-sub span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#d-sub span+span::before{content:none} /* משרד בשורה, מתי ומאיפה בשורה */
  .dh h2{font-size:var(--fs-sheet);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-title)}
  .dh .head .icon{width:var(--ctl-touch);height:var(--ctl-touch);border-radius:50%;background:var(--well);border-color:transparent}
  .dh .acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .dh .acts:empty{display:none}
  .dh .acts .btn,.df .btn{min-height:var(--ctl-lg);font-size:var(--fs-md)}
  .db{padding:var(--gut);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .df{padding:var(--sp-3) var(--gut) calc(var(--sp-3) + var(--safe-b))}
  html.kb .df{padding-bottom:var(--sp-3)}
  .df .btn.primary{flex:1}
  .df .danger{margin-inline-start:0}
  .steps button{min-height:var(--ctl-touch);font-size:var(--fs-sm)}
  .note-row .btn{min-height:var(--field-h)}
  .del-link{min-height:var(--ctl-touch)}
  /* שם ארוך מאוד: עד שתי שורות בכותרת (המלא בשדה "שם" ובלחיצה ארוכה) */
  .dh h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  /* מקלדת פתוחה (אייפון): הכותרת בשורה אחת, בלי שורת המשנה והכפתורים, כדי שהשדה שמקלידים בו יישאר גלוי */
  html.kb .dh h2{-webkit-line-clamp:1;line-clamp:1}
  html.kb #d-sub,html.kb .dh .acts{display:none}

  /* 15.12 בוררים: התאריך נפתח בתוך הטופס (כמו באייפון), לא חלון צף שנחתך */
  .dpop{position:static;width:100%;max-width:none;margin-top:var(--sp-2);transform:none;transform-origin:top center}
  .dpop:not(.open){display:none}
  .dpop.open{animation:dpin var(--dur-fast) var(--ease-out)}
  .dpop .quick .chip{min-height:var(--ctl-touch);flex:1;justify-content:center}
  .dgrid button{min-height:var(--ctl-cell);font-size:var(--fs-md)}
  .dpop .foot .btn{min-height:var(--ctl-touch)}
  .tp .field{width:4rem}
  .tpclr{width:var(--ctl-touch);height:var(--ctl-touch)}
  .tlist{width:6rem;max-height:15rem}
  .tlist button{min-height:var(--ctl-touch);font-size:var(--fs-md)}
}
/* מסך נמוך בטלפון (מקלדת פתוחה באנדרואיד, שם המסך מתכווץ): אותה כותרת קומפקטית */
@media (max-width:820px) and (max-height:560px){
  .dh h2{-webkit-line-clamp:1;line-clamp:1}
  #d-sub,.dh .acts{display:none}
  .tlist{max-height:min(15rem,40dvh)}
}
/* 15.13 טלפון צר: טופס הליד בעמודה אחת, שלבי הסטטוס בשתי שורות */
@media (max-width:480px){
  .fields{grid-template-columns:minmax(0,1fr)}.fields .w2{grid-column:auto}
  .steps{flex-wrap:wrap}.steps button{flex:1 1 30%}
}

/* ================= 16. העדפות מערכת ================= */
/* פחות שקיפות: סרגלים מלאים, בלי טשטוש */
@media (max-width:820px) and (prefers-reduced-transparency:reduce){
  header::before,header nav{background:var(--bar-grad);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* יותר ניגודיות: קצה בהיר חזק יותר בראש סרגל הלשוניות */
@media (max-width:820px) and (prefers-contrast:more){
  :root,:root[data-theme="dark"]{--edge-hi:var(--edge-hi-strong)}
}