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

/* ===========================================================================
   רשת ביטחון ללידים — מערכת העיצוב

   שלושה עקרונות שחיים הגדיר, וכל שורה כאן משרתת אותם:

   1. הצבע נושא משמעות, לא קישוט. עם ADHD, ממשק אפור וחד-גוני הוא כישלון
      תפקודי — הוא פשוט לא נכנס אליו. שלושת האגפים מקבלים שלוש זהויות צבע
      נפרדות, וחמש רמות הבשלות סולם חם-קר שנקרא בלי לקרוא.

   2. הכל לחיץ. כל מספר, תווית, תג וערך הוא גם פקד סינון. לכן יש מחלקת
      .clickable אחידה שנותנת לכל דבר כזה מראה של כפתור.

   3. ניווט בחלונות, לא רשימה שטוחה. מסך פתיחה עם שלושה שערים גדולים,
      ואז צלילה פנימה — רשימה, ואז חלון של ליד יחיד.
   =========================================================================== */

:root {
  --bg:            #100E0A;
  --bg-2:          #191509;
  --surface:       #1E1A13;
  --surface-2:     #2A241A;
  --line:          #3A3226;
  --text:          #F6F2E9;
  --text-dim:      #A2957C;
  /* 4.6:1 מול הרקע. הגוון הקודם היה 3.3 ולא נקרא בנוחות */
  --text-faint:    #8E836E;


  /* צבע הפעולה היחיד במערכת. זהב הוא מה שאפשר ללחוץ עליו, ותו לא. */
  --primary:       #C8A44B;
  --secondary:     #E6D096;
  --accent-teal:   #6E8280;
  /* טקסט שיושב על שבב בהיר. תמיד הצבע הזה, אף פעם לא כחול. */
  --on-accent:     #17130C;
  /* משטח שמורם מעל הרקע. בכהה מבהירים, בבהיר מכהים,
     ולכן רק הצבע מתחלף והשקיפויות נשארות כמו שהן. */
  --tint-rgb:      255, 255, 255;
  --shade-rgb:     0, 0, 0;
  --buyer:         #6FA8B8;
  --buyer-deep:    #2E5A66;
  --seller:        #8FB56A;
  --seller-deep:   #47632F;
  --developer:     #B98CC9;
  --developer-deep:#6B4478;
  --broker:        #E08A5F;
  --broker-deep:   #7D4326;

  --cold:          #7A7264;
  --interested:    #A89A78;
  --serious:       #C8A44B;
  --ready:         #E08A3F;
  --hot:           #D4553C;

  --wait:          #E6D096;
  --wait-bg:       rgba(230, 208, 150, .12);
  --wait-line:     rgba(230, 208, 150, .55);

  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 18px 45px rgba(var(--shade-rgb), .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 clamp(12px, 3vw, 34px) 90px;
  font-family: "Heebo", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 680px at 88% -14%, rgba(200, 164, 75, .16), transparent 64%),
    radial-gradient(900px 560px at 4% 0%,    rgba(110, 130, 128, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.view[hidden] { display: none; }

/* כל דבר שאפשר ללחוץ עליו כדי לסנן — מראה אחיד שמזמין לחיצה */
.clickable {
  cursor: pointer;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
  transition: transform .13s, filter .13s, background .13s;
}
.clickable:hover { transform: translateY(-2px); filter: brightness(1.18); }
.clickable:active { transform: translateY(0); }

/* ── כותרת עליונה ────────────────────────────────────────────────────────── */

.top {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
  padding: 22px 0 16px;
}

.brand {
  display: flex; align-items: center; gap: 14px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: right;
}
.brand:hover .logo { transform: rotate(-8deg) scale(1.06); }

.logo {
  /* הסמל עומד בפני עצמו ולא יושב על אריח צבעוני. אריח היה מסתיר את קו
     הקרקע של הלוגו, וקו הקרקע הוא חצי מהסיפור שלו. */
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  transition: transform .18s;
}
.logo svg { width: 100%; height: 100%; display: block; }

.top h1 {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 900; letter-spacing: -.4px;
  background: linear-gradient(95deg, var(--secondary), var(--primary) 60%, var(--text));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub {
  margin: 3px 0 0; font-size: 13px; font-weight: 500;
  color: var(--text-dim); letter-spacing: .1px;
  display: flex; align-items: center; gap: 7px;
}
/* נקודת זהב לפני הטאגליין. בלעדיה השורה נראית כמו הערה שנשכחה
   מתחת לשם, ולא כמו חלק מהמותג. */
.sub::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); flex: none; opacity: .85;
}

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

.pulse {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding: 4px 0 14px;
}

.pulse-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 18px;
  font-family: inherit; text-align: right; cursor: pointer;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--p) 20%, var(--surface)), var(--bg-2));
  border: 1.5px solid color-mix(in srgb, var(--p) 45%, transparent);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pulse-card:hover {
  transform: translateY(-3px); border-color: var(--p);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--p) 22%, transparent);
}
.pulse-card.quiet { opacity: .55; }
.pulse-num {
  font-size: 42px; font-weight: 900; line-height: 1; color: var(--p);
  font-variant-numeric: tabular-nums; min-width: 1.6ch;
}
.pulse-text { display: grid; gap: 2px; min-width: 0; }
.pulse-text b { font-size: 15.5px; font-weight: 800; }
.pulse-text span { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

/* ── השורה השנייה: כל השאר, דק וקטן ─────────────────────────────────────── */

.counters {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 0 20px;
}
.counter {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  font-family: inherit; text-align: right; cursor: pointer;
  background: rgba(var(--tint-rgb), .05);
  border: 1px solid var(--line);
  transition: all .13s;
}
.counter:hover { border-color: var(--accent); transform: translateY(-2px); }
.counter b { font-size: 17px; font-weight: 900; color: var(--accent);
             font-variant-numeric: tabular-nums; }
.counter span { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.counter.is-on { background: rgba(var(--tint-rgb), .13); box-shadow: 0 0 0 2px var(--accent); }
/* נקודת צבע לפני המספר. בלעדיה שישה שבבים אפורים נראים זהים, והעין
   לא יודעת מה מהם דורש פעולה ומה סתם מצב. */
.counter-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); align-self: center;
}
/* מונה על אפס עדיין לחיץ — לפעמים רוצים לוודא שבאמת אין — אבל הוא
   לא מתחרה על תשומת הלב מול מונה שיש מאחוריו עבודה. */
.counter.zero { opacity: .45; }
.counter.zero:hover { opacity: 1; }
.counter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── מסך 1: שלושת השערים ─────────────────────────────────────────────────── */

.gates {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  padding: 10px 0 26px;
}

.gate {
  position: relative;
  padding: 22px 24px 17px;
  border-radius: 24px;
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: right;
}
.gate::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 85% -20%,
              color-mix(in srgb, var(--g) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.gate.g-buyer     { --g: var(--buyer); }
.gate.g-seller    { --g: var(--seller); }
.gate.g-developer { --g: var(--developer); }
.gate.g-broker    { --g: var(--broker); }
/* החלון החמישי. זהב ולא צבע אגף, כי מכרזים אינם עוד קטגוריה של אנשים
   אלא מקור נתוני שוק — וההבדל הזה צריך להיראות במבט אחד. */
.gate.g-michrazim { --g: var(--primary); display: flex; flex-direction: column; }
/* לחלון הזה שורת בשלות אחת במקום חמש, ולכן הוא נמוך מהאגפים ונשאר לו
   שטח ריק בתחתית. דחיפת הכפתור למטה סוגרת אותו והכרטיס נראה מכוון. */
.gate.g-michrazim .gate-enter { margin-top: auto; }
.gate.g-michrazim .gate-title::before {
  content: "⚑"; margin-inline-end: 8px; color: var(--primary); font-size: .85em;
}
/* החלון השישי: רדאר המתחרים. הוא מוביל למערכת אחרת בפורט אחר, ולכן
   הוא נבדל גם בצבע (אקצנט ולא זהב) וגם בחץ יציאה בכותרת. דלת אחת
   בלבד למערכת ההיא, כדי שלא ייווצרו שני מקומות לאותו דבר. */
.gate.g-radar { --g: var(--accent, #6E8280); display: flex; flex-direction: column; }
.gate.g-radar .gate-enter { margin-top: auto; }
.gate.g-radar .gate-title::before {
  content: "◧"; margin-inline-end: 8px; color: var(--g); font-size: .85em;
}
.gate.g-radar .split, .gate.g-radar .gate-total, .gate.g-radar .gate-enter {
  text-decoration: none;
}

.gate:hover { border-color: var(--g); }

.gate-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; position: relative;
}
.gate-title {
  margin: 0; font-size: 27px; font-weight: 900; color: var(--g);
  letter-spacing: -.5px;
}
.gate-total {
  font-size: 46px; font-weight: 900; line-height: 1; color: var(--g);
  padding: 0 6px; border-radius: 12px;
}
.gate-total:hover { background: color-mix(in srgb, var(--g) 18%, transparent); }

.gate-split { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; position: relative; }

.split {
  flex: 1 1 auto; min-width: 74px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(var(--tint-rgb), .06);
  border: 1px solid var(--line);
  text-align: center;
}
.split b { display: block; font-size: 19px; font-weight: 900; }
.split span { font-size: 12.5px; color: var(--text-dim); }
.split:hover { background: rgba(var(--tint-rgb), .13); border-color: var(--g); }

.gate-bars { margin-top: 12px; display: grid; gap: 4px; position: relative; }

.bar-row {
  display: grid; grid-template-columns: 84px 1fr 30px;
  gap: 9px; align-items: center;
  padding: 5px 8px; border-radius: 9px;
  font-size: 12.5px;
}
.bar-row:hover { background: rgba(var(--tint-rgb), .07); }
.bar-row span:first-child { color: var(--m); font-weight: 700; }

/* שתי הרמות שמכניסות כסף החודש נקראות ראשונות: טקסט גדול יותר,
   פס עבה יותר ומספר בצבע הרמה. */
.bar-row.hot { font-size: 14px; padding: 7px 8px; }
.bar-row.hot .bar-track { height: 12px; }
.bar-row.hot b { font-size: 16px; }

/* שלוש הרמות הקרות יורדות לשורה אחת דקה מתחתיהן. הן עדיין שם, עדיין
   לחיצות, ועדיין מציגות מספר — הן פשוט כבר לא מתחרות. */
/* flex ולא שלוש עמודות שוות: "בודק ברצינות" ארוך פי שלושה מ"קר",
   ובעמודות שוות הוא נחתך ל"בודק ברצי…". כאן כל תווית מקבלת בדיוק
   את הרוחב שהיא צריכה. */
.bar-cool {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px;
  margin-top: 7px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.bar-cool .bar-row {
  flex: 0 1 auto; display: inline-flex; align-items: baseline;
  gap: 6px; padding: 6px 8px; font-size: 12.5px; opacity: .8;
}
.bar-cool .bar-row:hover { opacity: 1; }
.bar-cool .bar-track { display: none; }
.bar-cool .bar-row span:first-child { white-space: nowrap; }
.bar-cool .bar-row b { font-size: 13px; text-align: start; color: var(--text); }
.bar-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.bar-track { height: 9px; border-radius: 99px; background: rgba(var(--tint-rgb), .07);
             overflow: hidden; }
/* הרוחב והצבע נכתבים inline מה-JS — ראה ההערה ב-gate().
   display:block הוא לא קישוט: הפס הוא span בתוך span, ואלמנט inline
   מתעלם לגמרי מ-width ומ-height. בלי זה רואים רק את המסילה האפורה
   וכל חמשת הפסים נראים ריקים — בדיוק מה שקרה בפועל. */
.bar-fill { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.bar-row b { font-size: 13px; font-weight: 900; text-align: left; color: var(--text-dim); }
.bar-row.zero { opacity: .38; }

.gate-enter {
  display: block; width: 100%; margin-top: 14px;
  padding: 11px; border-radius: 13px;
  font-size: 14.5px; font-weight: 800;
  background: color-mix(in srgb, var(--g) 22%, transparent);
  color: var(--g);
  position: relative;
}
.gate-enter:hover { background: var(--g); color: var(--on-accent); }

.home-extra { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 30px; }

/* ── פירורי לחם ──────────────────────────────────────────────────────────── */

.crumb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 0 18px; }
.crumb h2 { margin: 0; font-size: clamp(19px, 3vw, 25px); font-weight: 900; }
.crumb-count { font-size: 14px; color: var(--text-dim); }

.back {
  padding: 9px 17px; border-radius: 11px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--text-dim);
  background: rgba(var(--tint-rgb), .07);
  border: 1px solid var(--line);
  cursor: pointer; transition: all .14s;
}
.back:hover { color: var(--text); transform: translateX(4px); }

/* ── סרגל חיפוש וסינון פעיל ──────────────────────────────────────────────── */

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 20px; }
.search-wrap { position: relative; flex: 1 1 300px; }
.search-icon {
  position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--text-faint); pointer-events: none;
}
#search {
  width: 100%; padding: 13px 44px 13px 15px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); border-radius: 14px; outline: none;
  transition: border-color .15s, background .15s;
}
#search::placeholder { color: var(--text-faint); }
#search:focus { border-color: var(--buyer); background: color-mix(in srgb, var(--buyer) 9%, transparent); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); color: var(--text-dim);
  cursor: pointer; transition: all .14s;
}
.chip:hover { color: var(--text); transform: translateY(-1px); }
.chip.is-on { color: var(--on-accent); font-weight: 800; border-color: transparent; background: var(--c, var(--text-dim)); }
.chip .x { font-size: 15px; opacity: .7; }

/* ── רשימת כרטיסים ───────────────────────────────────────────────────────── */

.list {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

.card {
  /* עמודת flex ולא בלוק: כך פס הפעולות נצמד לתחתית הכרטיס (margin-top:auto
     ב-.card-quick), וכל הכרטיסים בשורה מתיישרים לאותו גובה. קודם כרטיס
     עם ציטוט קצר הותיר חור שחור מתחתיו והרשימה נראתה שבורה. */
  display: flex; flex-direction: column;
  position: relative; padding: 20px 22px 16px;
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden; cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover { transform: translateY(-3px); border-color: var(--side-solid, var(--line)); }
/* בעמודת flex ילדים נמתחים לכל הרוחב כברירת מחדל. שבב הבשלות ותג
   המעקב הם כפתורים קומפקטיים ולא פסים — הם נצמדים לתחילת השורה. */
.card > .maturity, .card > .followup { align-self: flex-start; }
.card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 6px; background: var(--side-color, var(--line));
}
.card.side-buyer     { --side-color: var(--buyer);     --side-solid: var(--buyer); }
.card.side-seller    { --side-color: var(--seller);    --side-solid: var(--seller); }
.card.side-developer { --side-color: var(--developer); --side-solid: var(--developer); }
.card.side-broker    { --side-color: var(--broker);    --side-solid: var(--broker); }
.card.side-multi     { --side-color: linear-gradient(180deg, var(--buyer), var(--developer));
                       --side-solid: var(--developer); }
.card.is-waiting { border-color: var(--wait-line); }

.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card-name { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.25; word-break: break-word; }
.card-name.no-name { color: var(--text-dim); font-weight: 700; }
.card-name small {
  display: block; margin-top: 3px; font-size: 13px; font-weight: 500;
  color: var(--text-faint); letter-spacing: .4px; direction: ltr; text-align: right;
}

.badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.badge {
  padding: 4px 10px; font-size: 12.5px; font-weight: 800;
  border-radius: 999px; white-space: nowrap;
}
.badge-side-buyer     { background: color-mix(in srgb, var(--buyer) 18%, transparent);  color: var(--buyer); }
.badge-side-seller    { background: color-mix(in srgb, var(--seller) 18%, transparent);  color: var(--seller); }
.badge-side-developer { background: color-mix(in srgb, var(--developer) 20%, transparent); color: var(--developer); }
.badge-side-broker    { background: color-mix(in srgb, var(--broker) 20%, transparent); color: var(--broker); }
.badge-lead   { background: color-mix(in srgb, var(--seller) 20%, transparent); color: var(--seller); }
.badge-review { background: rgba(168, 154, 120, .2); color: var(--interested); }
.badge-wait   { background: var(--wait-bg); color: var(--wait); }

.maturity {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 13px 0 3px; padding: 6px 14px 6px 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: color-mix(in srgb, var(--m-color) 18%, transparent);
  color: var(--m-color);
}
.m-cold { --m-color: var(--cold); } .m-interested { --m-color: var(--interested); }
.m-serious { --m-color: var(--serious); } .m-ready { --m-color: var(--ready); }
.m-hot { --m-color: var(--hot); }
.m-dots { display: flex; gap: 3px; }
.m-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.m-dot.on { opacity: 1; }

.quote {
  margin: 11px 0 3px; padding: 11px 14px;
  font-size: 14px; line-height: 1.55; border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), .05);
  border-inline-start: 3px solid var(--side-solid, var(--line));
  /* הציטוט הוא אורך משתנה לגמרי, והוא הגורם העיקרי לשונות בגובה
     הכרטיסים. שלוש שורות מספיקות כדי להבין על מה מדובר; המלא נפתח
     במעבר עכבר, ותמיד קיים בכרטיס עצמו. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card:hover .quote { -webkit-line-clamp: 12; }

.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(var(--tint-rgb), .06); border: 1px solid var(--line);
}
.fact i { font-style: normal; color: var(--text-faint); font-size: 12.5px; }
.fact b { font-weight: 700; }
.fact:hover { background: rgba(var(--tint-rgb), .13); }

.missing { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
           margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line); }
.missing-label { font-size: 12.5px; font-weight: 700; color: var(--text-faint); }
.missing-tag {
  padding: 3px 10px; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  background: rgba(162, 149, 124, .16); color: var(--text-dim);
}
.missing-tag:hover { background: rgba(162, 149, 124, .32); }

/* זה המשפט שמסביר מה קורה עם האדם הזה — בפועל הכי חשוב בכרטיס —
   והוא הוצג בגוון החלש ביותר במערכת ובגופן הקטן ביותר. */
.reason { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* ── חלון הליד ───────────────────────────────────────────────────────────── */

.lead-body { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 900px) { .lead-body { grid-template-columns: 1fr; } }

.panel {
  padding: 22px 24px; border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.panel h3 {
  margin: 0 0 14px; font-size: 15px; font-weight: 900;
  color: var(--text-dim); letter-spacing: .3px;
}

.lead-name-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lead-name {
  flex: 1 1 220px; min-width: 0;
  font-size: 27px; font-weight: 900; line-height: 1.2;
  padding: 6px 10px; margin: -6px -10px;
  border-radius: 11px; cursor: text; word-break: break-word;
}
.lead-name:hover { background: rgba(var(--tint-rgb), .07); }
.lead-name:focus { outline: 2px solid var(--buyer); background: color-mix(in srgb, var(--buyer) 10%, transparent); }
.lead-name.blank { color: var(--text-faint); font-weight: 700; }
.lead-name-hint { width: 100%; font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

.fields { display: grid; gap: 2px; margin-top: 6px; }
.field {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 10px;
  align-items: start; padding: 9px 10px; border-radius: 10px;
  transition: background .13s;
}
.field:hover { background: rgba(var(--tint-rgb), .04); }
.field.waiting { background: var(--wait-bg); box-shadow: inset 2px 0 0 var(--wait); }
.field-label { font-size: 12.5px; font-weight: 700; color: var(--text-faint); padding-top: 3px; }
.field-value {
  font-size: 14.5px; line-height: 1.5; word-break: break-word;
  cursor: text; border-radius: 7px; padding: 3px 6px; margin: -3px -6px;
}
.field-value:hover { background: rgba(var(--tint-rgb), .08); }
.field-value:focus { outline: 2px solid var(--buyer); background: color-mix(in srgb, var(--buyer) 10%, transparent); }
.field-value.blank { color: var(--text-faint); font-style: italic; }
.field-actions { display: flex; gap: 5px; }

/* שני הכפתורים שנצמדים לשדה שהמערכת מילאה. קודם הם היו ✓ ו-↺ בלבד,
   ואת המשמעות שלהם היה צריך לזכור בעל פה. שתי מילים מוחקות את הניחוש. */
.mini {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 9px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(var(--tint-rgb), .07); color: var(--text-dim);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.mini .ico { width: 14px; height: 14px; flex: none; }
.mini em { font-style: normal; }
.mini:hover { transform: translateY(-1px); }
.mini:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mini.ok:hover   { background: var(--seller); color: var(--on-accent); border-color: transparent; }
.mini.undo:hover { background: var(--hot); color: #fff; border-color: transparent; }

.side-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.side-toggle {
  padding: 9px 17px; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  border: 1.5px solid var(--line); background: rgba(var(--tint-rgb), .05);
  color: var(--text-dim); cursor: pointer; transition: all .14s;
}
.side-toggle:hover { transform: translateY(-2px); }
.side-toggle.on { color: var(--on-accent); border-color: transparent; }
.side-toggle.on[data-side="buyer"]     { background: var(--buyer); }
.side-toggle.on[data-side="seller"]    { background: var(--seller); }
.side-toggle.on[data-side="developer"] { background: var(--developer); }
.side-toggle.on[data-side="broker"]    { background: var(--broker); }

.mat-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.mat-step {
  flex: 1 1 auto; padding: 10px 8px; border-radius: 11px;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  border: 1.5px solid var(--line); background: rgba(var(--tint-rgb), .05);
  color: var(--text-dim); cursor: pointer; transition: all .14s;
}
.mat-step:hover { transform: translateY(-2px); }
.mat-step.on { color: var(--on-accent); border-color: transparent; background: var(--ms); }

.thread { max-height: 420px; overflow-y: auto; display: grid; gap: 8px; padding-inline-end: 4px; }
.msg { padding: 9px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; max-width: 88%; }
.msg small { display: block; font-size: 12px; color: var(--text-faint); margin-bottom: 3px; }
.msg.them { background: rgba(var(--tint-rgb), .07); justify-self: start; border-end-start-radius: 4px; }
.msg.me { background: color-mix(in srgb, var(--seller) 14%, transparent); justify-self: end; border-end-end-radius: 4px; }
.msg.voice { border-inline-start: 3px solid var(--interested); }

/* הודעה קולית ישנה שלא תומללה מגיעה בלי גוף. עשרות בועות "(ללא טקסט)"
   הטביעו את ההודעות שבאמת אומרות משהו, ולכן הן מקופלות כברירת מחדל. */
.msg.blankmsg { display: none; }
.thread.show-blank .msg.blankmsg { display: block; opacity: .6; font-style: italic; }

.thread-fold {
  margin: 4px 0 8px; padding: 5px 12px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text-faint); background: none;
  border: 1px dashed var(--line); cursor: pointer;
  transition: color .14s, border-color .14s;
}
.thread-fold:hover { color: var(--primary); border-color: var(--primary); }
.thread-fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.hist { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.hist-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 5px 8px;
            border-radius: 8px; background: rgba(var(--tint-rgb), .04); }
.hist-row b { color: var(--text-dim); min-width: 84px; }
.hist-row .to { color: var(--text); }
.hist-row .st { margin-inline-start: auto; font-size: 12px; color: var(--text-faint); }

.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.btn {
  padding: 11px 19px; font-family: inherit; font-size: 14px; font-weight: 800;
  border: none; border-radius: 11px; cursor: pointer;
  transition: transform .13s, filter .13s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-approve { background: linear-gradient(135deg, var(--wait), var(--secondary)); color: var(--on-accent); }
.btn-wa      { background: color-mix(in srgb, var(--seller) 18%, transparent); color: var(--seller); }
.btn-ghost   { background: rgba(var(--tint-rgb), .07); color: var(--text-dim); border: 1px solid var(--line); }

/* ── מצב ריק והודעה צפה ──────────────────────────────────────────────────── */

.empty { text-align: center; padding: 70px 20px; color: var(--text-dim); }
.empty-mark { font-size: 50px; opacity: .35; }
.empty h2 { margin: 12px 0 6px; font-size: 19px; color: var(--text); }
.empty p { margin: 0; font-size: 14px; }

.toast {
  position: fixed; inset-inline: 0; bottom: 24px;
  width: max-content; max-width: 90vw; margin: 0 auto;
  padding: 12px 25px; font-size: 14px; font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--seller), var(--seller-deep));
  color: var(--on-accent); box-shadow: 0 14px 40px rgba(var(--shade-rgb), .5);
  animation: rise .22s ease-out; z-index: 50;
}
.toast.warn { background: linear-gradient(135deg, var(--wait), var(--secondary)); color: var(--on-accent); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ── נייד ────────────────────────────────────────────────────────────────── */

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

@media (max-width: 700px) {
  body { padding: 0 12px 70px; overflow-x: hidden; }
  /* הכותרת מקבלת עדיפות על הכפתורים כשהמקום נגמר, במקום להיחתך */
  .top { padding: 14px 0 8px; gap: 10px 12px; }
  /* השם והתפריט חולקים שורה אחת. קודם התפריט ישב לבדו בשורה ריקה
     מעל הכל, וזה גזל כ-55 פיקסלים מגובה המסך בלי סיבה. */
  .brand { flex: 1 1 auto; min-width: 0; order: 1; }
  .tool-btn { order: 2; }
  .head-right { flex: 1 1 100%; order: 3; justify-content: flex-start; }
  .brand-text h1 { font-size: 19px; }
  .sub { font-size: 13px; }
  .logo { width: 42px; height: 42px; font-size: 20px; }

  .pulse { grid-template-columns: 1fr; gap: 9px; padding-bottom: 10px; }
  .pulse-card { padding: 14px 16px; gap: 13px; }
  .pulse-num { font-size: 34px; }

  .counters { padding-bottom: 14px; }
  .counter { padding: 6px 11px; }
  .counter b { font-size: 14px; }
  .counter span { font-size: 12.5px; }

  .gates { gap: 13px; grid-template-columns: 1fr; }
  .gate { padding: 18px 15px 14px; }
  .gate-head { flex-wrap: wrap; gap: 6px; }
  .gate-title { font-size: 21px; }
  .gate-total { font-size: 34px; }

  /* auto-fit ולא מספר עמודות קבוע: שלושה חתכים בשתי עמודות משאירים
     יתום חצי-רוחב בשורה השנייה, וזה נראה כמו תקלה. */
  .gate-split { display: grid; gap: 7px;
                grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .split { min-width: 0; padding: 8px 6px; }
  .split b { font-size: 17px; }
  .split span { font-size: 12px; }

  /* התווית קיבלה רוחב קבוע של 84 פיקסלים ונחתכה. עכשיו היא נמדדת לפי התוכן. */
  .bar-row { grid-template-columns: minmax(64px, auto) 1fr 26px; gap: 7px;
             font-size: 12.5px; }
  .bar-row span:first-child { white-space: nowrap; }

  .list { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px 15px 13px; }
  .card-head { flex-wrap: wrap; }
  .badges { justify-content: flex-start; }
  /* בנייד כפתורי "מאשר / לא נכון" יורדים לשורה משלהם. כשהם ישבו באותה
     שורה עם הערך, נשארו לערך כ-90 פיקסלים והוא נשבר לארבע שורות. */
  .field { grid-template-columns: 80px 1fr; gap: 4px 8px; }
  .field-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 2px; }

  /* פס הפעולות הדביק: הפעולה הראשית תופסת שורה שלמה, ושלוש המשניות
     מתחלקות בשורה שנייה. קודם ארבעתן נשפכו לשתי שורות לא שוות. */
  .sticky-acts { gap: 7px; }
  .sticky-acts .btn-approve { flex: 1 1 100%; justify-content: center; }
  .sticky-acts .btn:not(.btn-approve) {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 10px 8px; font-size: 12.5px; white-space: nowrap;
  }
  .lead-name { font-size: 21px; }
  .lead-body { gap: 13px; }
  .panel { padding: 17px 15px; }
  .crumb { gap: 9px; padding-bottom: 13px; }
  .crumb h2 { font-size: 19px; }
  .task { grid-template-columns: auto 1fr; gap: 10px; }
  .task-do { grid-column: 1 / -1; justify-content: flex-end; }
  .props { grid-template-columns: 1fr 1fr; }
  .drawer { width: 100%; }
  .sheet { padding: 20px 17px; }
}

/* מסכים צרים במיוחד — מחצית ממה שהיה קודם עדיין חייבת להיקרא */
@media (max-width: 380px) {
  .gate-split { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .15s !important; } }


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

.props { display: grid; gap: 9px;
         grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); }

.prop {
  position: relative; padding: 13px 13px 11px;
  border-radius: 14px; cursor: pointer; text-align: right;
  background: rgba(var(--tint-rgb), .05);
  border: 1.5px solid var(--line);
  transition: transform .14s, border-color .14s, background .14s;
}
.prop:hover { transform: translateY(-3px); border-color: var(--broker);
              background: color-mix(in srgb, var(--broker) 10%, transparent); }
.prop.open { border-color: var(--broker); background: color-mix(in srgb, var(--broker) 10%, transparent); }

.prop-icon { font-size: 25px; line-height: 1; display: block; margin-bottom: 7px; }
.prop-title { font-size: 14px; font-weight: 800; line-height: 1.3; word-break: break-word; }
.prop-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.prop-state {
  position: absolute; inset-block-start: 10px; inset-inline-end: 11px;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
}
.st-offered { background: rgba(168, 154, 120, .18); color: var(--interested); }
.st-active  { background: color-mix(in srgb, var(--seller) 20%, transparent);  color: var(--seller); }
.st-sold    { background: rgba(var(--tint-rgb), .1); color: var(--text-faint); }
.st-dropped { background: rgba(var(--tint-rgb), .06); color: var(--text-faint); }
.prop.st-sold-card, .prop.st-dropped-card { opacity: .55; }

.prop-add {
  display: grid; place-content: center; gap: 5px; min-height: 96px;
  border: 1.5px dashed var(--line); border-radius: 14px;
  background: none; color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .14s;
}
.prop-add:hover { border-color: var(--broker); color: var(--broker); transform: translateY(-3px); }
.prop-add span { font-size: 22px; line-height: 1; }

/* עורך הנכס — נפתח מתחת לאריחים */
.prop-editor {
  margin-top: 12px; padding: 16px 17px; border-radius: 14px;
  background: color-mix(in srgb, var(--broker) 8%, transparent);
  border: 1.5px solid var(--broker);
}
.prop-editor h4 { margin: 0 0 11px; font-size: 14px; font-weight: 900; color: var(--broker); }

.icon-pick { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.icon-opt {
  width: 36px; height: 36px; display: grid; place-items: center;
  font-size: 19px; cursor: pointer; border-radius: 10px;
  background: rgba(var(--tint-rgb), .06); border: 1.5px solid transparent;
  transition: all .12s;
}
.icon-opt:hover { transform: scale(1.14); }
.icon-opt.on { border-color: var(--broker); background: color-mix(in srgb, var(--broker) 22%, transparent); }

.state-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.state-opt {
  padding: 6px 13px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  background: rgba(var(--tint-rgb), .06); border: 1.5px solid var(--line);
  color: var(--text-dim); transition: all .13s;
}
.state-opt:hover { transform: translateY(-2px); }
.state-opt.on { color: var(--on-accent); border-color: transparent; background: var(--seller); }

.prop-editor .field { grid-template-columns: 92px 1fr auto; }
.prop-editor .actions { margin-top: 12px; }
.btn-danger { background: color-mix(in srgb, var(--hot) 16%, transparent); color: var(--hot); }


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

.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 18px;
  background: rgba(12, 10, 7, .78);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}
.overlay[hidden] { display: none; }

.sheet {
  width: min(100%, 540px); max-height: 92vh; overflow-y: auto;
  padding: 26px 28px; border-radius: 22px;
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sheet h2 { margin: 0 0 5px; font-size: 24px; font-weight: 900; }
.sheet-note { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

.fld { display: grid; gap: 6px; margin-bottom: 13px; }
.fld > span { font-size: 12.5px; font-weight: 700; color: var(--text-faint); }
.fld input, .fld textarea {
  width: 100%; padding: 11px 14px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
  transition: border-color .15s, background .15s;
}
.fld textarea { resize: vertical; line-height: 1.55; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--text-faint); }
.fld input:focus, .fld textarea:focus {
  border-color: var(--buyer); background: color-mix(in srgb, var(--buyer) 9%, transparent);
}

.btn-new {
  padding: 9px 18px; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: var(--on-accent);
  transition: transform .14s, filter .14s;
}
.btn-new:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ── הערות ───────────────────────────────────────────────────────────────
   נצברות מלמעלה למטה עם תאריך. ההערה אינה שדה שנדרס אלא יומן קצר. */

.notes { display: grid; gap: 8px; }
.note {
  padding: 11px 14px; border-radius: 13px;
  background: rgba(var(--tint-rgb), .05);
  border-inline-start: 3px solid var(--interested);
}
.note-top {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 12.5px; color: var(--text-faint); margin-bottom: 4px;
}
.note-top .who { font-weight: 700; }
.note-del {
  margin-inline-start: auto; cursor: pointer;
  background: none; border: none; color: var(--text-faint);
  font-size: 14px; font-family: inherit; padding: 0 4px; border-radius: 6px;
}
.note-del:hover { color: var(--hot); }
.note-body {
  font-size: 14px; line-height: 1.6; white-space: pre-wrap;
  cursor: text; border-radius: 7px; padding: 2px 5px; margin: -2px -5px;
}
.note-body:hover { background: rgba(var(--tint-rgb), .07); }
.note-body:focus { outline: 2px solid var(--buyer); background: color-mix(in srgb, var(--buyer) 10%, transparent); }

.note-new { display: grid; gap: 8px; margin-top: 10px; }
.note-new textarea {
  width: 100%; padding: 11px 14px; min-height: 62px; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--text);
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
}
.note-new textarea:focus { border-color: var(--interested); }
.note-new textarea::placeholder { color: var(--text-faint); }

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

.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(162, 149, 124, .16); color: var(--text-dim);
  border: 1.5px solid transparent; transition: all .13s;
}
.tag:hover { transform: translateY(-2px); background: rgba(162, 149, 124, .3); }
.tag .x { opacity: .6; font-size: 14px; }
.tag .x:hover { opacity: 1; }
.tag-add {
  padding: 5px 12px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: none; color: var(--text-faint);
  border: 1.5px dashed var(--line); transition: all .13s;
}
.tag-add:hover { color: var(--text-dim); border-color: var(--text-dim); transform: translateY(-2px); }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.card-tag {
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(162, 149, 124, .16); color: var(--text-dim);
}
.card-tag:hover { background: rgba(162, 149, 124, .32); }

.next-step {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 11px 0 3px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--seller) 10%, transparent);
  border-inline-start: 3px solid var(--seller);
  font-size: 14px; line-height: 1.5;
}
.next-step i { font-style: normal; font-size: 13px; color: var(--seller); font-weight: 800; }


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

.view-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sort-opt {
  padding: 8px 15px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(var(--tint-rgb), .05); color: var(--text-dim);
  border: 1.5px solid var(--line); transition: all .13s;
}
.sort-opt:hover { color: var(--text); transform: translateY(-2px); }
.sort-opt.on { background: var(--interested); color: var(--on-accent); border-color: transparent; }

.dense-toggle {
  padding: 8px 15px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(var(--tint-rgb), .05); color: var(--text-dim);
  border: 1.5px solid var(--line); transition: all .13s;
}
.dense-toggle:hover { transform: translateY(-2px); }
.dense-toggle.on { background: var(--developer); color: var(--on-accent); border-color: transparent; }

/* תצוגה מכווצת: שורה אחת לכרטיס, 30 במסך במקום 6 */
.list.dense { grid-template-columns: 1fr; gap: 6px; }
.list.dense .card { padding: 11px 16px 11px 14px; }
.list.dense .card:hover { transform: none; }
.list.dense .card-head { align-items: center; }
.list.dense .card-name { font-size: 15.5px; }
.list.dense .card-name small { display: inline; margin-inline-start: 9px; font-size: 12.5px; }
.list.dense .maturity { margin: 0; padding: 3px 10px; font-size: 12.5px; }
.list.dense .quote,
.list.dense .facts,
.list.dense .missing,
.list.dense .reason,
.list.dense .next-step,
.list.dense .card-tags { display: none; }

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

.pairs { display: grid; gap: 14px; }

.pair {
  padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pair-why {
  display: inline-block; margin-bottom: 13px; padding: 4px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 800;
  background: rgba(230, 208, 150, .16); color: var(--wait);
}
.pair-why b { font-weight: 900; }

.pair-grid { display: grid; gap: 12px; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
@media (max-width: 700px) { .pair-grid { grid-template-columns: 1fr; } }

.pair-side {
  padding: 14px 16px; border-radius: 13px;
  background: rgba(var(--tint-rgb), .05); border: 1.5px solid var(--line);
}
.pair-side h4 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.pair-side .who { font-size: 13px; color: var(--text-faint); direction: ltr; text-align: right; }
.pair-side ul { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.pair-side li { font-size: 12.5px; color: var(--text-dim); }
.pair-keep {
  display: block; width: 100%; margin-top: 12px;
  padding: 9px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  background: color-mix(in srgb, var(--seller) 16%, transparent); color: var(--seller); border: 1.5px solid transparent;
  transition: all .13s;
}
.pair-keep:hover { background: var(--seller); color: var(--on-accent); transform: translateY(-2px); }

.pair-mid { display: grid; place-items: center; font-size: 21px; color: var(--text-faint); }


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

.followup {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 11px 0 3px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(168, 154, 120, .1);
  border-inline-start: 3px solid var(--interested);
  font-size: 13.5px;
}
.followup i { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--interested); }
.followup b { font-weight: 800; font-variant-numeric: tabular-nums; }
.followup.due {
  background: rgba(224, 138, 63, .14);
  border-inline-start-color: var(--ready);
}
.followup.due i, .followup.due b { color: var(--ready); }
.followup.late {
  background: color-mix(in srgb, var(--hot) 13%, transparent);
  border-inline-start-color: var(--hot);
}
.followup.late i, .followup.late b { color: var(--hot); }

.date-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.date-row input[type="date"] {
  padding: 9px 13px; border-radius: 11px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); outline: none;
  color-scheme: dark;
}
.date-row input[type="date"]:focus { border-color: var(--interested); }

.quick-date {
  padding: 8px 14px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(var(--tint-rgb), .06); color: var(--text-dim);
  border: 1.5px solid var(--line); transition: all .13s;
}
.quick-date:hover { color: var(--interested); border-color: var(--interested);
                    transform: translateY(-2px); }
.quick-date.clear:hover { color: var(--hot); border-color: var(--hot); }


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

.inv { display: grid; gap: 7px; }
.inv-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 11px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--buyer) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--buyer) 22%, transparent);
}
.inv-row b { font-size: 14px; font-weight: 800; }
.inv-row small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.inv-price {
  font-size: 14.5px; font-weight: 900; color: var(--buyer);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left;
}
.inv-price small { color: var(--text-faint); font-weight: 500; }
.inv-none {
  padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--text-dim);
  background: rgba(var(--tint-rgb), .04); border: 1px dashed var(--line);
}


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

.head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bell {
  position: relative; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; font-size: 20px; cursor: pointer;
  border-radius: 13px; border: 1.5px solid var(--line);
  background: rgba(var(--tint-rgb), .05);
  transition: transform .14s, border-color .14s, background .14s;
}
.bell:hover { transform: translateY(-2px); border-color: var(--wait); }
.bell.ring { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent);
             animation: shake 1.1s ease-in-out infinite; }
@keyframes shake {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-11deg); } 94% { transform: rotate(9deg); }
  97% { transform: rotate(-5deg); }
}
.bell-count {
  position: absolute; inset-block-start: -5px; inset-inline-start: -5px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 900; border-radius: 999px;
  background: var(--hot); color: #fff;
}
/* בלי השורה הזו display:grid מנצח את [hidden] של הדפדפן, ותג אדום עם 0
   נשאר תקוע בכותרת גם כשאין שום התראה. נמצא בצילום מסך. */
.bell-count[hidden] { display: none; }

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70;
  width: min(100%, 400px); padding: 20px;
  background: linear-gradient(200deg, var(--surface), var(--bg-2));
  border-inline-start: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(var(--shade-rgb), .5);
  overflow-y: auto;
  animation: slideIn .2s ease-out;
}
.drawer[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; margin-bottom: 16px; }
.drawer-head h3 { margin: 0; font-size: 19px; font-weight: 900; }

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

.tasks { display: grid; gap: 8px; }

.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  align-items: center;
  padding: 12px 14px; border-radius: 13px;
  background: rgba(var(--tint-rgb), .05);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--tk, var(--line));
  transition: border-color .14s, background .14s;
}
.task:hover { background: rgba(var(--tint-rgb), .08); }
.task.k-call      { --tk: var(--seller); }
.task.k-whatsapp  { --tk: #25d366; }
.task.k-email     { --tk: var(--interested); }
.task.k-meeting   { --tk: var(--developer); }
.task.k-document  { --tk: var(--text-faint); }
.task.k-other     { --tk: var(--line); }
.task.overdue { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 9%, transparent); }
.task.done { opacity: .5; }
.task.done .task-title { text-decoration: line-through; }

.task-check {
  width: 24px; height: 24px; flex: none; margin-top: 1px;
  display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--line); border-radius: 8px;
  background: none; color: transparent; font-size: 13px; font-weight: 900;
  transition: all .13s;
}
.task-check:hover { border-color: var(--seller); color: var(--seller); }
.task-check.on { background: var(--seller); border-color: var(--seller); color: var(--on-accent); }

.task-title { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.task-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-dim);
             display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-meta .when { font-variant-numeric: tabular-nums; }
.task-meta .late { color: var(--hot); font-weight: 800; }
.task-meta .soon { color: var(--ready); font-weight: 800; }
.task-prio {
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.task-prio.high   { background: rgba(224, 138, 63, .2); color: var(--ready); }
.task-prio.urgent { background: color-mix(in srgb, var(--hot) 20%, transparent); color: var(--hot); }

/* ── תג היומן ────────────────────────────────────────────────────────────
   שלושה מצבים, ושלושתם צריכים להיקרא במבט אחד בלי לקרוא מילה:
   ירוק = הפגישה ביומן, אדום = היא לא שם וזו בעיה, אפור = טרם נוספה.
   הצבע הוא המסר; הטקסט רק מאשר אותו. */
.cal-badge {
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  font-family: inherit; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; transition: all .13s; line-height: 1.7;
  display: inline-flex; align-items: center; gap: 4px;
}
.cal-badge:hover { transform: translateY(-1px); }

.cal-badge.on {
  background: color-mix(in srgb, var(--seller) 20%, transparent);
  color: var(--seller); border-color: color-mix(in srgb, var(--seller) 45%, transparent);
}
.cal-badge.on:hover { background: var(--seller); color: var(--on-accent); }

/* הכישלון צועק בכוונה. פגישה שהאתר מציג כאילו היא ביומן ובפועל אינה
   שם היא התקלה המסוכנת ביותר בגשר הזה — היא גורמת לסמוך על יומן חסר. */
.cal-badge.err {
  background: color-mix(in srgb, var(--hot) 22%, transparent);
  color: var(--hot); border-color: color-mix(in srgb, var(--hot) 55%, transparent);
}
.cal-badge.err:hover { background: var(--hot); color: #fff; }

.cal-badge.add {
  background: rgba(var(--tint-rgb), .05); color: var(--text-dim);
  border-color: var(--line);
}
.cal-badge.add:hover { color: var(--serious); border-color: var(--serious); }

.cal-badge.off {
  background: none; color: var(--text-dim); border-color: transparent;
  padding: 2px 5px; font-size: 13px; opacity: .5;
}
.cal-badge.off:hover { opacity: 1; color: var(--hot); }

/* שורת אורך הפגישה — מופיעה רק כשנבחר סוג "פגישה". */
.dur-row { border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 2px; }
.dur-label { font-size: 12.5px; font-weight: 800; color: var(--serious);
             margin-inline-end: 4px; }
.quick-date.on { color: var(--serious); border-color: var(--serious);
                 background: color-mix(in srgb, var(--serious) 14%, transparent); }

.task-do { display: flex; gap: 5px; align-items: center; }
.task-do a, .task-do button {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 14px; font-family: inherit; text-decoration: none; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--line);
  background: rgba(var(--tint-rgb), .06); color: var(--text-dim);
  transition: all .12s;
}
.task-do a:hover, .task-do button:hover { transform: scale(1.12); color: var(--text); }
.task-do .go:hover { background: var(--tk); color: var(--on-accent); border-color: transparent; }
.task-do .zzz:hover { background: var(--interested); color: var(--on-accent); border-color: transparent; }
.task-do .del:hover { background: var(--hot); color: #fff; border-color: transparent; }

/* טופס משימה חדשה */
.task-new {
  margin-top: 11px; padding: 14px 15px; border-radius: 13px;
  background: rgba(var(--tint-rgb), .04); border: 1px dashed var(--line);
  display: grid; gap: 10px;
}
.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(var(--tint-rgb), .06); color: var(--text-dim);
  border: 1.5px solid var(--line); transition: all .13s;
}
.kind-opt:hover { transform: translateY(-2px); }
.kind-opt.on { color: var(--on-accent); border-color: transparent; background: var(--ko, var(--buyer)); }
.kind-opt[data-kind="call"]     { --ko: var(--seller); }
.kind-opt[data-kind="whatsapp"] { --ko: #25d366; }
.kind-opt[data-kind="email"]    { --ko: var(--interested); }
.kind-opt[data-kind="meeting"]  { --ko: var(--developer); }
.kind-opt[data-kind="document"] { --ko: var(--text-dim); }
.kind-opt[data-kind="other"]    { --ko: var(--text-dim); }

.task-new input, .task-new select {
  width: 100%; padding: 10px 13px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line); border-radius: 11px; outline: none;
  color-scheme: dark;
}
.task-new input:focus { border-color: var(--seller); }
.task-new input::placeholder { color: var(--text-faint); }
.when-row { display: flex; gap: 6px; flex-wrap: wrap; }

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

.day-block { margin-bottom: 26px; }
.day-block h3 {
  margin: 0 0 12px; font-size: 16px; font-weight: 900;
  display: flex; align-items: center; gap: 9px;
}
.day-block h3 span {
  padding: 2px 10px; border-radius: 999px; font-size: 13px;
  background: rgba(var(--tint-rgb), .08); color: var(--text-dim);
}
.day-empty {
  padding: 22px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--seller) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--seller) 30%, transparent);
  color: var(--seller); font-size: 14.5px; font-weight: 700;
}


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

.draft-text {
  margin: 0 0 4px; padding: 16px 18px; border-radius: 14px;
  font-family: inherit; font-size: 15px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  background: rgba(var(--tint-rgb), .06);
  border: 1.5px solid var(--line);
  border-inline-start: 3px solid var(--seller);
  max-height: 46vh; overflow-y: auto;
  user-select: all;
}


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

.card.urgent {
  border-color: color-mix(in srgb, var(--hot) 50%, transparent);
  background: linear-gradient(165deg,
              color-mix(in srgb, var(--hot) 9%, var(--surface)), var(--bg-2));
}
.card.urgent .card-name { color: #fff; }
.card.urgent::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: linear-gradient(90deg, transparent, var(--hot), transparent);
}

/* מספר טלפון — קריא כמו שכותבים אותו, לא כמו שמאחסנים אותו */
.phone { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* הנימוק היה פסקה אפורה ארוכה שהוסיפה גובה בלי להוסיף פעולה */
.reason {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card:hover .reason { -webkit-line-clamp: 6; }


/* השורות והחתכים בשער הם כפתורים לכל דבר, וצריכים להיראות כאלה גם
   בלי מחלקת .clickable — היא הוסרה מהם כדי לא לדרוס את צבע הפס. */
.bar-row, .split, .gate-total, .gate-enter {
  font-family: inherit; color: inherit; cursor: pointer;
  transition: transform .13s, background .13s, border-color .13s;
}
.bar-row { border: none; background: none; text-align: right; }
.split, .gate-total, .gate-enter { border: 1px solid var(--line); }
.gate-total { background: none; border: none; }
.bar-row:hover, .split:hover { transform: translateY(-1px); }


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

.task-body { display: grid; gap: 3px; min-width: 0; }

.task-who {
  /* justify-self ולא רק align-self: הכפתור יושב בתוך גריד, ובלעדיו הוא
     נמתח על כל רוחב השורה ונראה כמו שדה קלט ריק. */
  display: inline-flex; align-items: baseline; gap: 9px;
  align-self: start; justify-self: start; max-width: 100%;
  margin: 2px 0 1px; padding: 4px 11px 4px 9px; border-radius: 9px;
  font-family: inherit; cursor: pointer; text-align: right;
  background: rgba(var(--tint-rgb), .06);
  border: 1px solid var(--line);
  transition: all .13s;
}
.task-who:hover {
  background: color-mix(in srgb, var(--tk, var(--buyer)) 22%, transparent);
  border-color: var(--tk, var(--buyer)); transform: translateY(-1px);
}
.who-name {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch;
}
.who-go { font-size: 12.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }
.task-who:hover .who-go { color: var(--text); }

/* כפתור הכרטיס בשורת הפעולות */
.task-do .card {
  width: 30px; height: 30px; display: grid; place-items: center;
  padding: 0; border-radius: 9px; font-size: 14px; box-shadow: none;
  background: rgba(var(--tint-rgb), .06); border: 1px solid var(--line);
  color: var(--text-dim); cursor: pointer;
}
.task-do .card:hover {
  background: var(--tk, var(--buyer)); color: var(--on-accent);
  border-color: transparent; transform: scale(1.12);
}

.drawer-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-faint); }

/* שורת משימה ארוכה על מסך רחב יוצרת מסע עין מיותר בין הטקסט לכפתורים */
.day-block .tasks, #alertList .tasks { max-width: 1100px; }

@media (max-width: 700px) {
  .task-who { width: 100%; justify-content: space-between; }
  .who-name { max-width: none; }
}


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

.actions.sticky-acts {
  position: sticky; bottom: 0; z-index: 6;
  margin: 22px -24px -22px; padding: 15px 24px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(9px);
}

/* השיחה היא ההקשר שבזכותו יודעים מה לכתוב בשדות. קודם היא נגללה
   למעלה ונעלמה, והשאירה מאות פיקסלים ריקים מתחתיה. */
@media (min-width: 901px) {
  .talk-col {
    position: sticky; top: 14px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
  }
  .talk-col .thread { max-height: none; overflow: visible; }
}

.date-hint { font-size: 12.5px; color: var(--text-faint); }

/* פס גלילה בהיר ורחב נראה כמו פס לבן זר על רקע כהה. אין לו סגנון
   בברירת המחדל של הדפדפן, וכל אזור שנפתחה בו גלילה משלו הבליט אותו. */
.talk-col, .thread, .hist, .msg-box, .drawer {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--tint-rgb), .18) transparent;
}
.talk-col::-webkit-scrollbar, .thread::-webkit-scrollbar,
.hist::-webkit-scrollbar, .drawer::-webkit-scrollbar { width: 8px; }
.talk-col::-webkit-scrollbar-thumb, .thread::-webkit-scrollbar-thumb,
.hist::-webkit-scrollbar-thumb, .drawer::-webkit-scrollbar-thumb {
  background: rgba(var(--tint-rgb), .16); border-radius: 99px;
}
.talk-col::-webkit-scrollbar-track, .thread::-webkit-scrollbar-track,
.hist::-webkit-scrollbar-track, .drawer::-webkit-scrollbar-track { background: transparent; }

/* מספר טלפון שנשבר לשתי שורות ("054-818-" / "2436") נקרא כמו שתי
   שגיאות ולא כמו מספר אחד. */
.card-name .phone, .lead-name-hint .phone { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   שבעת הרכיבים שחיים אישר במעבדת הרכיבים

   סרגל כלים מאייקון · חיפוש חי · פעולות מהירות · דגלי צבע ·
   מצב מיקוד · לוח שלבים בגרירה · בחירה מרובה · ציר זמן כתצוגה נוספת
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* חמשת דגלי הצבע האישיים. מכוונים לצבעים שכבר קיימים במערכת כדי
     שהמסך לא יתפוצץ לעשרים גוונים. */
  --flag-red:    #D4553C;
  --flag-amber:  #E08A3F;
  --flag-green:  #8FB56A;
  --flag-blue:   #6FA8B8;
  --flag-purple: #B98CC9;
}

/* ── 1 · אייקון וסרגל כלים ─────────────────────────────────────────── */

.tool-btn {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: rgba(var(--tint-rgb), .05);
  border: 1.5px solid var(--line); cursor: pointer;
  /* align-content חובה: בלעדיו שורות הגריד נמתחות לגובה הכפתור,
     הפסים לא נפגשים, וה-X נראה כמו חץ. נמצא בצילום מסך. */
  display: grid; place-items: center; align-content: center;
  gap: 4px; padding: 0;
  transition: transform .18s, border-color .18s, background .18s;
}
.tool-btn:hover { transform: translateY(-2px); border-color: var(--primary);
                  background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tool-btn span {
  display: block; width: 18px; height: 2.5px; border-radius: 2px;
  background: var(--primary); transition: transform .22s, opacity .18s;
}
.tool-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tool-btn.open span:nth-child(2) { opacity: 0; }
.tool-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(12, 10, 7, .68); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .24s;
}
.scrim.on { opacity: 1; }

.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 41;
  width: min(310px, 86vw);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border-inline-end: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(var(--shade-rgb), .5);
  /* transform פיזי ואינו מתהפך ב-RTL: הסרגל עוגן לימין, ולכן מוסתר ימינה. */
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(var(--tint-rgb), .18) transparent;
}
.rail.open { transform: translateX(0); }
.rail-body { padding: 18px 15px 30px; display: grid; gap: 3px; }

.rail-title {
  font-size: 12.5px; font-weight: 900; letter-spacing: .14em;
  color: var(--text-faint); margin: 14px 5px 7px;
}
.rail-title:first-child { margin-top: 0; }

.rail-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 15px;
  font-weight: 700; text-align: right;
  transition: background .14s, transform .14s;
}
.rail-item:hover { background: rgba(var(--tint-rgb), .07); transform: translateX(-3px); }
.rail-item .ic {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: color-mix(in srgb, var(--ric) 22%, transparent);
  color: var(--ric);
}
.rail-item .cnt {
  margin-inline-start: auto; font-weight: 900; font-size: 14px;
  color: var(--ric); font-variant-numeric: tabular-nums;
}
.rail-sep { height: 1px; background: var(--line); margin: 10px 5px; }

.rail-flags { display: flex; gap: 8px; padding: 4px 12px 6px; flex-wrap: wrap; }
.rail-flag {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--fc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent);
  color: var(--fc); font-family: inherit; font-size: 12.5px; font-weight: 800;
  transition: transform .14s;
}
.rail-flag:hover { transform: translateY(-2px); }
.rail-flag i { font-style: normal; font-variant-numeric: tabular-nums; }

.rail-set {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), .04); border: 1px solid var(--line);
  cursor: pointer; color: var(--text); font-family: inherit;
  font-size: 13.5px; font-weight: 700; text-align: right;
}
.rail-set .sw {
  flex: none; width: 42px; height: 24px; border-radius: 99px;
  background: rgba(var(--tint-rgb), .1); border: 1px solid var(--line);
  position: relative; transition: background .18s;
}
.rail-set .sw i {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  background: var(--text-faint); transition: transform .18s, background .18s;
}
.rail-set.on .sw { background: var(--seller); border-color: var(--seller); }
.rail-set.on .sw i { transform: translateX(-18px); background: var(--on-accent); }

/* ── 4 · פעולות מהירות על הכרטיס ───────────────────────────────────── */

.card-quick {
  display: flex; gap: 7px; margin-top: auto;
  padding-top: 13px; border-top: 1px dashed var(--line);
}

.qa {
  flex: 1; min-width: 0; border-radius: 11px; cursor: pointer;
  padding: 8px 3px 7px;
  border: 1px solid var(--line); background: rgba(var(--tint-rgb), .05);
  color: var(--text-dim);
  font-family: inherit; text-decoration: none;
  /* אייקון מעל מילה. שורת סמלים בלי מילים מחייבת לנחש מה כל אחד עושה,
     או ללחוץ כדי לגלות — ובנייד אין גם tooltip שיציל. */
  display: grid; gap: 3px; place-items: center; justify-items: center;
  /* גלויות תמיד ולא רק במעבר עכבר: פעולה שלא רואים היא פעולה שלא
     יודעים שקיימת, ובנייד אין מעבר עכבר בכלל. */
  transition: background .14s, color .14s, transform .14s, border-color .14s;
}
.qa .ico { width: 19px; height: 19px; display: block; }
.qa em {
  font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .1px; line-height: 1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa:hover { background: var(--buyer); color: var(--on-accent); border-color: transparent;
            transform: translateY(-2px); }
.qa.wa:hover  { background: var(--seller); }
.qa.tsk:hover { background: var(--serious); }
.qa.opn:hover { background: var(--developer); }
/* כרטיס מסומן בדגל צובע את הכפתור בצבע הדגל. הצבע נכתב כמשתנה ולא
   ישירות, אחרת הוא היה מנצח גם במעבר עכבר והכיתוב היה נבלע ברקע. */
.qa.flg { color: var(--flag, var(--text-dim)); }
.qa.flg:hover { background: var(--broker); color: var(--on-accent); }
/* מיקוד מקלדת חייב להיראות. בלעדיו אי אפשר לתפעל את השורה בלי עכבר. */
.qa:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 8 · דגלי צבע ──────────────────────────────────────────────────── */

.flag-strip { display: flex; gap: 6px; align-items: center; }
.flag-dot {
  width: 20px; height: 20px; border-radius: 7px; cursor: pointer; padding: 0;
  background: var(--fc); border: 2px solid transparent;
  transition: transform .14s, border-color .14s;
}
.flag-dot:hover { transform: scale(1.16); }
.flag-dot.on { border-color: var(--text); transform: scale(1.1); }
.flag-clear {
  width: 20px; height: 20px; border-radius: 7px; cursor: pointer; padding: 0;
  background: transparent; border: 2px dashed var(--line);
  color: var(--text-faint); font-size: 12.5px; line-height: 1;
}
.flag-clear:hover { border-color: var(--hot); color: var(--hot); }

/* הדגל על הכרטיס ברשימה — פס צר בקצה, נראה בסריקה מהירה */
.card.flagged::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 5px; background: var(--flagc);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.badge.flag {
  background: color-mix(in srgb, var(--flagc) 20%, transparent);
  color: var(--flagc); border-color: color-mix(in srgb, var(--flagc) 55%, transparent);
}

/* ── 6 · בחירה מרובה ───────────────────────────────────────────────── */

.qa.sel { color: var(--text-faint); font-weight: 900; }
.qa.sel:hover { background: var(--buyer); color: var(--on-accent); }
.card.picked { box-shadow: 0 0 0 2px var(--buyer), var(--shadow); }
.card.picked .qa.sel { background: var(--buyer); border-color: var(--buyer); color: var(--on-accent); }

.bulkbar {
  position: sticky; inset-block-start: 8px; z-index: 12;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 17px; margin-bottom: 15px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: var(--on-accent); box-shadow: 0 12px 30px rgba(var(--shade-rgb), .4);
}
.bulkbar b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bulkbar button {
  border: none; border-radius: 9px; padding: 8px 14px; cursor: pointer;
  background: rgba(23, 19, 12, .17); color: var(--on-accent);
  font-family: inherit; font-weight: 800; font-size: 13.5px;
  transition: background .14s, transform .14s;
}
.bulkbar button:hover { background: rgba(23, 19, 12, .34); transform: translateY(-1px); }
.bulkbar button.danger:hover { background: var(--hot); color: #fff; }
.bulkbar button.ghost { background: transparent; opacity: .78; }

/* ── 3 · מצב מיקוד ─────────────────────────────────────────────────── */

.focus-top { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; max-width: 860px; }
.focus-track {
  flex: 1; height: 6px; border-radius: 99px;
  background: rgba(var(--tint-rgb), .08); overflow: hidden;
}
.focus-track span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--seller), var(--buyer));
  transition: width .3s;
}

.focus-card {
  max-width: 860px; padding: 28px 30px;
  border-radius: var(--radius); border: 1px solid var(--line);
  border-inline-start: 6px solid var(--fcc);
  background: linear-gradient(160deg, var(--surface-2), var(--bg-2));
  box-shadow: var(--shadow);
}
.focus-side {
  font-size: 13px; font-weight: 900; letter-spacing: .1em;
  color: var(--fcc); margin: 0 0 9px;
}
.focus-name { font-size: 31px; font-weight: 900; margin: 0 0 5px; line-height: 1.15; }
.focus-name.blank { color: var(--text-faint); }
.focus-sub { font-size: 14px; color: var(--text-faint); }
.focus-quote {
  margin: 18px 0 0; padding: 15px 18px; border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), .05);
  border-inline-start: 3px solid var(--fcc);
  font-size: 16px; color: var(--text-dim); line-height: 1.55;
}
.focus-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.focus-acts { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.fa {
  flex: 1; min-width: 140px; padding: 15px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(var(--tint-rgb), .05);
  color: var(--text); font-family: inherit; font-weight: 800; font-size: 15px;
  cursor: pointer; transition: transform .15s, background .15s, border-color .15s;
}
.fa:hover { transform: translateY(-2px); }
/* חלק מכפתורי הפעולה הם קישורים (וואטסאפ) — בלי זה הם מקבלים קו תחתון
   ומיושרים אחרת משאר הכפתורים בשורה. */
a.fa { text-decoration: none; display: grid; place-items: center; }
.fa.done { background: var(--seller); border-color: var(--seller); color: var(--on-accent); }
.fa.snooze { background: var(--serious); border-color: var(--serious); color: var(--on-accent); }
.fa.opencard:hover { border-color: var(--developer); color: var(--developer); }

.focus-empty { max-width: 860px; text-align: center; padding: 60px 24px; }
.focus-empty .empty-mark { font-size: 46px; color: var(--seller); margin-bottom: 12px; }
.focus-empty h2 { margin: 0 0 8px; font-size: 26px; }
.focus-empty p { margin: 0; color: var(--text-faint); }

/* ── 5 · לוח שלבים ─────────────────────────────────────────────────── */

.board-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.board-scroll { overflow-x: auto; padding-bottom: 10px; }
.board {
  display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px; min-width: 980px;
}
.bcol {
  background: var(--bg-2); border: 2px dashed transparent;
  border-radius: var(--radius); padding: 13px; min-height: 260px;
  transition: border-color .16s, background .16s;
}
.bcol.over {
  border-color: var(--bcc);
  background: color-mix(in srgb, var(--bcc) 10%, var(--bg-2));
}
.bcol-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 2px solid var(--bcc);
}
.bcol-head h3 { margin: 0; font-size: 15px; font-weight: 900; color: var(--bcc); }
.bcol-head b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bcol-list { display: grid; gap: 8px; min-height: 40px; }

.bchip {
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--chc);
  border-radius: var(--radius-sm); padding: 11px 13px;
  cursor: grab; transition: transform .13s, box-shadow .13s;
}
.bchip:active { cursor: grabbing; }
.bchip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--shade-rgb), .4); }
.bchip.dragging { opacity: .32; }
.bchip h4 {
  margin: 0 0 3px; font-size: 14.5px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bchip p {
  margin: 0; font-size: 13px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bchip .bflag {
  display: inline-block; width: 8px; height: 8px; border-radius: 3px;
  background: var(--flagc); margin-inline-end: 5px; vertical-align: 1px;
}
.bcol-empty { padding: 20px 8px; text-align: center; font-size: 12.5px; color: var(--text-faint); }

/* ── 7 · ציר זמן כתצוגה נוספת ──────────────────────────────────────── */

.view-switch {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px;
  background: rgba(var(--tint-rgb), .05); border: 1px solid var(--line);
}
.vsw {
  padding: 8px 15px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--text-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  transition: background .15s, color .15s;
}
.vsw:hover { color: var(--text); }
.vsw.on { background: var(--surface-2); color: var(--text); }

.day-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}

.tl { position: relative; padding-inline-start: 78px; max-width: 1100px; }
.tl::before {
  content: ""; position: absolute; inset-block: 6px 6px;
  inset-inline-start: 58px; width: 2px; background: var(--line);
}
.tl-row { position: relative; padding-bottom: 16px; }
.tl-time {
  position: absolute; inset-inline-start: -78px; top: 2px; width: 52px;
  line-height: 1.25;
  font-size: 13.5px; font-weight: 800; color: var(--text-faint);
  text-align: left; font-variant-numeric: tabular-nums;
}
.tl-dot {
  position: absolute; inset-inline-start: -23px; top: 6px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--tlc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tlc) 22%, transparent);
}
.tl-body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px;
  transition: border-color .14s, transform .14s;
}
.tl-body:hover { border-color: var(--tlc); transform: translateX(-3px); }
.tl-row.now .tl-body {
  border-color: var(--hot);
  background: color-mix(in srgb, var(--hot) 10%, var(--surface));
}
.tl-live {
  display: inline-block; font-size: 12.5px; font-weight: 900;
  color: var(--hot); letter-spacing: .08em; margin-inline-start: 8px;
}
.tl-none { color: var(--text-faint); padding: 30px 0; }

/* ── בוחר ערך לפעולה מרובה ─────────────────────────────────────────── */

.sheet-narrow { max-width: 470px; }
.pick-grid { display: flex; gap: 9px; flex-wrap: wrap; margin: 6px 0 4px; }
.pick-opt {
  padding: 11px 17px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line); background: rgba(var(--tint-rgb), .05);
  color: var(--text); font-family: inherit; font-weight: 800; font-size: 14.5px;
  transition: transform .14s, border-color .14s;
}
.pick-opt:hover { transform: translateY(-2px); border-color: var(--buyer); }
.pick-input {
  width: 100%; padding: 12px 15px; border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), .05); border: 1px solid var(--line);
  color: var(--text); font-family: inherit; font-size: 15px; margin-top: 4px;
}
.pick-input:focus { outline: none; border-color: var(--buyer); }

/* ── מובייל ────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .tool-btn { width: 40px; height: 40px; border-radius: 11px; }
  .board { grid-template-columns: repeat(5, minmax(160px, 1fr)); min-width: 840px; }
  .focus-card { padding: 20px 18px; }
  .focus-name { font-size: 25px; }
  .fa { min-width: 110px; padding: 13px; font-size: 14px; }
  .bulkbar { padding: 11px 13px; gap: 7px; }
  .bulkbar button { padding: 7px 11px; font-size: 12.5px; }
  .tl { padding-inline-start: 62px; }
  .tl::before { inset-inline-start: 46px; }
  .tl-time { inset-inline-start: -62px; width: 40px; font-size: 12.5px; }
  .card-quick { gap: 6px; }
}


/* תכונת hidden חלשה יותר ממחלקה שמגדירה display. בלי השורות האלה
   פס הפעולות מופיע ריק, והסרגל מציץ מהצד. אותו דפוס כמו .view[hidden]. */
.bulkbar[hidden], .rail[hidden], .scrim[hidden] { display: none; }

/* שלושה פריטים ב-space-between דוחפים את הלוגו לאמצע. הכפתור והלוגו
   שייכים יחד בימין, וכל השאר בשמאל. */
.top { justify-content: flex-start; }
.head-right { margin-inline-start: auto; }


/* איפה החיפוש מצא. צהוב על כהה, בלי לשנות גובה שורה. */
#list mark.hit {
  background: color-mix(in srgb, var(--wait) 42%, transparent);
  color: var(--text); border-radius: 3px; padding: 0 1px;
}


/* ══ רקע המותג ══════════════════════════════════════════════════════════
   שתי שכבות, תמיד יחד ולעולם לא אחת בלי השנייה:
   התצלום לבד הוא אווירה בלי אמירה, והקווים לבד קרים.
   שתיהן מקובעות מאחורי הכל (z-index שלילי) ולא לוכדות לחיצות. */
.brand-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.brand-backdrop .photo {
  position: absolute; inset: 0;
  background: url('/brand/architecture.jpg') center 32% / cover no-repeat;
  filter: grayscale(1) contrast(1.25);
  opacity: .26;
}
/* שטיפה שמחזירה ניגודיות לטקסט מעל האזורים הבהירים של התצלום */
.brand-backdrop .wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 14, 10, .10) 0%, rgba(16, 14, 10, .55) 42%,
    rgba(16, 14, 10, .88) 72%, var(--bg) 100%);
}
.brand-backdrop .lines {
  position: absolute; inset: 0;
  background: url('/brand/blueprint.svg') center / cover no-repeat;
  opacity: .30;
}
@media (max-width: 700px) {
  /* בנייד הרקע רק מפריע לקריאה על מסך צר */
  .brand-backdrop .lines { opacity: .18; }
  .brand-backdrop .photo { opacity: .14; }
}

/* ══ הכותרת ═════════════════════════════════════════════════════════════ */
.brand-text h1 {
  font-family: "FrankRuhlLibre", "Heebo", serif;
  letter-spacing: -.005em;
}


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

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

.intro {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: var(--bg);
  animation: intro-out .42s ease .98s both;
}
.intro.skip { animation: intro-out .18s ease both; }
.intro-bg {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(760px 520px at 50% 42%, rgba(200, 164, 75, .13), transparent 68%),
    var(--bg);
}
.intro-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url('/brand/architecture.jpg') center 38% / cover no-repeat;
  filter: grayscale(1) contrast(1.2);
  opacity: 0; animation: intro-photo 1.5s ease .05s both;
}
.intro-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 14, 10, .55) 0%, rgba(16, 14, 10, .86) 62%, var(--bg) 100%);
}
.intro-stage {
  position: relative; z-index: 2; display: flex;
  flex-direction: column; align-items: center; gap: 26px;
}
.intro-mark { width: clamp(120px, 22vw, 190px); }
.intro-mark svg { width: 100%; height: auto; display: block; }

/* כל חלק עולה מלמטה ומתייצב. cubic-bezier עם דעיכה קצרה בסוף נותן
   תחושת משקל, כאילו הקומה הונחה במקום ולא הופיעה. */
.intro-mark .part {
  transform: translateY(16px) scaleY(.35);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: intro-rise .42s cubic-bezier(.18, .9, .25, 1) both;
}
.intro-mark .ground {
  transform: scaleX(0); transform-origin: 50% 50%; opacity: 0;
  animation: intro-ground .40s cubic-bezier(.2, .8, .2, 1) both;
}
.intro-name {
  font-family: "FrankRuhlLibre", "Heebo", serif;
  font-size: clamp(26px, 5.2vw, 40px); font-weight: 700; color: var(--text);
  letter-spacing: -.005em; opacity: 0;
  animation: intro-name .5s ease .62s both;
}
.intro-tag {
  font-size: clamp(13px, 2.4vw, 16px); color: var(--primary);
  font-weight: 300; letter-spacing: .06em; opacity: 0;
  margin-top: -16px;
  animation: intro-name .5s ease .76s both;
}

@keyframes intro-rise {
  from { transform: translateY(16px) scaleY(.35); opacity: 0; }
  to   { transform: translateY(0) scaleY(1); opacity: 1; }
}
@keyframes intro-ground {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes intro-name {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-photo { from { opacity: 0; } to { opacity: .22; } }
@keyframes intro-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* מי שביקש פחות תנועה מקבל את המסך בלי הנפשה, לא מסך תקוע */
@media (prefers-reduced-motion: reduce) {
  .intro, .intro * { animation-duration: .01ms !important;
                     animation-delay: 0s !important; }
  .intro { animation: intro-out .01ms ease both; }
}


/* ══ העולם הבהיר ════════════════════════════════════════════════════════
   נייר שמנת ודיו, מתוך אותה ערכת מותג. הזהב נשאר צבע הפעולה היחיד.

   זו לא היפוך אוטומטי של הצבעים. ארבעת צבעי הקטגוריה וסולם הבשלות
   מוכהים כאן במפורש, כי אותו תכלת שקריא על שחור נעלם לגמרי על נייר,
   וטקסט צבעוני שלא קריא הוא בדיוק הכישלון שהמערכת הזו באה למנוע. */
:root[data-theme="light"] {
  --bg:            #F4F0E6;
  --bg-2:          #EDE7D8;
  --surface:       #FFFFFF;
  --surface-2:     #F7F2E6;
  --line:          #DCD3BF;
  /* שלוש דרגות טקסט, וכל אחת עומדת בניגודיות הנדרשת על נייר. הגוונים
     שנלקחו מהעולם הכהה נראו טוב על שחור ונעלמו כאן. */
  --text:          #1B1710;
  --text-dim:      #4E463A;
  --text-faint:    #6D6455;

  --primary:       #9B7207;
  --secondary:     #D9A82B;
  --accent-teal:   #2F6E6A;
  --on-accent:     #FFFBF0;

  /* הרוויה הועלתה בלי לגעת בבהירות: אותה דרגת ניגודיות מול הנייר,
     אבל הצבע נקרא כצבע ולא כאפור מלוכלך. גוון עכור על נייר הוא בדיוק
     המסך שלא נכנסים אליו. */
  --buyer:         #0E6E86;
  --buyer-deep:    #8FC6D8;
  --seller:        #3A8214;
  --seller-deep:   #ADDB8A;
  --developer:     #8232A0;
  --developer-deep:#D5AEE8;
  --broker:        #C1500A;
  --broker-deep:   #F5BE94;

  /* על נייר הסולם מטפס ברוויה ולא בכהות: אפור נטול צבע, ואז זהב, כתום,
     גחלת. אם "קר" הוא הכהה ביותר, הסולם קורא הפוך ממה שהוא אומר. */
  --cold:          #78716A;
  --interested:    #8A6A3A;
  --serious:       #A67C05;
  --ready:         #D2600A;
  --hot:           #C22405;

  --wait:          #9A7605;
  --wait-bg:       color-mix(in srgb, var(--wait) 14%, transparent);
  --wait-line:     color-mix(in srgb, var(--wait) 55%, transparent);

  --flag-red:      #C22405;
  --flag-amber:    #CE6B05;
  --flag-green:    #3A8214;
  --flag-blue:     #0E6E86;
  --flag-purple:   #8232A0;

  /* על נייר מכהים במקום להבהיר, והצל רך ולא דרמטי */
  --tint-rgb:      27, 23, 16;
  --shade-rgb:     90, 78, 58;
  --shadow:        0 10px 30px rgba(90, 78, 58, .13);
}

/* הרקע הכפול על נייר: התצלום חיוור וקווי השרטוט כהים יותר מהנייר,
   אחרת השכבה נעלמת לגמרי */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 680px at 88% -14%, rgba(200, 164, 75, .34), transparent 64%),
    radial-gradient(900px 560px at 4% 0%,    rgba(47, 110, 106, .18), transparent 60%),
    var(--bg);
}
/* התצלום על נייר: בלי היפוך.
   ההיפוך הפך את הבניינים הבהירים לכתם בהיר על רקע בהיר, ובשקיפות של
   10% הם נעלמו לגמרי. הדרך הנכונה על נייר היא הפוכה: משאירים את
   התצלום כמו שהוא, מעלים ניגודיות חזק כדי שהמרפסות והחלונות ייחתכו,
   ומעלים שקיפות — וכך המבנים נקראים כמו דיו על נייר, באותה שפה
   בדיוק כמו קווי השרטוט שמעליהם. */
:root[data-theme="light"] .brand-backdrop .photo {
  /* sepia אחרי grayscale מחזיר את התצלום לעולם הקרם של המותג. בלעדיו
     שמי התצלום נקראים אפור קר על נייר חם, וזה נראה כמו טעות ולא כמו
     בחירה. */
  opacity: .34; filter: grayscale(1) contrast(1.6) brightness(.97) sepia(.42);
}
/* השטיפה מוחלשת: היא נועדה להחזיר ניגודיות לטקסט, לא למחוק את התצלום.
   בערכים הקודמים היא כיסתה 72% כבר באמצע המסך, כלומר הרגה את מה
   שהשכבה שמתחתיה באה להראות. הטקסט עצמו יושב ממילא על כרטיסים לבנים. */
:root[data-theme="light"] .brand-backdrop .wash {
  background: linear-gradient(180deg,
    rgba(244, 240, 230, .20) 0%, rgba(244, 240, 230, .44) 46%,
    rgba(244, 240, 230, .80) 76%, var(--bg) 100%);
}
:root[data-theme="light"] .brand-backdrop .lines { opacity: .32; }

/* בנייד מנמיכים, אבל לא עד היעלמות. הכלל הכללי לנייד (14%) נבלע כאן
   ממילא בגלל דרגת הפירוט של הבורר, ולכן הוא נכתב במפורש. */
@media (max-width: 700px) {
  :root[data-theme="light"] .brand-backdrop .photo { opacity: .24; }
  :root[data-theme="light"] .brand-backdrop .lines { opacity: .22; }
}
:root[data-theme="light"] .intro-bg::after {
  background: linear-gradient(180deg,
    rgba(244, 240, 230, .55) 0%, rgba(244, 240, 230, .86) 62%, var(--bg) 100%);
}
/* אותו תיקון גם במסך הפתיחה: בלי היפוך, ועם שקיפות גבוהה יותר —
   אחרת הרגע הראשון שחיים רואה במצב הבהיר הוא מסך קרם ריק. */
:root[data-theme="light"] .intro-bg::before {
  filter: grayscale(1) contrast(1.5) brightness(.97) sepia(.42);
  animation-name: intro-photo-light;
}
@keyframes intro-photo-light { from { opacity: 0; } to { opacity: .34; } }

/* ══ מתג יום ולילה ══════════════════════════════════════════════════════ */
.theme-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: rgba(var(--tint-rgb), .05);
  color: var(--text-dim); font-family: inherit; font-size: 19px;
  transition: transform .14s, border-color .14s, color .14s;
}
.theme-btn:hover {
  transform: translateY(-2px); border-color: var(--primary); color: var(--primary);
}
.theme-btn .sun { display: none; }
/* שכבת צבע של 20% נראית על שחור כמו גוון עשיר, ועל לבן כמו כתם חיוור.
   על נייר צריך יותר חומר כדי לקבל את אותה נוכחות. */
:root[data-theme="light"] .pulse-card {
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--p) 30%, var(--surface)), var(--bg-2));
  border-color: color-mix(in srgb, var(--p) 60%, transparent);
}
:root[data-theme="light"] .gate::before {
  background: radial-gradient(420px 220px at 85% -20%,
              color-mix(in srgb, var(--g) 42%, transparent), transparent 70%);
}
:root[data-theme="light"] .gate { border-color: color-mix(in srgb, var(--g) 35%, var(--line)); }

:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }


/* בכהה השם הוא מדרג זהב שנגמר בלבן. על נייר אותו מדרג הוא זהב על זהב,
   ולכן שם הוא נכתב בדיו ורק נגיעה אחת של זהב נשארת. */
:root[data-theme="light"] .top h1 {
  /* background-image ולא background: הקיצור מאפס גם את background-clip,
     והשם היה הופך למלבן צבוע במקום לאותיות. */
  background-image: linear-gradient(95deg, var(--primary), var(--text) 45%);
}

/* תגיות קטנות על שבב צבוע מאבדות דרגת ניגודיות מול אותו צבע על הרקע.
   בעולם הבהיר הן מקבלות גוון כהה יותר, לטקסט בתוך השבב בלבד. */
/* השבב עצמו מתעבה על נייר. ב-18% מעל לבן הצבע החדש נראה כמו רמז,
   וברמה הזו הוא נקרא כקטגוריה שאפשר לזהות במבט. */
:root[data-theme="light"] .badge-side-buyer     { background: color-mix(in srgb, var(--buyer) 26%, transparent); }
:root[data-theme="light"] .badge-side-seller    { background: color-mix(in srgb, var(--seller) 26%, transparent); }
:root[data-theme="light"] .badge-side-developer { background: color-mix(in srgb, var(--developer) 26%, transparent); }
:root[data-theme="light"] .badge-side-broker    { background: color-mix(in srgb, var(--broker) 26%, transparent); }
:root[data-theme="light"] .badge-lead           { background: color-mix(in srgb, var(--seller) 26%, transparent); }


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

body.compact-top .pulse {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 7px; padding: 2px 0 8px;
}
body.compact-top .pulse-card { padding: 8px 13px; gap: 10px; border-radius: 12px; }
body.compact-top .pulse-num { font-size: 21px; min-width: 1.2ch; }
body.compact-top .pulse-text b { font-size: 13px; }
/* ההסבר מיותר כשכבר מכיר את השורה, והוא שגזל את רוב הגובה */
body.compact-top .pulse-text span { display: none; }
body.compact-top .pulse-card.quiet { display: none; }
body.compact-top .counters { display: none; }

.top-toggle {
  display: none; margin: 0 0 14px;
  padding: 5px 13px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-faint); background: none;
  border: 1px dashed var(--line); cursor: pointer;
  transition: color .14s, border-color .14s;
}
.top-toggle:hover { color: var(--primary); border-color: var(--primary); }
.top-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* הכפתור מופיע רק במסכים שבהם יש מה לכווץ או לפרוש */
body:not(.on-home) .top-toggle { display: inline-block; }


/* ── תיקוני נייד שחייבים לבוא אחרונים ────────────────────────────────────
   @media אינו מוסיף ספציפיות. כלל נייד שנכתב מוקדם בקובץ מפסיד לכלל
   בסיס בעל אותה ספציפיות שנכתב אחריו — בדיוק מה שקרה כאן: שורת המיון
   המשיכה להישבר לארבע שורות למרות ההוראה ההפוכה. */

@media (max-width: 700px) {
  /* שבעת כפתורי המיון גזלו כ-180 פיקסלים לפני הכרטיס הראשון. שורה
     אחת שנגללת הצידה משאירה את כולם נגישים ומחזירה את הרשימה למסך. */
  .view-controls {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
    /* רמז ויזואלי שיש עוד: התוכן נמוג בקצה שאליו אפשר לגלול */
    -webkit-mask-image: linear-gradient(to left, #000 86%, transparent);
    mask-image: linear-gradient(to left, #000 86%, transparent);
  }
  .view-controls::-webkit-scrollbar { display: none; }
  .sort-opt { flex: none; }

  /* בראש המסך המכווץ שלושת הכרטיסים נכנסים לשורה אחת */
  body.compact-top .pulse {
    grid-template-columns: repeat(3, 1fr); gap: 6px;
  }
  body.compact-top .pulse-card { padding: 7px 8px; gap: 7px; border-radius: 10px; }
  body.compact-top .pulse-num { font-size: 17px; min-width: 1ch; }
  body.compact-top .pulse-text b { font-size: 12.5px; line-height: 1.25; }
}

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

   כל הצבעים דרך משתני המותג בלבד, כדי שהמסך מתחלף נכון בין העולם
   הכהה לבהיר בלי שורת עיצוב נפרדת. */

.mich-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}

.mich-gate {
  position: relative;
  display: grid;
  grid-template-areas: "ic n" "lbl lbl" "hint hint";
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-align: right;
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* פס הצבע העליון הוא מה שמבדיל בין החלונות במבט אחד. בלעדיו שישה
   כרטיסים אפורים נראים כמו טפט שהעין מדלגת עליו. */
.mich-gate::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--mc, var(--primary));
  opacity: .55;
  transition: opacity .16s ease, height .16s ease;
}

.mich-gate:hover {
  transform: translateY(-3px);
  border-color: var(--mc, var(--primary));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.mich-gate:hover::before { opacity: 1; height: 4px; }

.mich-gate.on {
  border-color: var(--mc, var(--primary));
  background: color-mix(in srgb, var(--mc, var(--primary)) 10%, var(--surface));
}
.mich-gate.on::before { opacity: 1; height: 5px; }

.mich-gate.ghost { opacity: .82; }
.mich-gate.ghost:hover, .mich-gate.ghost.on { opacity: 1; }

.mich-gate .mg-ic   { grid-area: ic; font-size: 19px; color: var(--mc, var(--primary)); }
.mich-gate .mg-n    { grid-area: n; font-size: 30px; font-weight: 800; line-height: 1;
                      color: var(--mc, var(--primary)); font-variant-numeric: tabular-nums;
                      justify-self: start; }
.mich-gate .mg-lbl  { grid-area: lbl; font-size: 14.5px; font-weight: 700; margin-top: 6px; }
.mich-gate .mg-hint { grid-area: hint; font-size: 12.5px; color: var(--text-dim);
                      line-height: 1.45; }

/* ── עוגן המחיר ─────────────────────────────────────────────────────────
   ארבעה מספרים והקשר. לא דוח — רק מה שצריך כדי לדעת אם מכרז יקר. */
.mich-market {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.mm-head h3 { margin: 0 0 4px; font-size: 16px; }
.mm-head p  { margin: 0 0 16px; font-size: 12.5px; color: var(--text-dim);
              line-height: 1.6; max-width: 62ch; }

.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.mm-cell {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.mm-cell b { display: block; font-size: 21px; font-weight: 800; color: var(--primary);
             font-variant-numeric: tabular-nums; line-height: 1.2; }
.mm-cell span { display: block; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.mm-cell i { display: block; font-size: 12.5px; color: var(--text-dim);
             font-style: normal; margin-top: 2px; }

.mm-buyers { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-buyers-t { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  max-width: 260px;
}
.mm-chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.mm-chip i { font-style: normal; font-size: 12.5px; color: var(--text-dim);
             font-variant-numeric: tabular-nums; }

/* ── שורת מכרז ──────────────────────────────────────────────────────────
   שלוש עמודות: ציון התאמה, מה זה, וכמה ומתי. הציון בצד ההתחלה כי הוא
   מה שקובע אם בכלל ממשיכים לקרוא את השורה. */
.mich-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}
.mich-row:hover { transform: translateY(-2px); border-color: var(--primary); }
.mich-row.watched { border-color: var(--wait); }

.mich-score {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sc, var(--primary)) 13%, transparent);
}
.mich-score b { font-size: 19px; font-weight: 800; color: var(--sc, var(--primary));
                font-variant-numeric: tabular-nums; line-height: 1; }
.mich-score i { font-size: 9.5px; font-style: normal; color: var(--text-dim);
                letter-spacing: .04em; }

.mich-main h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; }
.mich-star { color: var(--wait); font-size: 13px; }
.mich-where { margin: 0 0 7px; font-size: 12.5px; color: var(--text-dim); }
.mich-whys { display: flex; flex-wrap: wrap; gap: 5px; }
.mich-why {
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--text-dim);
}

.mich-nums { display: flex; flex-direction: column; align-items: flex-start;
             gap: 3px; text-align: start; min-width: 128px; }
.mich-units { font-size: 12.5px; color: var(--text-dim); }
.mich-units b { font-size: 16px; color: var(--text); font-weight: 800;
                font-variant-numeric: tabular-nums; }
.mich-when { font-size: 12.5px; font-weight: 700; }
.mich-kind { font-size: 12.5px; color: var(--text-dim); }

/* ── מכרז בודד ──────────────────────────────────────────────────────────*/
.mich-head { margin-bottom: 20px; }
.mich-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.mb {
  font-size: 13px; font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--mbc, var(--line));
  color: var(--mbc, var(--text-dim));
}

.mich-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.mf {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.mf span { display: block; font-size: 12.5px; color: var(--text-dim); }
.mf b { display: block; font-size: 16px; font-weight: 800; margin-top: 3px;
        font-variant-numeric: tabular-nums; }

/* אזהרה. הצבע נושא משמעות אחת בכל האתר, ולכן היא תמיד בגוון הסיכון. */
.mich-warn {
  margin: 16px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--hot);
  border-radius: 12px;
  background: color-mix(in srgb, var(--hot) 9%, transparent);
  font-size: 13px;
  line-height: 1.65;
}

.mich-sec { margin-bottom: 22px; }
.mich-sec > h3 { margin: 0 0 12px; font-size: 16px; }

/* טבלה רחבה נגללת בתוך עצמה. גוף הדף לעולם לא נגלל לצדדים. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.mich-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.mich-table th, .mich-table td { padding: 10px 13px; text-align: start;
                                 white-space: nowrap; }
.mich-table thead th { background: var(--surface); font-size: 12.5px;
                       color: var(--text-dim); font-weight: 700;
                       border-bottom: 1px solid var(--line); }
.mich-table tbody tr + tr td { border-top: 1px solid var(--line); }
.mich-table td { font-variant-numeric: tabular-nums; }
.mich-table td.win { color: var(--primary); font-weight: 700; }

.mich-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mich-actions .btn { text-decoration: none; }

.mich-next {
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.mich-next h3 { margin: 0 0 6px; font-size: 15px; }
.mich-next p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-dim);
               max-width: 68ch; }
.mich-next b { color: var(--primary); }

@media (max-width: 640px) {
  .mich-row { grid-template-columns: 52px 1fr; }
  .mich-nums { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap;
               gap: 10px; align-items: center; min-width: 0; }
  .mich-gate { padding: 14px; }
  .mich-gate .mg-n { font-size: 26px; }
}

/* המרחב הוא מחוז מנהלי של רמ"י ולא מיקום. הוא נשאר על המסך כי הוא
   הקוד שרמ"י מדברת בו, אבל יורד למשקל של הערת שוליים כדי שהעין
   תיפול על היישוב האמיתי. */
.mich-region {
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--line);
  font-size: 12.5px;
  opacity: .7;
}


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

/* ברכה — מופיעה רק במסך הבית */
.hello { display: none; padding: 6px 2px 16px; }
body.on-home .hello { display: block; animation: hello-in .5s cubic-bezier(.2,.8,.2,1) both; }
.hello-hi {
  margin: 0; font-family: "FrankRuhlLibre", "Frank Ruhl Libre", serif;
  font-size: clamp(26px, 4.2vw, 36px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em; color: var(--text);
}
.hello-sub { margin: 6px 0 0; font-size: 15px; color: var(--text-dim); line-height: 1.6; }
.hello-go {
  font: inherit; font-weight: 800; color: var(--primary); cursor: pointer;
  background: none; border: 0; padding: 2px 4px; border-radius: 6px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.hello-go:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
@keyframes hello-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* טבעת מיקוד אחידה לכל פקד — מי שמנווט במקלדת תמיד יודע איפה הוא */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* תגובה מיידית בלחיצה — המשוב מגיע ברגע הנגיעה, לא בשחרור */
:where(button, .btn, a.gate, .gate, .card, .chip, [role="button"]):not(:disabled) {
  -webkit-tap-highlight-color: transparent;
}
:where(button, .btn, .chip, [role="button"]):not(:disabled):active {
  transform: scale(.97);
  transition: transform 90ms ease-out;
}
.pulse-card:active, .gate:active { transform: scale(.985) !important; transition: transform 90ms ease-out; }

/* קישור ארוך בשיחה נשבר בתוך הבועה במקום להיחתך */
.msg, .msg * { overflow-wrap: anywhere; }

/* מטרות מגע של 44 פיקסלים בנייד */
@media (pointer: coarse) {
  :where(button, .chip, .counter, .mini, .tool-btn, .bell, select) { min-height: 44px; }
}

/* ניגודיות מוגברת: טקסט משני בהיר יותר וגבולות ברורים */
@media (prefers-contrast: more) {
  :root { --text-dim: var(--text); --text-faint: var(--text); }
  .pulse-card, .gate, .card, .counter, .chip { border-color: var(--text) !important; }
}

/* שקיפות מופחתת: משטחים מלאים במקום זכוכית מטושטשת */
@media (prefers-reduced-transparency: reduce) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .top, .rail, .scrim { background: var(--surface) !important; }
}

/* תנועה מופחתת: בלי תזוזה, אבל עם דהייה קצרה — משוב נשאר, הסחרור לא */
@media (prefers-reduced-motion: reduce) {
  body.on-home .hello { animation: none; }
  :where(button, .btn, .chip, [role="button"]):active, .pulse-card:active, .gate:active { transform: none !important; }
}