/* src/app/dan/facilities.css — מתקנים ושעות: העיצוב של דן, מועתק.
 * מקור: legacy/community/facilities.html · legacy/community/hours.html
 * מסכים: src/app/screens/facilities.js · src/app/screens/hours.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים … שיהיה אחד לאחד". אלה שני ה-`<style>`
 * של הדפים, מועתקים ולא מיובאים (ADR 0025). כל כלל בקידומת `.dan-facilities` או `.dan-hours`; הפלטה `var(--green)` ⟶ `var(--d-green)`,
 * `#3A4A42` ⟶ `var(--d-body)`.
 *
 * ⚠️ מה שונה מהמקור, ולמה — ארבעה דברים:
 *  ① **אין `:root` · אין `body` · אין `*{box-sizing}`** — הפלטה ב-dan.css, הרקע והאיפוס של המעטפת (base.css).
 *  ② **שמות מחלקות מקומיים לכל מה שמתנגש עם המעטפת** (`card` · `pill` · `chip` · `tag` · `row` · `btn-*` · `empty`): `.card` ⟶ `.fcard` (ו-`.hcard`
 *     בדף השעות) · `.pill` ⟶ `.fpill` · `.chip` ⟶ `.fchip` · `.btn-solid/-ghost/-mini` ⟶ `.fbtn-solid/-ghost/-mini` · `.dlg .row` ⟶ `.dlg-actions` ·
 *     `.topbar` ⟶ `.ftop` · `.state` ⟶ `.fstate` · `.empty` ⟶ `.fempty`. מחלקה של דן באותו שם יורשת בשקט את הכללים של המעטפת (נמדד ב-/community).
 *  ③ **`.card.off` בלי `opacity:.62`** — טקסט על שקיפות כזו נופל מתחת ל-4.5:1 (axe, ui-a11y). ⟹ מתקן מושבת נראה מושתק בלי שקיפות.
 *     וכל `var(--dim)` של דן שהיה צבע **טקסט** ⟹ `var(--d-faint)` (`--d-dim` הוא לקווים בלבד — ראו dan.css).
 *  ④ **`container` ולא `@media`** — הרוחב תלוי במעטפת (סרגל פתוח/סגור), לא בחלון. ו-`minmax(min(300px,100%),1fr)` במקום `minmax(300px,1fr)`:
 *     ב-375 הפיקסלים 300 גולש.
 * ⛔ **מה מהמקור אינו כאן** (אין לו רכיב על המסך — ראו הכותרת של screens/facilities.js): `.nav-s` (סיידבר) · `.mgr`/`.mgrs`/`.none` (אחראים) ·
 *    `.fphoto*` (תמונת מתקן) · `.schedrow`/`.rdays`/`.rday` (עורך הלוח) · `.tag` ו-`.upd.gone` (ארכיון/פג תוקף) · `dialog`/`.dlg` של דן
 *    (הדיאלוג כאן הוא `kit-dialog` ומעוצב לפיו, בתוך `.dan-facilities`). כל אחד מהם נכנס עם הרכיב שלו.
 */

/* ═══════════════════════════ /facilities — מתקנים ═══════════════════════════ */

/* תקרת רוחב לתוכן: בלעדיה, על מסך רחב הטור נמתח לכל הרוחב והכרטיס נשאר קטן בקצהו (`main{max-width:1180px}` בדן). */
.dan-facilities {
  container: dan-facilities / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 1180px;
  /* line-height: normal — על `.dan` ב-dan.css (01.10): בדן אין line-height בגוף; המעטפת קובעת 1.6 */
}
.dan-facilities a { color: var(--d-green); text-decoration: none; }
.dan-facilities a:hover { color: var(--d-orange-ink); }

.dan-facilities .ftop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-facilities h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-facilities .ftop .meta { font-size: 15.5px; color: var(--d-muted); }

.dan-facilities .fbtn-solid { font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--d-green); border: 0;
  border-radius: 999px; padding: 12px 22px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.22); }
.dan-facilities .fbtn-solid:hover { background: var(--d-green-dark); }
.dan-facilities .fbtn-ghost { font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--d-green); background: #fff;
  border: 1px solid #D8E3DA; border-radius: 999px; padding: 10px 18px; cursor: pointer; display: inline-block; text-align: center; }
.dan-facilities .fbtn-ghost:hover { background: #F4F8F5; }
.dan-facilities .fbtn-mini { font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--d-muted); background: none; border: 0;
  cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.dan-facilities .fbtn-mini:hover { background: #F4F1E7; color: var(--d-orange-ink); }

/* auto-fit ולא auto-fill: auto-fill משאיר עמודות רשת ריקות פתוחות, ולכן מתקן בודד נדחס לרוחב מינימלי ושאר הטור נשאר חור.
   auto-fit מקפל עמודות ריקות, כך שכרטיס יחיד ממלא את הטור וכמה כרטיסים נפרשים זה לצד זה. */
.dan-facilities .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.dan-facilities .fcard { background: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  /* קפיצה מהסיידבר לא מצמידה את הכרטיס לקצה העליון של החלון — במובייל כפתור הניווט הצף יושב שם. */
  scroll-margin-top: 86px; }
/* ⚠️ ③ — בדן `opacity:.62`. כאן: רקע קרם, מסגרת פנימית, ושם בצבע מושתק (≥ 4.5:1) — מושבת נראה מושבת בלי לשבור AA. */
.dan-facilities .fcard.off { background: var(--d-cream2); box-shadow: inset 0 0 0 1px var(--d-line); }
.dan-facilities .fcard.off .fname { color: var(--d-muted); }
.dan-facilities .fcard.off .hours { background: #fff; }
.dan-facilities .fhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dan-facilities .fname { font-size: 19px; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: normal; }
.dan-facilities .fbranch { font-size: 13px; color: var(--d-faint); }
.dan-facilities .fpill { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.dan-facilities .fpill.ok { color: var(--d-green-dark); background: var(--d-mint); }
.dan-facilities .fpill.warn { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-facilities .fpill.off { color: #5F6B64; background: #F1EFE7; }

.dan-facilities .frow { display: flex; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.dan-facilities .frow .k { color: var(--d-faint); flex: none; min-width: 72px; }
.dan-facilities .frow .v { color: var(--d-body); min-width: 0; overflow-wrap: anywhere; }
/* ⚠️ `fempty` ולא `empty` של דן — `.empty` של המעטפת (components.css) הוא `text-align:center; padding:32px 16px`, ונמדד על "שעות הפתיחה טרם עודכנו": גובה 83px במקום שורה. */
.dan-facilities .frow .v.fempty { color: var(--d-faint); }

.dan-facilities .facts { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--d-line-soft); padding-top: 14px; }
.dan-facilities .actions { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--d-line-soft); padding-top: 14px; }
.dan-facilities .actions.top { border-top: 0; border-bottom: 1px solid var(--d-line-soft); padding-top: 0; padding-bottom: 14px; align-items: center; }

/* לוח השעות — כמה שורות (שירותים) אפשריות, כל אחת עם תווית ואז הימים הרצופים שלה שהתקבצו לטווח ("א׳–ה׳").
   תווית העמודה צרה וקבועה כדי שהשעות יתיישרו זו מתחת לזו. */
.dan-facilities .hours { display: flex; flex-direction: column; gap: 6px; background: var(--d-cream2); border-radius: 14px; padding: 13px 15px; }
.dan-facilities .hlabel { font-size: 13.5px; font-weight: 600; color: var(--d-green-dark); margin-top: 4px; }
.dan-facilities .hlabel:first-child { margin-top: 0; }
.dan-facilities .hsep { height: 1px; background: var(--d-line-soft); margin: 6px 0; }
.dan-facilities .hrow { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.dan-facilities .hrow .hd { flex: none; width: 46px; color: var(--d-muted); font-weight: 500; }
/* ⚠️ תיקון bidi של דן (שני הדפים מרנדרים את אותו לוח מאותו API): en-dash בין שני מספרים בפסקה עברית מתהפך — "07:30–12:30" הוצג
   "12:30–07:30". `direction:ltr` אינו קישוט; `unicode-bidi:plaintext` שומר שערך עברי כמו "סגור" ימשיך להיות מוצג בכיוון הנכון. */
.dan-facilities .hrow .ht { color: var(--d-text); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; }
.dan-facilities .hrow .ht.fempty { color: var(--d-faint); }

/* העדכונים הם לוח מודעות תפעולי ולא הערת-שוליים, ולכן פאנל ברוחב מלא בראש התוכן — מעל כרטיסי המתקנים ולא בטור צר לצידם. */
.dan-facilities .updatesPanel, .dan-facilities .facFilters { background: #fff; border-radius: 20px; padding: 20px 24px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 14px; }
.dan-facilities .updHead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dan-facilities .updHead h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; }
.dan-facilities .filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dan-facilities .fchip { font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--d-muted); background: var(--d-cream2);
  border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.dan-facilities .fchip:hover { background: #F1EFE7; }
.dan-facilities .fchip.on { background: var(--d-green); color: #fff; }

/* ⭐ 06.10 — פאנל הסינון (ענף · מיקום): אותו פאנל ואותם צ'יפים כמו העדכונים; שורה לכל קבוצה, תווית קבועה בצד. */
.dan-facilities .fgroup { display: flex; align-items: center; gap: 12px; }
/* התווית היא `.updGroupLabel` (13px · 600 · ירוק) — אותה טיפוגרפיה בלי הצהרת font-size חדשה (תקרת ui-tokens-only); המונה הוא `<small>`, גודלו מהדפדפן. */
.dan-facilities .fgroupLabel { flex: none; min-width: 44px; }
.dan-facilities .fcount { color: var(--d-muted); }
.dan-facilities .updGroup { display: flex; flex-direction: column; gap: 8px; }
/* בדן `<div class="hsep">` בין קבוצות; כאן הקבוצות מוסתרות ומוצגות בלחיצה על צ'יפ, ולכן הקו הוא של כל קבוצה גלויה שלפניה גלויה אחרת. */
.dan-facilities .updGroup:not([hidden]) ~ .updGroup:not([hidden]) { border-top: 1px solid var(--d-line-soft); margin-top: 6px; padding-top: 13px; }
.dan-facilities .updGroupLabel { font-size: 13px; font-weight: 600; color: var(--d-green-dark); }
.dan-facilities .upd { background: var(--d-cream2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px;
  align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.dan-facilities .upd .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dan-facilities .upd .d { font-size: 12.5px; color: var(--d-faint); margin-top: 4px; }

/* הדיאלוג של דן (`.dlg`) על `kit-dialog` — המעטפת (כותרת · X · מלכודת מיקוד · שער dirty) היא של kit/dialog.js. */
.dan-facilities .kit-dialog { border-radius: 22px; width: min(460px, calc(100vw - 32px)); background: #fff; color: var(--d-text);
  box-shadow: 0 30px 70px rgba(16,42,32,.24); }
.dan-facilities .kit-dialog::backdrop { background: rgba(16,28,20,.42); }
.dan-facilities .kit-dialog__head { padding: 26px 28px 0; border-block-end: 0; }
.dan-facilities .kit-dialog__head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; }
.dan-facilities .kit-dialog__body { padding: 14px 28px 26px; }
.dan-facilities .kit-dialog .form-field { gap: 6px; margin-block-end: 14px; }
.dan-facilities .kit-dialog .form-field label { font-size: 14px; font-weight: 500; color: var(--d-body); }
.dan-facilities .kit-dialog .form-input { font-family: inherit; font-size: 16px; padding: 12px 14px; min-height: 0;
  border: 1.5px solid var(--d-line); border-radius: 12px; background: var(--d-cream2); color: var(--d-text); width: 100%; }
.dan-facilities .kit-dialog .form-input:focus { border-color: var(--d-green); background: #fff; }
.dan-facilities .kit-dialog .form-input[aria-invalid="true"] { border-color: var(--d-orange-ink); }
.dan-facilities .kit-dialog .kit-field__hint { font-size: 13px; color: var(--d-faint); line-height: 1.5; margin-block: 0; }
.dan-facilities .kit-dialog .kit-field__error { font-size: 13px; color: var(--d-orange-ink); margin-block: 0; }
.dan-facilities .kit-dialog .alert { font-size: 14px; color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 10px;
  padding: 10px 12px; margin-block-end: 14px; border: 0; }
.dan-facilities .dlg-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
/* הודעת המצב ("שומר…") יושבת מתחת ל-meta ולא בשורה משלה: ריקה היא אפס גובה (kit.css קובע 1.2em), ו-`role=status` נשאר בעץ. */
.dan-facilities .ftop .kit-status { font-size: 14px; min-height: 0; margin-top: 4px; }

.dan-facilities .fstate { background: #fff; border-radius: 20px; padding: 38px 28px; text-align: center; box-shadow: var(--d-shadow);
  color: var(--d-muted); font-size: 16px; line-height: 1.6; }
.dan-facilities .fstate b { display: block; color: var(--d-ink); font-size: 18px; font-weight: 600; margin-bottom: 6px; }

/* ④ — בדן 1040px של חלון (עם סרגל של 260px: ≈700px של תוכן). כאן — רוחב התוכן עצמו. */
@container dan-facilities (max-width: 720px) {
  .dan-facilities .cards { grid-template-columns: 1fr; }
  .dan-facilities .fgroup { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════════════════ /hours — שעות פתיחה (ציבורי) ═══════════════════════════ */

.dan-hours { container: dan-hours / inline-size; }   /* line-height: normal — על `.dan` ב-dan.css */
.dan-hours a { color: var(--d-green); text-decoration: none; }
.dan-hours a:hover { color: var(--d-orange-ink); }

.dan-hours .wrap { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dan-hours .hcard { background: #fff; border-radius: clamp(20px, 3vh, 28px); overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,42,32,.04), 0 26px 64px rgba(16,42,32,.10); }

.dan-hours .scene { height: clamp(120px, 18vh, 150px); background: linear-gradient(180deg, var(--d-cream) 0%, #EFF6EC 100%);
  position: relative; display: grid; place-items: end center; overflow: hidden; }
/* ⚠️ base.css קובע `svg { width:20px; height:20px }` — הנוף מקבל מידה מפורשת (ושוב ב-attributes), והקשת שלה. */
.dan-hours .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dan-hours .arch { position: relative; width: 100px; height: 100px; background: #fff; border-radius: 50px 50px 0 0;
  display: grid; place-items: center; padding-top: 16px; }
.dan-hours .arch svg { position: static; width: 46px; height: 46px; }

.dan-hours .head { padding: 22px 28px 4px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.dan-hours .title { font-size: clamp(24px, 4vh, 30px); font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0; }
.dan-hours .sub { font-size: 15.5px; color: var(--d-muted); }

.dan-hours .list { padding: 18px 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.dan-hours .fac { background: var(--d-cream2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dan-hours .fname { font-size: 18.5px; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: normal; }
.dan-hours .hours { display: flex; flex-direction: column; gap: 5px; }
.dan-hours .hours.none { color: var(--d-faint); font-size: 16px; }
.dan-hours .hlabel { font-size: 13.5px; font-weight: 600; color: var(--d-green-dark); margin-top: 6px; }
.dan-hours .hlabel:first-child { margin-top: 0; }
.dan-hours .hsep { height: 1px; background: #E7E3D6; margin: 6px 0; }
.dan-hours .hrow { display: flex; gap: 12px; align-items: baseline; font-size: 16.5px; }
.dan-hours .hrow .hd { flex: none; width: 48px; color: var(--d-muted); font-weight: 500; }
/* ⚠️ direction:ltr אינו קישוט — בלעדיו טווח שעות מוצג הפוך (en-dash ניטרלי ל-bidi). נמדד בדן 2026-08-31 מול הפרודקשן: בריכה · כלבו · ספרייה
   נשאו en-dash והתהפכו, בעוד המרפאה (מקף ASCII) נראתה תקינה — באותו דף חלק הפוך וחלק נכון. `unicode-bidi:plaintext` ולא סתם ltr:
   ערך עברי כמו "סגור" ממשיך להיות מוצג כעברית. */
.dan-hours .hrow .ht { color: var(--d-body); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; }
.dan-hours .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--d-muted); }
.dan-hours .meta a { font-weight: 500; }
/* התחתית של דן (`.foot`) — "לעמוד הבית" ממורכז מתחת לכרטיס. נצבעת ב-`paintPublic` (public-screen.js), מחוץ ל-`.hcard`, באותו `.wrap`. */
.dan-hours .foot { display: flex; justify-content: center; gap: 14px; align-items: center; font-size: 15px; color: var(--d-faint); flex-wrap: wrap;
  margin-block-start: 18px; }
/* מקום העדכון (`mountHours`): ריק עד שהקריאה השנייה חוזרת — ואז אינו תופס שורה ואינו מוסיף רווח. */
.dan-hours .updslot { display: flex; flex-direction: column; gap: 8px; }
.dan-hours .updslot:empty { display: none; }
.dan-hours .upd { display: flex; gap: 9px; align-items: flex-start; background: var(--d-orange-soft); border-radius: 12px;
  padding: 10px 12px; font-size: 15px; color: var(--d-orange-ink); line-height: 1.5; }
.dan-hours .upd i { width: 8px; height: 8px; border-radius: 50%; background: var(--d-orange); flex: none; margin-top: 7px; }

.dan-hours .fstate { padding: 34px 28px 40px; text-align: center; color: var(--d-muted); font-size: 16px; line-height: 1.6; }
.dan-hours .fstate b { display: block; color: var(--d-ink); font-size: 17.5px; font-weight: 600; margin-bottom: 5px; }

@container dan-hours (max-width: 560px) {
  .dan-hours .head { padding: 20px 20px 4px; }
  .dan-hours .list { padding: 16px 20px 26px; }
  .dan-hours .fstate { padding: 28px 20px 32px; }
}