/* ═══════════════ לוח הצנרת (F2 · סבב 6, DESIGN-R6 §3) ═══════════════
   עמודה = **שלב** (חמישה שלבים פעילים), בסדר ה-lookups. הצבע מגיע מספקטרום השלבים
   (--st-*) דרך stageClass()/keyline — בלי צבע קשיח אחד בקובץ הזה. RTL: inline-start/end בלבד.
   דסקטופ = חמש עמודות גמישות שנכנסות במסך 1280 **בלי גלילה אופקית**;
   נייד = אקורדיון אנכי. כרטיס גדול; **בלי ₪ פוטנציאל בשום מקום בלוח**.
   סבב 7: `.pl-units` — Σ יח"ד של העמודה, קטן ומעומעם ליד המונה. */

/* ───────── בקרות מעל הלוח ───────── */
.pl-seg-holder{display:inline-flex;min-width:0;max-width:100%}
.pl-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pl-controls .seg button{font-weight:500}
.pl-controls .seg button.on{font-weight:600}
.pl-sumline{color:var(--muted);font-size:12.5px;margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.pl-sumline b{color:var(--ink);font-weight:600;font-size:16px;letter-spacing:-.02em;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ───────── הלוח ─────────
   flex:1 1 0 — כל העמודות מתחלקות ברוחב הפנוי במקום רוחב קבוע שגלש מהמסך (הבאג של סבב 4).
   overflow-x נשאר כרשת ביטחון למקטע «הכול» (חמש עמודות) ולמסכים צרים — הגלילה
   קורית בתוך הלוח, אף פעם לא בעמוד. */
.pl-board{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:12px}
.pl-board .pl-col{
  flex:1 1 0;min-width:210px;max-width:320px;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
}
/* חמש עמודות (במקטע «טרם נסגרו») נכנסות במסך 1280 בלי גלילה אופקית — הלוח יוצא
   מריפוד ה-.main כדי לנצל את מלוא הרוחב. במסכים צרים יותר הגלילה
   קורית בתוך .pl-board (overflow-x למעלה), אף פעם לא בעמוד. */
@media(min-width:901px) and (max-width:1480px){
  .wide-screen .pl-board{margin-inline:-28px}   /* בדיוק ריפוד ה-.main — הלוח עד הקצה */
  .pl-board .pl-col{min-width:196px}
}

/* כותרת עמודה: שם השלב + מונה בלבד — רקע עדין בצבע השלב (DESIGN-R6 §3), בלי Σ פוטנציאל */
.pl-head{
  position:relative;display:block;width:100%;text-align:start;
  background:color-mix(in srgb, var(--st, var(--rule)) 12%, white);
  border-radius:var(--r) var(--r) 0 0;
  padding:14px 14px 13px;border-bottom:1px solid var(--rule);cursor:default;
}
.pl-head::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--st,var(--rule))}
.pl-head .pl-top{display:flex;align-items:center;gap:8px;min-width:0}
.pl-name{font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pl-count{font-size:16px;font-weight:700;color:var(--st,var(--muted));font-variant-numeric:tabular-nums;margin-inline-start:auto;flex-shrink:0}
.pl-units{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}
.pl-chev{display:none}

.pl-body{display:flex;flex-direction:column;gap:8px;padding:9px 8px;overflow-y:auto;
  max-height:calc(100vh - 268px);min-height:74px;background:var(--surface-2)}
.pl-none{font-size:12.5px;color:var(--muted-2);text-align:center;padding:12px 4px}

/* ───────── כרטיס בלוח — גדול (DESIGN-R6 §3) ─────────
   שם (16/700) · «חברה · עיר» (13, מעומעם) · יח"ד כמספר גדול (22/600) · הפעולה הבאה
   (רק כשהיא קיימת, אדום באיחור). אווטאר הסוכן בפינה. בלי ₪ פוטנציאל. */
.pl-card{
  position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  box-shadow:var(--shadow);cursor:pointer;min-width:0;
  padding:14px 15px;
  transition:border-color .12s,box-shadow .12s;
}
.pl-card:hover{border-color:var(--accent-3);box-shadow:0 0 0 3px var(--accent-2)}
.pl-card.dragging{opacity:.35}
.pl-card .pc-top{display:flex;align-items:flex-start;gap:6px;min-width:0}
/* שם ארוך נחתך לשלוש שורות (השם המלא ב-title של האלמנט) — בלי זה כרטיס אחד היה
   מתמתח לחמש-שש שורות ודוחף את שאר העמודה מתחת לקו הקיפול. */
.pl-card .pc-name{font-size:16px;font-weight:700;line-height:1.3;flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.pl-card .pc-top .avatar{margin-top:1px}
.pl-card .pc-top .menu-wrap{flex-shrink:0;margin:-4px -5px -4px 0}
.pl-card .pc-top .icon-btn{width:26px;height:26px}
.pl-card .pc-sub{font-size:13px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-card .pc-units{display:flex;align-items:baseline;gap:4px;margin-top:9px}
.pl-card .pc-units .n{font-size:22px;font-weight:600;line-height:1;color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.pl-card .pc-units .n.muted{color:var(--muted-2);font-family:inherit}
.pl-card .pc-units .u{font-size:12.5px;color:var(--muted)}
/* .t (הפעולה הבאה בעצמה) הוא השורה המפעילה ביותר בכרטיס — לא נותנים ל-.d (המועד היחסי,
   רוחב קבוע קטן) לתפוס ראשון את השורה ולדחוק אותו לכמה תווים. גריד: האייקון מוצמד לגובה
   שתי השורות, .t בשורה הראשונה במלוא הרוחב, .d מתחתיו — במקום שורה אחת שבה .d עם
   flex-shrink:0 גוזל את כל הרווח לפני ש-.t מקבל משהו. סדר ה-DOM (svg,‏ .t,‏ .d) לא השתנה. */
.pl-card .pc-next{display:grid;grid-template-columns:13px 1fr;column-gap:5px;font-size:12.5px;color:var(--ink-2);margin-top:9px;min-width:0}
.pl-card .pc-next svg{grid-row:1/3;align-self:start;margin-top:2px;width:13px;height:13px;flex-shrink:0;opacity:.6}
.pl-card .pc-next .t{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pl-card .pc-next .d{grid-column:2;color:var(--muted);font-size:11.5px;margin-top:1px}
.pl-card .pc-next.overdue{color:var(--danger)}
.pl-card .pc-next.overdue .d,.pl-card .pc-next.overdue svg{color:var(--danger);opacity:1}

/* יעד גרירה */
.pl-col.drop-target{border-color:var(--accent)}
.pl-col.drop-target .pl-body{background:var(--accent-2);box-shadow:inset 0 0 0 2px var(--accent-3);border-radius:0 0 var(--r) var(--r)}

/* ───────── מודאל «העבר שלב» — חמישה שלבים, ומתחת לקו שני שלבי הסגירה ───────── */
.stage-move{display:flex;flex-direction:column;gap:3px}
.stage-opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:var(--r-sm);text-align:start;font-size:14.5px;min-height:44px;
}
.stage-opt:hover{background:var(--surface-2)}
.stage-opt .sw{width:10px;height:10px;border-radius:3px;background:var(--st,var(--rule));flex-shrink:0}
.stage-opt .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-opt .p{margin-inline-start:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stage-opt.current{background:var(--surface-3);font-weight:600}
.stage-opt.current .p::after{content:" · נוכחי"}

/* ───────── נייד: אקורדיון אנכי, בלי גלילה אופקית ─────────
   המעבר נעשה ב-CSS בלבד (בלי מחלקה שה-JS מדליק) — כך הפריסה לעולם לא נשארת «תקועה»
   על המצב הקודם אחרי שינוי גודל חלון או סיבוב מכשיר. */
@media(max-width:900px){
  .pl-board{flex-direction:column;align-items:stretch;gap:8px;overflow-x:visible;padding-bottom:4px}
  .pl-board .pl-col{flex:1 1 auto;width:auto;min-width:0;max-width:100%}
  .pl-board .pl-col:not(.open) .pl-body{display:none}
  .pl-head{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;padding:10px 13px}
  .pl-head .pl-top{flex:1}
  .pl-name{white-space:normal}
  .pl-chev{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;color:var(--muted);transition:transform .15s}
  .pl-chev svg{width:16px;height:16px;transform:rotate(-90deg)}
  .pl-col.open .pl-chev svg{transform:rotate(90deg)}
  .pl-body{max-height:none}

  .pl-controls{gap:8px}
  .pl-controls .seg{flex:1 0 auto}
  .pl-sumline{margin-inline-start:0;flex-basis:100%}
  .pl-card .pc-top .icon-btn{width:44px;height:44px;margin:-6px -8px -6px 0}
  /* רצפת טקסט 13px בנייד (‎.pl-sumline b‎ נשאר גדול — הוא המספר הדומיננטי) */
  .pl-sumline span,
  .pl-card .pc-sub,.pl-card .pc-next,.pl-card .pc-next .d,.pl-none,.stage-opt .p{font-size:13px}
}
@media(max-width:640px){
  .pl-controls .seg{width:100%;overflow-x:auto;scrollbar-width:none}
  .pl-controls .seg::-webkit-scrollbar{display:none}
  .pl-controls .seg button{flex:1 0 auto;white-space:nowrap}
  .pl-controls select{width:100%;font-size:16px}
}