/* src/app/dan/planning.css — תכנית עבודה: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-planning.html (ה-<style> שלו)
 * מסכים: src/app/screens/branch-planning.js — עוטף את עצמו ב-`<div class="dan dan-planning">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * ⚠️ מה שונה מהמקור, ולמה:
 *  ① **אין `:root`** (tokens.css הוא ההצהרה היחידה) — הפלטה ב-dan.css, `var(--green)` ⟶ `var(--d-green)`.
 *  ② **מחלקות שהמעטפת מגדירה לא-תחומות שונו:** topbar⟶ptop · card⟶pcard · btn⟶pbtn · btn-ghost⟶pghost ·
 *     empty⟶pempty · pill⟶ppill. (אחרת `.card` של המעטפת הוסיפה מסגרת, ו-`.topbar` הפך את הכותרת לפס sticky.)
 *  ③ **אין `body`/`main`/`aside`/`.gate`/`.app`** — המעטפת שלנו. הרקע, הריווח והסרגל שלה, לא של הדף.
 *  ④ **ניגודיות AA:** `--faint`/`--muted` כבר מוכהים ב-dan.css. מספרי העמוד (`.nums b`) לא בצבע ה-accent של
 *     העמוד אלא בגוון כהה ממנו (`--pt`): #2F7FB5 על #EAF2F9 הוא 3.85:1 ו-#E07A3F על #FDEEE3 הוא 2.64:1 — axe
 *     נכשל על שניהם. ה-accent נשאר לפס העליון ולסרגל האיזון (לא טקסט). hover של קישור — orange-ink, לא orange.
 *  ⑤ **container query ולא media query** — רוחב התוכן תלוי במעטפת; `@media(max-width:820px)` של דן ⟶
 *     `@container planning`. ו-`minmax(320px,1fr)` של `.projects` ⟶ `minmax(min(320px,100%),1fr)`: ב-375 התוכן
 *     (אחרי הריפוד של העמוד) צר מ-320 וגלל אופקית.
 *  ⑥ **הדיאלוג הוא kit-dialog** (src/app/kit/dialog.js), לא `<dialog>` בנוי-ביד; השדות הם `.form-field` של
 *     ערכת הכתיבה, מעוצבים כאן כ-`.fld` של דן.
 *  ⑦ **רצועת השנים — `<a>`** (ניווט רך עם `?year=`), לא `<button>`; אותו עיצוב. פס הסטטוס `.syncst` נושא
 *     `role="status"`. `.pill.idea/.paused` של דן אינם — ארבעה סטטוסים אצלנו; `planned` נצבע כ-idea.
 *  ⑧ **`line-height: normal` ו-`letter-spacing: normal` מפורשים** — ה-`body` של דן אינו קובע אותם, ואילו אצלנו `body`
 *     נושא `line-height: 1.6` ו-`h1,h2,h3` נושאים `1.25` ו-`-.02em` (base.css). נמדד בדפדפן על שני הדפים באותו רוחב:
 *     בלי זה הכול גבוה 12–30% (לשונית 42 מול 36px · `.pcard` 231 מול 207 · שדה תאריך 42.4 ליד בוררים 36.5).
 *     ✅ 01.10 — `line-height` של המכל עבר ל-`.dan` ב-dan.css (לכל יחידה); הכותרות ו-`letter-spacing` — כאן.
 *  ⑨ **`.foot` נושא `margin: 12px 0`** — ב-dan `<p>` ללא איפוס, והשוליים נוספים ל-`gap` של ה-flex (30px מעל השורה, לא 18).
 */

.dan-planning {
  container: planning / inline-size;
  display: flex; flex-direction: column; gap: 18px;
  color: var(--d-text);
}
/* ⑧ — לכותרות כלל משלהן ב-base.css (`h1,h2,h3`), ולכן ירושה מהמכל אינה מספיקה. */
.dan-planning h1, .dan-planning h2, .dan-planning h3 { line-height: normal; letter-spacing: normal; }
.dan-planning a { color: var(--d-green); text-decoration: none; }
.dan-planning a:hover { color: var(--d-orange-ink); }
.dan-planning h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }

.dan-planning .ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-planning .ptop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-planning .ptop-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dan-planning .syncst { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.dan-planning .syncst.show { opacity: 1; }
.dan-planning .syncst.wait { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-planning .syncst.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-planning .syncst.err { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 700; }

/* ---------- רצועת השנים ---------- */
.dan-planning .tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dan-planning .tab { border: 1px solid var(--d-line); background: #fff; color: var(--d-muted); font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: .15s; text-decoration: none; }
.dan-planning .tab:hover { border-color: var(--d-green); color: var(--d-green-dark); }
.dan-planning .tab.on { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.dan-planning .tab.add { border-style: dashed; font-weight: 600; }
.dan-planning .tab:focus-visible, .dan-planning .pbtn:focus-visible, .dan-planning .pghost:focus-visible,
.dan-planning .unassign:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- כרטיס · כפתורים · שדות ---------- */
.dan-planning .pcard { background: #fff; border-radius: 22px; padding: 24px 26px; box-shadow: var(--d-shadow); display: flex; flex-direction: column; gap: 16px; }
.dan-planning .pcard h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-planning .pcard .cs { font-size: 12.5px; color: var(--d-faint); margin: -10px 0 0; }
.dan-planning .pbtn { border: 1px solid var(--d-line); background: #fff; color: var(--d-text); font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; }
.dan-planning .pbtn:hover { border-color: var(--d-green); color: var(--d-green-dark); background: var(--d-mint); }
.dan-planning .pbtn.danger:hover { border-color: var(--d-orange); color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-planning .pghost { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--d-green); background: #fff; border: 1px solid #D8E3DA;
  border-radius: 999px; padding: 11px 20px; cursor: pointer; }
.dan-planning .pghost:hover { background: #F4F8F5; }
.dan-planning .pbtn.primary { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.dan-planning .pbtn.primary:hover { background: var(--d-green-dark); color: #fff; }
.dan-planning .pbtn:disabled { opacity: .5; cursor: not-allowed; }
.dan-planning input, .dan-planning select, .dan-planning textarea { font-family: inherit; font-size: 14px; color: var(--d-text); background: #fff;
  border: 1px solid var(--d-line); border-radius: 10px; padding: 8px 11px; outline: none; transition: .15s; width: 100%; min-height: 0; }
.dan-planning input:focus, .dan-planning select:focus, .dan-planning textarea:focus { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }
.dan-planning textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
/* ⚠️ `.form-input:read-only` של המעטפת תופס גם `<select>` (אינו "ניתן לעריכה" לפי הדפדפן) וצובע אותו בחול. */
.dan-planning .form-input:read-only { background: #fff; }

/* ---------- סרגל האיזון: כמה מהעשייה יושבת על כל עמוד ---------- */
.dan-planning .figures { display: flex; gap: 24px; flex-wrap: wrap; }
.dan-planning .figures div { display: flex; flex-direction: column; gap: 3px; }
.dan-planning .figures span:first-child { font-size: 13px; color: var(--d-faint); }
.dan-planning .figures span:last-child { font-size: 19px; font-weight: 600; color: var(--d-ink); }
.dan-planning .balance { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--d-track); }
.dan-planning .balance i { display: block; height: 100%; transition: width .4s; background: var(--pc); }
.dan-planning .balance-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--d-muted); }
.dan-planning .balance-legend span { display: flex; align-items: center; gap: 6px; }
.dan-planning .balance-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--pc); }
.dan-planning .balance-legend span.none { color: var(--d-faint); }
.dan-planning .balance i.pc-empty { background: var(--d-track); }

/* ---------- צבע לעמוד פעולה (מ-`PC` בדן) ----------
   `--pc` accent (פס · סרגל · מקרא) · `--pbg` רקע הכותרת · `--pt` גוון הטקסט (AA, ראו ④). בשאר — נפילה לפי הסדר. */
.dan-planning .pc-trust { --pc: #0E7A55; --pbg: #EDF6F1; --pt: #0E7A55; }
.dan-planning .pc-belonging { --pc: #2F7FB5; --pbg: #EAF2F9; --pt: #2A6F9E; }
.dan-planning .pc-meaning { --pc: #7E5AA6; --pbg: #F1ECF7; --pt: #7E5AA6; }
.dan-planning .pc-commitment { --pc: #E07A3F; --pbg: #FDEEE3; --pt: #A9542A; }
.dan-planning .pc-0 { --pc: #0E7A55; --pbg: #EDF6F1; --pt: #0E7A55; }
.dan-planning .pc-1 { --pc: #2F7FB5; --pbg: #EAF2F9; --pt: #2A6F9E; }
.dan-planning .pc-2 { --pc: #7E5AA6; --pbg: #F1ECF7; --pt: #7E5AA6; }
.dan-planning .pc-3 { --pc: #E07A3F; --pbg: #FDEEE3; --pt: #A9542A; }
.dan-planning .pc-4 { --pc: #6B7B72; --pbg: #F2EFE5; --pt: #5F6E66; }
.dan-planning .pc-none { --pc: #C9CFC9; }

/* ---------- עמוד פעולה ---------- */
.dan-planning .pillars { display: flex; flex-direction: column; gap: 16px; }
.dan-planning .pillar { border-radius: 22px; background: #fff; box-shadow: var(--d-shadow); overflow: hidden; }
.dan-planning .pillar-h { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border-top: 4px solid var(--pc); background: var(--pbg); }
.dan-planning .pillar-h .ttl { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-planning .pillar-h .desc { font-size: 13px; color: var(--d-muted); line-height: 1.6; margin: 4px 0 0; max-width: 64ch; }
.dan-planning .pillar-h .nums { margin-inline-start: auto; display: flex; gap: 16px; text-align: center; flex: none; }
.dan-planning .pillar-h .nums div { display: flex; flex-direction: column; }
.dan-planning .pillar-h .nums b { font-size: 19px; font-weight: 600; color: var(--pt); }
.dan-planning .pillar-h .nums span { font-size: 11.5px; color: var(--d-faint); }
.dan-planning .pillar-body { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.dan-planning .pillar-body .pl-new { align-self: flex-start; }
.dan-planning .projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.dan-planning .proj { border: 1px solid var(--d-line); border-radius: 16px; padding: 15px 17px; display: flex; flex-direction: column; gap: 10px; background: #fff; min-width: 0; }
.dan-planning .proj:hover { border-color: #D8E3DA; }
.dan-planning .proj-h { display: flex; align-items: flex-start; gap: 8px; }
.dan-planning .proj-h .t { font-size: 15.5px; font-weight: 600; color: var(--d-ink); line-height: 1.4; flex: 1; min-width: 0; }
.dan-planning .proj .goal { font-size: 12.5px; color: var(--d-muted); line-height: 1.6; margin: 0; }
.dan-planning .proj .meta { font-size: 12px; color: var(--d-faint); display: flex; gap: 10px; flex-wrap: wrap; }
.dan-planning .ppill { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex: none; background: var(--d-track); color: var(--d-muted); }
.dan-planning .ppill.planned { background: var(--d-track); color: var(--d-muted); }
.dan-planning .ppill.active { background: var(--d-mint); color: var(--d-green-dark); }
.dan-planning .ppill.done { background: #E7EEF9; color: #36618f; }
.dan-planning .ppill.cancelled { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-planning .evlist { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--d-line-soft); padding-top: 9px; }
.dan-planning .ev { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 2px; border-radius: 8px; }
.dan-planning .ev:hover { background: #FCFAF3; }
.dan-planning .ev .en { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-text); }
.dan-planning .ev .ed { color: var(--d-faint); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.dan-planning .ev .ec { color: var(--d-muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.dan-planning .ev .unassign { border: none; background: transparent; color: var(--d-faint); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; flex: none; }
.dan-planning .ev .unassign:hover { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-planning .proj .acts { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.dan-planning .noproj { font-size: 12.5px; color: var(--d-faint); padding: 6px 0; }
.dan-planning .pempty { padding: 18px; text-align: center; color: var(--d-faint); font-size: 13.5px; border: 1px dashed var(--d-line); border-radius: 14px; }

/* ---------- אירועים ללא שיוך ---------- */
.dan-planning .unrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--d-line-soft); font-size: 13.5px; flex-wrap: wrap; }
.dan-planning .unrow:last-child { border-bottom: none; }
.dan-planning .unrow .ed { color: var(--d-faint); font-variant-numeric: tabular-nums; }
.dan-planning .unrow .un { flex: 1; min-width: 160px; }
.dan-planning .unrow .us { color: var(--d-muted); font-size: 12.5px; }
.dan-planning .unrow select { width: auto; min-width: 200px; max-width: 100%; font-size: 13px; padding: 6px 10px; }

.dan-planning .foot { color: var(--d-faint); font-size: 12px; line-height: 1.7; margin: 12px 0; }   /* ⑨ */

/* ---------- דיאלוג פרויקט ----------
   המעטפת היא kit-dialog (כותרת · X · גלילה); זה התוכן — `.dlg` בדן. */
.dan-planning .kit-dialog { border-radius: 22px; box-shadow: 0 24px 70px rgba(16,42,32,.22); }
.dan-planning .kit-dialog::backdrop { background: rgba(16,42,32,.32); }
.dan-planning .kit-dialog__head h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); line-height: normal; letter-spacing: normal; }
.dan-planning .pform { display: flex; flex-direction: column; gap: 14px; font-family: inherit; }
.dan-planning .pform .alert { margin: 0; }
.dan-planning .frow { display: flex; gap: 12px; flex-wrap: wrap; }
.dan-planning .pform .form-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.dan-planning .frow > .form-field { flex: 1; min-width: 150px; }
.dan-planning .pform .form-field label { font-size: 12px; color: var(--d-muted); font-weight: 600; }
.dan-planning .pform .form-input[aria-invalid="true"] { border-color: var(--d-orange); border-width: 1px; box-shadow: 0 0 0 3px var(--d-orange-soft); }
.dan-planning .pform .kit-field__error { color: var(--d-orange-ink); font-size: 12px; margin: 0; }
.dan-planning .pform .acts { display: flex; gap: 8px; justify-content: flex-start; padding-top: 6px; border-top: 1px solid var(--d-line); flex-wrap: wrap; }
.dan-planning .pform .acts .sp { margin-inline-start: auto; }

/* ---------- שבירות ---------- */
@container planning (max-width: 820px) {
  .dan-planning .pillar-h { flex-wrap: wrap; }
  .dan-planning .pillar-h .nums { margin-inline-start: 0; }
}
@container planning (max-width: 520px) {
  .dan-planning .pcard { padding: 22px 20px; }
  .dan-planning .pillar-h { padding: 18px 18px; }
  .dan-planning .pillar-body { padding: 16px 16px 20px; }
}