/* src/app/dan/goals.css — יעדי הקהילה: העיצוב של דן, מועתק.
 * מקור: legacy/community/goals.html
 * מסכים: src/app/screens/community-goals.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום למקום."
 *    זה ה-<style> של goals.html (718 שורות), כל כלל בקידומת `.dan-goals`, ה-`:root` שלו ב-`dan.css` (+ שורת
 *    `--st-*` למטה — של הדף הזה בלבד, ולכן כאן ותחומה).
 *
 * ⚠️ מה שונה מהמקור, ולמה:
 *  ① **אין `:root` ואין `*{box-sizing}` · `body` · `main` · `aside`** — המעטפת קובעת אותם (tokens.css · base.css · shell).
 *  ② **שמות שהתנגשו עם המעטפת** (`packages/ui/*.css` · `kit.css`, לא תחומים שם): `.topbar` ⟶ `.dtop` · `.chip` ⟶ `.dchip` ·
 *     `.pill` ⟶ `.dpill` · `.empty` ⟶ `.dempty` · `.btn` ⟶ `.dbtn`. (הרשימה: הפקודה בנוהל.)
 *  ③ **שלושה צבעי טקסט הוכהו ל-AA** — `--st-doing` (#9C6410 על #F7E9CE: 4.12 ⟹ #8A5A0E) · `--st-none` (#7B8880 על #EFF1EE: 3.26
 *     ⟹ #5F6E66) · `--st-done` (#0E7A55 על #DCEFE4: 4.45 ⟹ #0B6244). `.hist-i.stale` ללא `opacity:.55` (הוא מוריד טקסט מתחת ל-4.5).
 *  ④ **`@container` ולא `@media`** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור). הטבלה (`min-width:900px`) גוללת **בתוך** `.tblwrap`
 *     — גלילה אופקית של הדף כולו (ui-viewport ב-375) אין; ל-`.tblwrap` יש `tabindex="0"` ושם נגיש (axe: scrollable-region-focusable).
 *  ⑤ **המגירה (`.drawer` · `.backdrop`) הפכה ל-`<dialog>` של src/app/kit** (הנוהל) — כאן רק פנימיותה: `dr-sec` · `fld` · `hist` · כפתורים.
 *  ⑥ **ה-toast מחוץ ל-`.dan-goals`** (`.dan-goals-toast`, על <body>): `container` על המסך הופך `position:fixed` ליחסי לו — כמו `.dash-tip`.
 *  ⑦ **ריחוף על קישור** ב-`--d-orange-ink` ולא `--d-orange` (#E07A3F על לבן: 3.0:1) — כמו manager.css.
 *  ⑧ **חדש, ואין בדן:** `.st.set` (מצב שדווח, גוון ניטרלי — ראו הערת המסך: אין צבע לפי קוד) · `.due.over` · `.ttl` (כפתור-כותרת) ·
 *     `.hnote` · `.emptyhist.err` (כישלון בטעינת ההיסטוריה — בדן `style="color:var(--st-stuck)"` בשורה) · `.dan-goals .kit-dialog__body` (בלי ריפוד כפול).
 *  ⑨ **`line-height: normal` על המכל** (מ-01.10 — `.dan` ב-dan.css, לכל המסכים) — בדן ל-`body` אין `line-height`, והמעטפת קובעת 1.6 (`--lh-body`) שהייתה יורשת לכל צ'יפ · לשונית · כפתור · אריח (נמדד:
 *     20–25px לשורה מול 16–18px, כלומר הצ'יפים והלשוניות גבוהים ב-4–6px). הכללים של דן שקובעים `line-height` משלהם (`td` 1.5 · `.note` 1.45) נשארים.
 *     ⚠️ הלשוניות הן `<a>` (קישור אמיתי למקרה של קליק אמצעי) ולא `<button>` של דן — ולכן אין להן `line-height` מפורש: הן יורשות `normal` כמו הכפתור.
 */

.dan-goals {
  container: goals / inline-size;
  display: flex; flex-direction: column; gap: 18px;
  color: var(--d-text);
  /* ⑨ line-height: normal — על `.dan` ב-dan.css */
  /* מצבי יעד — נגזרים מצבעי המרקר במצגת המקורית (ראו ③) */
  --st-done: #0B6244;   --st-done-bg: #DCEFE4;
  --st-doing: #8A5A0E;  --st-doing-bg: #F7E9CE;
  --st-stuck: #A6382D;  --st-stuck-bg: #F6DCD8;
  --st-block: #5D5289;  --st-block-bg: #E6E2F1;
  --st-none: #5F6E66;   --st-none-bg: #EFF1EE;
}
.dan-goals a { color: var(--d-green); text-decoration: none; }
.dan-goals a:hover { color: var(--d-orange-ink); }
.dan-goals h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-goals .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-goals .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-goals .dtop-end { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dan-goals .faint { color: var(--d-faint); }

/* --- טאבי שנה --- */
.dan-goals .years { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-goals .ytab { font: inherit; font-size: 14.5px; font-weight: 500; color: var(--d-muted); background: #fff; border: 1px solid var(--d-line);
  border-radius: 20px; padding: 7px 16px; cursor: pointer; white-space: nowrap; display: inline-block; }
.dan-goals .ytab:hover { border-color: var(--d-green-mid); color: var(--d-green); }
.dan-goals .ytab.on, .dan-goals .ytab.on:hover { background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }

/* --- סרגל כלים --- */
.dan-goals .tools { background: #fff; border: 1px solid var(--d-line); border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--d-shadow); }
.dan-goals .toolrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dan-goals .search { flex: 1; min-width: 240px; position: relative; display: flex; align-items: center; }
.dan-goals .search input { width: 100%; font: inherit; font-size: 15px; padding: 10px 40px 10px 14px; border: 1px solid var(--d-line);
  border-radius: 12px; background: #FCFBF7; color: var(--d-text); }
.dan-goals .search input:focus { outline: 2px solid var(--d-green-mid); outline-offset: 1px; border-color: transparent; }
.dan-goals .search .ico { position: absolute; inset-inline-end: 14px; color: var(--d-faint); font-size: 15px; pointer-events: none; }
.dan-goals select, .dan-goals .datein { font: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid var(--d-line); border-radius: 12px;
  background: #FCFBF7; color: var(--d-text); cursor: pointer; }
.dan-goals select:focus, .dan-goals .datein:focus { outline: 2px solid var(--d-green-mid); outline-offset: 1px; }
.dan-goals ::placeholder { color: var(--d-faint); opacity: 1; }
.dan-goals .dchip { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--d-muted); background: #fff; border: 1px solid var(--d-line);
  border-radius: 20px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }
.dan-goals .dchip:hover { border-color: var(--d-green-mid); color: var(--d-green); }
.dan-goals .dchip.on { background: var(--d-mint); border-color: var(--d-green-mid); color: var(--d-green-dark); font-weight: 600; }
.dan-goals .clearbtn { font: inherit; font-size: 13.5px; color: var(--d-orange-ink); background: none; border: 0; cursor: pointer; padding: 6px 4px; }
.dan-goals .clearbtn:hover { text-decoration: underline; }
.dan-goals .asof { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--d-muted);
  background: var(--d-orange-soft); border-radius: 12px; padding: 6px 12px; }
.dan-goals .asof b { color: var(--d-orange-ink); font-weight: 600; }
.dan-goals .addbtn { font: inherit; font-size: 14.5px; font-weight: 500; color: #fff; background: var(--d-green); border: 0;
  border-radius: 11px; padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.dan-goals .addbtn:hover { background: var(--d-green-dark); }

/* --- סטטיסטיקה --- */
.dan-goals .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dan-goals .stat { background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 2px; }
.dan-goals .stat b { font-size: 24px; font-weight: 600; color: var(--d-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dan-goals .stat span { font-size: 13px; color: var(--d-muted); }
.dan-goals .stat.acc b { color: var(--d-green); }
.dan-goals .stat.warn b { color: var(--st-stuck); }
.dan-goals .meter { height: 7px; border-radius: 99px; background: var(--d-track); overflow: hidden; display: flex; margin-top: 7px; }
.dan-goals .meter i { display: block; height: 100%; }
.dan-goals .meter i.rep { background: var(--d-green); }
.dan-goals .meter i.unrep { background: #D6DBD7; }

/* --- טבלה --- */
.dan-goals .tablecard { background: #fff; border: 1px solid var(--d-line); border-radius: 16px; box-shadow: var(--d-shadow); overflow: hidden; }
.dan-goals .tblwrap { overflow-x: auto; }
.dan-goals .tblwrap:focus-visible { outline: 2px solid var(--d-green); outline-offset: -2px; }
.dan-goals table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 900px; }
.dan-goals thead th { position: sticky; top: 0; z-index: 1; background: #FBF9F3; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--d-muted); text-align: right; padding: 11px 14px; border-bottom: 1px solid var(--d-line); white-space: nowrap; }
.dan-goals tbody td { padding: 12px 14px; border-bottom: 1px solid var(--d-line-soft); vertical-align: top; line-height: 1.5; }
.dan-goals tbody tr:last-child td { border-bottom: 0; }
.dan-goals tbody tr:hover { background: #FCFCF9; }
.dan-goals tbody tr.sub { background: #FDFDFB; }
.dan-goals tbody tr.sub .ref { color: var(--d-faint); font-weight: 400; }
.dan-goals tbody tr.sub .title { padding-inline-start: 20px; color: var(--d-body); font-size: 14px; }
.dan-goals .ref { font-weight: 600; color: var(--d-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dan-goals .ref.dup { color: var(--st-stuck); }
.dan-goals .title { max-width: 620px; }
.dan-goals thead th:nth-child(2) { min-width: 330px; }
.dan-goals .note { font-size: 12.5px; color: var(--d-faint); margin-top: 4px; line-height: 1.45; }
.dan-goals .note.warn { color: var(--st-stuck); }
.dan-goals .reason { font-size: 12.5px; color: var(--st-stuck); margin-top: 4px; line-height: 1.45; }
.dan-goals .dpill { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  background: var(--d-track); color: #42524A; }
.dan-goals .dpill.miss { background: var(--st-stuck-bg); color: var(--st-stuck); font-weight: 600; }
.dan-goals .dpill.off { background: var(--st-doing-bg); color: var(--st-doing); font-weight: 600; }
.dan-goals .st { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 11px; white-space: nowrap;
  border-radius: 2px 8px 3px 7px / 7px 3px 8px 2px; }
.dan-goals .st.done { background: var(--st-done-bg); color: var(--st-done); }
.dan-goals .st.doing { background: var(--st-doing-bg); color: var(--st-doing); }
.dan-goals .st.stuck { background: var(--st-stuck-bg); color: var(--st-stuck); }
.dan-goals .st.block { background: var(--st-block-bg); color: var(--st-block); }
.dan-goals .st.none { background: var(--st-none-bg); color: var(--st-none); font-weight: 500; }
/* ⑧ מצב שדווח — גוון ניטרלי אחד לכל קוד: המסך אינו צובע לפי קוד (הערת המסך), ולכן אין כאן done/doing/stuck. */
.dan-goals .st.set { background: var(--d-track); color: #42524A; }
.dan-goals .tgt { font-weight: 600; color: var(--d-green-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dan-goals .due { font-size: 12.5px; color: var(--d-orange-ink); font-weight: 500; white-space: nowrap; }
.dan-goals .due.over { color: var(--st-stuck); font-weight: 600; }
.dan-goals .owner { font-size: 13.5px; color: #42524A; }
.dan-goals .owner .vacant { color: var(--d-orange-ink); font-size: 12.5px; }
.dan-goals .src { font-size: 12px; color: var(--d-faint); white-space: nowrap; }
.dan-goals .dempty { padding: 44px; text-align: center; color: var(--d-muted); font-size: 15px; }
.dan-goals .dempty a { font-weight: 500; text-decoration: underline; }
.dan-goals .catrow td { background: #F6F4EC; font-weight: 600; color: var(--d-ink); font-size: 13.5px;
  padding: 8px 14px; border-bottom: 1px solid var(--d-line); }
.dan-goals .catrow .n { font-weight: 400; color: var(--d-muted); font-size: 12.5px; }
.dan-goals tbody tr.clickable { cursor: pointer; }
/* ⑧ כפתור-כותרת: הטקסט של דן, עטוף ב-<button> אמיתי כדי שהמקלדת וקורא המסך יגיעו אליו. */
.dan-goals .ttl { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: start; cursor: pointer;
  line-height: inherit; display: block; width: 100%; }
.dan-goals .ttl:hover { color: var(--d-green); }
.dan-goals .ttl:focus-visible { outline: 2px solid var(--d-green); outline-offset: 3px; border-radius: 4px; }

/* --- מגירת העריכה (פנימיות ה-<dialog>) --- */
.dan-goals .kit-dialog__body { padding: 0; }
.dan-goals .dr-sec { padding: 18px 22px; border-bottom: 1px solid var(--d-line-soft); display: flex; flex-direction: column; gap: 12px; }
.dan-goals .dr-sec:last-child { border-bottom: 0; }
.dan-goals .dr-sec > h3 { font-size: 13px; font-weight: 600; color: var(--d-muted); letter-spacing: .04em; margin: 0; }
.dan-goals .dr-sec form { display: flex; flex-direction: column; gap: 12px; }
.dan-goals .fld { display: flex; flex-direction: column; gap: 5px; }
.dan-goals .fld label { font-size: 12.5px; font-weight: 500; color: var(--d-muted); }
.dan-goals .fld input, .dan-goals .fld select, .dan-goals .fld textarea { font: inherit; font-size: 14.5px; padding: 9px 12px;
  border: 1px solid var(--d-line); border-radius: 10px; background: #FCFBF7; color: var(--d-text); width: 100%; }
.dan-goals .fld textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
.dan-goals .fld input:focus, .dan-goals .fld select:focus, .dan-goals .fld textarea:focus { outline: 2px solid var(--d-green-mid); outline-offset: 1px; border-color: transparent; }
.dan-goals .fld.row2 { flex-direction: row; gap: 10px; }
.dan-goals .fld.row2 > * { flex: 1; min-width: 0; }
.dan-goals .chkrow { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--d-text); }
.dan-goals .chkrow input { width: auto; accent-color: var(--d-green); }
.dan-goals .dbtn { font: inherit; font-size: 14.5px; font-weight: 500; padding: 9px 18px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; }
.dan-goals .dbtn.primary { background: var(--d-green); color: #fff; }
.dan-goals .dbtn.primary:hover { background: var(--d-green-dark); }
.dan-goals .dbtn.primary:disabled { opacity: .5; cursor: default; }
.dan-goals .dbtn.ghost { background: #fff; border-color: var(--d-line); color: var(--d-text); }
.dan-goals .dbtn.ghost:hover { border-color: var(--d-green-mid); color: var(--d-green); }
.dan-goals .dbtn.danger { background: #fff; border-color: var(--st-stuck); color: var(--st-stuck); }
.dan-goals .dbtn.danger:hover { background: var(--st-stuck-bg); }
.dan-goals .btnrow { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.dan-goals .hist { display: flex; flex-direction: column; gap: 0; }
.dan-goals .hist-i { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--d-line-soft); align-items: flex-start; }
.dan-goals .hist-i:last-child { border-bottom: 0; }
.dan-goals .hist-i .when { font-size: 12.5px; color: var(--d-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; min-width: 74px; }
.dan-goals .hist-i .body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.dan-goals .hist-i .who { font-size: 12px; color: var(--d-faint); margin-top: 2px; }
.dan-goals .hist-i .rsn { font-size: 12.5px; color: var(--st-stuck); margin-top: 3px; }
.dan-goals .hist-i .hnote { margin-top: 3px; }
/* ③ היסטוריה ישנה: בדן `opacity:.55` (תחת AA) — כאן צבע מעומעם בלבד, וגם הגוון של הטקסט. */
.dan-goals .hist-i.stale .body, .dan-goals .hist-i.stale .when { color: var(--d-muted); }
.dan-goals .emptyhist { font-size: 13.5px; color: var(--d-muted); padding: 6px 0; }
.dan-goals .emptyhist.err { color: var(--st-stuck); }

/* --- toast · מחוץ ל-.dan-goals (⑥) --- */
.dan-goals-toast { position: fixed; inset-block-end: 22px; inset-inline-start: 50%; transform: translateX(50%);
  background: #103C2A; color: #fff; font-family: var(--font); font-size: 14px; padding: 11px 22px; border-radius: 12px; z-index: 60;
  box-shadow: 0 8px 24px rgba(16,42,32,.24); }
.dan-goals-toast.err { background: #A6382D; }
.dan-goals-toast:empty { display: none; }

/* --- שבירות · ④ --- */
@container goals (max-width: 640px) {
  .dan-goals .dtop-end { width: 100%; }
  .dan-goals .tools { padding: 12px; }
  .dan-goals .search { min-width: 0; flex-basis: 100%; }
  .dan-goals .asof { flex-wrap: wrap; }
  .dan-goals .dempty { padding: 28px 16px; }
  .dan-goals .dr-sec { padding: 16px; }
}