/* src/app/dan/misc.css — קהילות · שאלות · חירום · משפטי · 404: העיצוב של דן, מועתק.
 * מקור: legacy/community/communities.html · legacy/community/questions.html · legacy/community/emergency.html · legacy/community/legal.html · legacy/community/legal-privacy.html · legacy/community/legal-terms.html · legacy/community/404.html · legacy/community/loading.html
 * מסכים: src/app/screens/communities.js · src/app/screens/questions.js · src/app/screens/emergency.js · src/app/screens/legal.js · src/app/screens/not-found.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים … שיהיה אחד לאחד". אלה ה-`<style>` של הדפים, מועתקים
 * ולא מיובאים (ADR 0025). כל כלל בקידומת `.dan-communities` · `.dan-questions` · `.dan-emergency` · `.dan-legal` · `.dan-not-found`;
 * הפלטה `var(--green)` ⟶ `var(--d-green)`, `#3A4A42` ⟶ `var(--d-body)`.
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים:
 *  ① **אין `:root` · אין `body` · אין `*{box-sizing}` · אין גופן** — הפלטה ב-dan.css, הרקע והאיפוס של המעטפת (base.css). `main{padding}` של דן — של המעטפת.
 *  ② **שמות מקומיים לכל מה שמתנגש עם המעטפת** (components.css · kit.css — הרשימה המלאה ובפקודה: docs/runbooks/dan-design-port.md): `.row` ⟶ `.crow` (קהילות) · `.qacts` (שאלות) · `.erow` (חירום) ·
 *     `.tag` ⟶ `.ctag` · `.etag` · `.btn` ⟶ `.qbtn` · `.card` ⟶ `.ecard` · `.lcard` · `.empty` ⟶ `.eempty`. מחלקה של דן באותו שם יורשת בשקט את הכללים שלהן.
 *  ③ **כל `var(--faint)`/`var(--dim)` של דן שהיה צבע טקסט ⟹ `var(--d-faint)`** (AA — dan.css). `.who` בשאלות היה `--dim` (#A3ACA5, ~2.4:1) והכשיל axe.
 *     וב-`.head .s` של החירום `opacity:.85` של דן הוחלף בצבע המעורבב עצמו (#9F473E על #FDECEA = 5.33:1) — axe אינו סומך על שקיפות.
 *  ④ **`container` ולא `@media`** — הרוחב תלוי במעטפת (סרגל פתוח/סגור), לא בחלון. ב-375 אין גלילה אופקית (ui-viewport): `.tw` גולל בתוך עצמו.
 *  ⑤ **הצבעים הפרטיים של דף:** `--red` · `--red-ink` · `--red-soft` של emergency.html ו-`--line:#E7E3D6` של emergency/legal (שונה מה-`--line` של page.css),
 *     ו-`--body:#55625B` של 404.html — מוצהרים על השורש של אותו מסך בלבד (לא על `.dan`), כדי שלא יזלגו.
 * ⭐ **סבב תיקון 01.10 (ממצאי הבודק)** — ⑥ `/legal`: הכרטיס 560 וממורכז (`.lcard`), ו-`.lfoot` מתחתיו (ממורכז, בלי קו — ה-`.foot` של `legal.html`); `.foot` בסוף העמוד נשאר (של `legal-privacy.html`).
 *    ⑦ **שער האישור של `legal.html`** (`.doc.on` · `.doc input` · `.gbtn` · `.gmsg` · `.gstate` + `.links`) — ב-`legal-parts.js`; `.btn`→`.gbtn` · `.msg.err`→`.gmsg` · `.state`→`.gstate` (מתנגשים עם המעטפת).
 *    ⑧ `/emergency`: `.calls--4` (כפתור "☎ הקיבוץ" רביעי כשיש טלפון שפורסם) · `.foot` עם `margin-top:16px` (נפרד מהכרטיס, בלי ה-`gap` של דן). ⑨ `/404`: `min-height` — ריכוז אנכי.
 * ⛔ **מה מהמקור אינו כאן:** `button{…}` · `button.go` ב-communities (המעבר הוא קישור ל-host מאושר, לא כפתור החלפת סשן) · `.mark img` (אין לוגו לכל קהילה) ·
 *    `.near`/`.go`/`.note` ב-emergency ("הקרוב אליך" ⛔ — אין lat/lng, ו-google.com/maps חיצוני) · כל `loading.html` (ראו להלן).
 * ⛔ **`loading.html` אינו מועתק, ובכוונה:** בדן הוא נכס מותג עצמאי ("עדיין לא משולב באתר — ממתין להחלטה איפה להשתמש בו", assets/brand-kit/README.md) — אין לו נתיב,
 *    ואין מסך שלנו שמקביל לו; מצב הטעינה בעגור הוא השלד (interface.md §6 — "לא מסכי טעינה קצרים — עדיף skeleton", כלשון ה-README של דן עצמו), שבבעלות `app.js`. בנוסף
 *    ההודעות המשעשעות בו נושאות שם של אדם ממשי ושל עסק — לא נכנסות למוצר.
 */

/* ═══════════════════════════ /communities — הקהילות שלי ═══════════════════════════ */

.dan-communities { container: dan-communities / inline-size; line-height: normal; }
.dan-communities a { color: var(--d-green); text-decoration: none; }
.dan-communities a:hover { color: var(--d-orange-ink); }

.dan-communities .wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dan-communities h1 { font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 4px; }
.dan-communities .sub { font-size: 15px; color: var(--d-muted); line-height: 1.6; }

/* הרצועה המנטה — בדן "בחר ברירת מחדל"; כאן ההסבר למה אין החלפה (הכותרת של communities.js). */
.dan-communities .first { background: var(--d-mint); border-radius: 14px; padding: 14px 16px;
  font-size: 14.5px; color: var(--d-ink); line-height: 1.65; }
.dan-communities .first b { font-weight: 600; }

.dan-communities .list { display: flex; flex-direction: column; gap: 12px; }
.dan-communities .crow { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-inline-start: 4px solid transparent; }
.dan-communities .crow.cur { border-inline-start-color: var(--d-green); }
.dan-communities .mark { width: 44px; height: 44px; border-radius: 12px; background: var(--d-line-soft);
  display: grid; place-items: center; overflow: hidden; flex: none; }
/* ⚠️ base.css קובע `svg { width:20px; height:20px }` — סמל הקהילה מקבל מידה מפורשת. */
.dan-communities .mark svg { width: 24px; height: 24px; }
.dan-communities .who { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.dan-communities .name { font-size: 17px; font-weight: 600; color: var(--d-ink); }
.dan-communities .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-communities .ctag { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; background: var(--d-line-soft); color: var(--d-muted); }
.dan-communities .ctag.cur { background: var(--d-mint); color: var(--d-green-dark); font-weight: 500; }
.dan-communities .ctag.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 500; }
.dan-communities .go { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; background: var(--d-mint); font-size: inherit; font-weight: 600; white-space: nowrap; }
.dan-communities .go:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
/* ⭐ 05.10 · ברירת מחדל — תגית כתומה כמו `.tag.def` בדן, כפתור משני בצורת `.go` (גובה מגע 44px), והודעת מצב. */
.dan-communities .ctag.def { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 500; }
.dan-communities .cbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--d-line); background: transparent; color: var(--d-ink); font: inherit; font-size: inherit; cursor: pointer; white-space: nowrap; }
.dan-communities .cbtn:hover { border-color: var(--d-green); }
.dan-communities .cbtn:disabled { opacity: .55; cursor: default; }
.dan-communities .cbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-communities .cstatus { margin: 0; min-height: 1.4em; font-size: inherit; color: var(--d-muted); }

.dan-communities .state { background: #fff; border-radius: 18px; padding: 40px 24px; text-align: center;
  box-shadow: var(--d-shadow); color: var(--d-muted); font-size: 16px; line-height: 1.6; }
.dan-communities .state b { display: block; color: var(--d-ink); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.dan-communities .state p { margin: 14px 0 0; }

/* "מה שכדאי לדעת" — תוכן של עגור, ברכיב הכרטיס של דן (`.state`/`.row`: לבן · 18 · צל). */
.dan-communities .cnotes { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px; }
.dan-communities .cnotes h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: normal; }
.dan-communities .cnotes ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; font-size: 14.5px; color: var(--d-body); line-height: 1.6; }

@container dan-communities (max-width: 480px) {
  .dan-communities .crow { padding: 14px; }
  .dan-communities .state { padding: 32px 18px; }
}

/* ═══════════════════════════ /questions — שאלות מ-Claude ═══════════════════════════ */

.dan-questions { container: dan-questions / inline-size; line-height: normal; }
.dan-questions a { color: var(--d-green); text-decoration: none; }

.dan-questions .wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dan-questions .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dan-questions h1 { font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 4px; }
.dan-questions .sub { font-size: 15px; color: var(--d-muted); }
/* הודעת המצב ("שומר…") — מתחת לכותרת המשנית; ריקה היא אפס גובה (kit.css קובע 1.2em). */
.dan-questions .kit-status { min-height: 0; margin: 0; font-size: 14px; }

.dan-questions .tabs { display: flex; gap: 6px; background: #fff; border: 1px solid var(--d-line); border-radius: 999px; padding: 4px; }
.dan-questions .tab { font-family: inherit; font-size: 14px; color: var(--d-muted); background: none; border: 0;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; }
/* ⭐ `.tab.on` של דן = `aria-pressed="true"` כאן: המצב כבר נקרא ונכתב כתכונה (mountQuestions), ו-CSS על התכונה אינו נסחף מהמצב. */
.dan-questions .tab[aria-pressed="true"] { background: var(--d-green); color: #fff; font-weight: 500; }

.dan-questions .qlist { display: flex; flex-direction: column; gap: 14px; }
.dan-questions .q { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 12px; border-inline-start: 4px solid transparent; }
.dan-questions .q.blocking { border-inline-start-color: var(--d-orange); }
.dan-questions .qhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dan-questions .topic { font-size: 12.5px; font-weight: 600; color: var(--d-green-dark); background: var(--d-mint);
  border-radius: 999px; padding: 3px 10px; }
.dan-questions .flag { font-size: 12.5px; font-weight: 600; color: var(--d-orange-ink); background: var(--d-orange-soft);
  border-radius: 999px; padding: 3px 10px; }
/* ⚠️ ③ — `--dim` של דן (#A3ACA5) הוא צבע טקסט ב-`.who` ונכשל AA; `--d-faint` מוכהה. */
.dan-questions .who { font-size: 12.5px; color: var(--d-faint); margin-inline-start: auto; }
.dan-questions .qtext { font-size: 17.5px; font-weight: 600; color: var(--d-ink); line-height: 1.45; }
/* 🔴 `white-space:pre-wrap` — הקשר מ-`gcp/ask.py --context` ותשובה שהוקלדה בכמה שורות שומרים את השורות שלהם (questions.selftest §ה בודקת שהכלל כאן). */
.dan-questions .ctx { font-size: 15px; color: var(--d-body); line-height: 1.6; background: var(--d-cream2);
  border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; }
.dan-questions .rec { font-size: 15px; color: var(--d-green-dark); line-height: 1.6; background: var(--d-mint);
  border-radius: 12px; padding: 12px 14px; }
.dan-questions .rec b { font-weight: 600; }
.dan-questions .opts { display: flex; flex-direction: column; gap: 6px; }
.dan-questions .opt { font-family: inherit; font-size: 15px; text-align: start; color: var(--d-body); background: #fff;
  border: 1.5px solid var(--d-line); border-radius: 12px; padding: 11px 14px; cursor: pointer; }
.dan-questions .opt:hover { border-color: var(--d-green); background: #F4F8F5; color: var(--d-green-dark); }

.dan-questions .qform { display: flex; flex-direction: column; gap: 12px; }
/* שדה התשובה — `kit/form.js::field` (תווית נסתרת, `.form-input`) בעיצוב ה-textarea של דן. */
.dan-questions .form-field { margin: 0; display: block; }
.dan-questions .form-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.dan-questions textarea.form-input { font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--d-line);
  border-radius: 12px; background: var(--d-cream2); color: var(--d-text); width: 100%; min-height: 76px; resize: vertical; }
.dan-questions textarea.form-input:focus { border-color: var(--d-green); background: #fff; }
.dan-questions textarea.form-input[aria-invalid="true"] { border-color: var(--d-orange-ink); }
/* `.err` של דן — שגיאת הטופס (`p.alert` של kit) ושגיאת השדה (`.kit-field__error`), בכתום-רך. */
.dan-questions .alert, .dan-questions .kit-field__error { display: block; font-size: 14px; font-weight: 400; color: var(--d-orange-ink);
  background: var(--d-orange-soft); border: 0; border-radius: 10px; padding: 10px 12px; margin: 0; }
.dan-questions .kit-field__error { margin-top: 8px; }
.dan-questions .qacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dan-questions .qbtn { font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--d-green);
  border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; }
.dan-questions .qbtn:hover { background: var(--d-green-dark); }
.dan-questions .qbtn:disabled { opacity: .55; cursor: default; }
.dan-questions .mini { font-family: inherit; font-size: 13.5px; color: var(--d-muted); background: none; border: 0;
  cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.dan-questions .mini:hover { background: #F4F1E7; color: var(--d-orange-ink); }

.dan-questions .ans { font-size: 15.5px; color: var(--d-body); line-height: 1.6; background: var(--d-mint);
  border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; }
.dan-questions .ans .when { display: block; font-size: 12.5px; color: var(--d-faint); margin-top: 6px; white-space: normal; }
.dan-questions .state { background: #fff; border-radius: 18px; padding: 40px 24px; text-align: center;
  box-shadow: var(--d-shadow); color: var(--d-muted); font-size: 16px; line-height: 1.6; }
.dan-questions .state b { display: block; color: var(--d-ink); font-size: 18px; font-weight: 600; margin-bottom: 6px; }

@container dan-questions (max-width: 520px) {
  .dan-questions .q { padding: 18px 16px; }
  .dan-questions .who { margin-inline-start: 0; flex-basis: 100%; }
  .dan-questions .tabs { width: 100%; justify-content: space-between; }
}

/* ═══════════════════════════ /emergency — חירום (ציבורי) ═══════════════════════════ */

.dan-emergency { --d-red: #C0392B; --d-red-ink: #8E2A20; --d-red-soft: #FDECEA; --d-line2: #E7E3D6;   /* ⑤ — הצבעים של emergency.html */
  container: dan-emergency / inline-size; line-height: normal; }
.dan-emergency a { color: var(--d-green); text-decoration: none; }

.dan-emergency .wrap { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.dan-emergency .ecard { background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,42,32,.04), 0 26px 64px rgba(16,42,32,.10); }

.dan-emergency .head { background: var(--d-red-soft); padding: 20px 24px; border-bottom: 1px solid #F5D6D1; }
.dan-emergency .head .t { font-size: 25px; font-weight: 600; color: var(--d-red-ink); letter-spacing: -.02em; margin: 0; line-height: normal; }
/* ③ — `opacity:.85` של דן ⟶ הצבע המעורבב. */
.dan-emergency .head .s { font-size: 14.5px; color: #9F473E; margin-top: 3px; }

/* ההתרעה הפעילה — של עגור (בדן הבאנר של המעטפת): בלוק אדום מלא מתחת לראש, כדי שלא יפספסו אותה. */
.dan-emergency .eact { background: var(--d-red); color: #fff; padding: 16px 24px; display: flex; flex-direction: column; gap: 6px; }
.dan-emergency .eact strong { font-size: 18px; font-weight: 600; }
.dan-emergency .eact p { font-size: 15.5px; line-height: 1.55; }
.dan-emergency .enone { padding: 12px 24px; background: var(--d-cream2); border-bottom: 1px solid var(--d-line2);
  font-size: 14.5px; color: var(--d-muted); }

/* ⚠️ יעדי מגע גדולים ומספרים גדולים — הדף הזה נפתח ביד רועדת. ② שלוש עמודות ולא ארבע; `minmax(0,1fr)` + `nowrap`: "100" אינו נשבר ב-320. */
.dan-emergency .calls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 20px;
  border-bottom: 1px solid var(--d-line2); }
/* ⭐ סבב תיקון — "☎ הקיבוץ" (הטלפון הראשון שהדייר פרסם) כפתור רביעי, כמו `repeat(4,1fr)` של דן; בלי טלפון שפורסם — שלוש עמודות. */
.dan-emergency .calls--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dan-emergency .call { background: var(--d-cream2); border-radius: 14px; padding: 12px 4px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; }
.dan-emergency .call b { font-size: 19px; font-weight: 600; color: var(--d-ink); line-height: 1; white-space: nowrap; }
.dan-emergency .call span { font-size: 12px; color: var(--d-muted); }

.dan-emergency .sec { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.dan-emergency .ecard > .sec { border-top: 1px solid var(--d-line2); }
.dan-emergency .lbl { font-size: 12.5px; letter-spacing: .1em; color: var(--d-faint); }

.dan-emergency .erow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--d-line2); }
.dan-emergency .erow:last-child { border-bottom: 0; }
.dan-emergency .erow > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.dan-emergency .erow .n { font-size: 15.5px; color: var(--d-text); }
.dan-emergency .erow .w { font-size: 13px; color: var(--d-faint); margin-top: 2px; }
.dan-emergency .erow .d { font-size: 13.5px; color: var(--d-muted); white-space: nowrap; }
/* שורת טלפון = קישור חיוג: הכותרת בצבע הטקסט, המספר ירוק ובולט — היעד הוא השורה כולה. */
.dan-emergency a.erow { color: inherit; }
.dan-emergency a.erow .d { color: var(--d-green); font-weight: 500; }
.dan-emergency a.erow:hover .n { text-decoration: underline; text-underline-offset: 3px; }
.dan-emergency .etag { font-size: 11.5px; background: var(--d-cream2); color: var(--d-muted); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; }
.dan-emergency .etag.off { background: var(--d-red-soft); color: var(--d-red-ink); }

/* ⚠️ `eempty` ולא `empty` של דן — `.empty` של המעטפת (components.css) הוא `text-align:center; padding:32px 16px`. */
.dan-emergency .eempty { padding: 22px 20px; font-size: 15px; color: var(--d-muted); line-height: 1.6; }
.dan-emergency .eempty b { display: block; color: var(--d-ink); font-weight: 600; }
.dan-emergency .sec > .eempty { padding: 4px 0 2px; }

/* "איך תדעו" — המידע החשוב ביותר במסך. התיבה היא ה-`.near` של דן (מסגרת אדומה 2px · 16px), והכשל — אותה תיבה. */
.dan-emergency .ehow { font-size: 14.5px; color: var(--d-muted); line-height: 1.6; }
.dan-emergency .ewarn, .dan-emergency .eerr { border: 2px solid var(--d-red); border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; }
.dan-emergency .ewarn strong, .dan-emergency .eerr strong { font-size: 17px; font-weight: 600; color: var(--d-ink); }
.dan-emergency .ewarn p, .dan-emergency .eerr p { font-size: 14.5px; color: var(--d-body); line-height: 1.6; }

.dan-emergency .foot { text-align: center; font-size: 13px; color: var(--d-faint); padding-bottom: 8px; margin-top: 16px; }
/* ⚠️ `margin-top:16px` — ב-emergency.html ה-`.foot` בתוך אותו `.wrap` של הכרטיס (`gap:16px`); `paintPublic` מצייר אותו ב-`.wrap` נפרד (אחי של הכרטיס), ובלי השוליים הוא נצמד לכרטיס (נמדד 0px).
   במעטפת אין `.foot` במסך כלל, ולכן השוליים משפיעים על התחתית העצמאית בלבד. */
/* ⚠️ axe `link-in-text-block` — הקישורים כאן יושבים בתוך שורת טקסט (" · "), וירוק מול אפור-מוכהה אינם נבדלים ב-3:1 — קו תחתון ולא צבע בלבד (בדן אין; שם הכשל לא נמדד). */
.dan-emergency .foot a { text-decoration: underline; text-underline-offset: 3px; }

@container dan-emergency (max-width: 420px) {
  .dan-emergency .head { padding: 18px 16px; }
  .dan-emergency .eact { padding: 14px 16px; }
  .dan-emergency .enone { padding: 12px 16px; }
  .dan-emergency .calls { padding: 14px 12px; }
  .dan-emergency .sec { padding: 14px 14px 18px; }
}

/* ═══════════════════════════ /legal — תנאים · פרטיות · נגישות ═══════════════════════════ */

.dan-legal { --d-line2: #E7E3D6; container: dan-legal / inline-size; line-height: 1.75; font-size: 16.5px; }
.dan-legal a { color: var(--d-green); text-decoration: none; }
.dan-legal a:hover { color: var(--d-orange-ink); }
.dan-legal .wrap { max-width: 780px; margin: 0 auto; padding-bottom: 60px; }

/* כרטיס הפתיחה — `legal.html`: קשת ונוף, כותרת, ושורות `.doc`. ⚠️ 560 וממורכז (ה-`.wrap` של `legal.html`), ועמוד המסמכים שמתחתיו 780 (`legal-privacy.html`) — כרטיס ברוחב המסמך נראה שטוח. */
.dan-legal .lcard { background: #fff; border-radius: clamp(20px, 3vh, 28px); overflow: hidden; max-width: 560px; margin-inline: auto;
  box-shadow: 0 2px 4px rgba(16,42,32,.04), 0 26px 64px rgba(16,42,32,.10); }
.dan-legal .scene { height: clamp(110px, 16vh, 140px); 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-legal .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dan-legal .arch { position: relative; width: 96px; height: 96px; background: #fff; border-radius: 48px 48px 0 0;
  display: grid; place-items: center; padding-top: 16px; }
.dan-legal .arch svg { position: static; width: 46px; height: 46px; }
.dan-legal .lbody { padding: 24px 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.dan-legal .head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.dan-legal .title { font-size: clamp(23px, 3.4vh, 28px); font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0; line-height: normal; }
.dan-legal .sub { font-size: 16px; color: var(--d-muted); line-height: 1.55; }
.dan-legal .docs { display: flex; flex-direction: column; gap: 12px; }
.dan-legal .doc { border: 1.5px solid var(--d-line2); border-radius: 16px; padding: 15px 16px; background: var(--d-cream2);
  display: flex; gap: 12px; align-items: flex-start; color: inherit; transition: border-color .15s, background .15s; }
.dan-legal .doc:hover { border-color: #CFE0D6; background: #fff; color: inherit; }
.dan-legal .doc .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dan-legal .doc .name { font-size: 16.5px; font-weight: 600; color: var(--d-ink); }
.dan-legal .doc .ver { font-size: 13.5px; color: var(--d-faint); line-height: 1.5; }
.dan-legal .doc .open { font-size: 14.5px; font-weight: 500; color: var(--d-green); }
/* התחתית של הכרטיס — ה-`.foot` של `legal.html`: ממורכז, בלי קו ובלי שוליים עליונים (מרווח השורות — ה-`gap:18px` של ה-`.wrap` שלו, כאן margin). ⚠️ axe `link-in-text-block` — קו תחתון. */
.dan-legal .lfoot { max-width: 560px; margin: 18px auto 0; text-align: center; font-size: 14.5px; color: var(--d-faint); line-height: 1.6; }
.dan-legal .lfoot a, .dan-legal .foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ── שער האישור של `legal.html` — `legal-parts.js` (gateHTML · gateStateHTML · syncGate). ② `.btn`→`.gbtn` · `.msg.err`→`.gmsg` · `.state`→`.gstate`. ── */
.dan-legal label.doc { cursor: pointer; }
.dan-legal .doc.on { border-color: var(--d-green); background: #fff; box-shadow: 0 0 0 4px rgba(14,122,85,.08); }
.dan-legal .doc input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--d-green); flex: 0 0 auto; cursor: pointer; }
.dan-legal .gbtn { font-family: inherit; font-size: 18px; font-weight: 600; color: #fff; background: var(--d-green); border: 0; border-radius: 999px;
  padding: 16px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.24); width: 100%; }
.dan-legal .gbtn:hover { background: var(--d-green-dark); }
.dan-legal .gbtn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.dan-legal .gmsg { font-size: 15.5px; border-radius: 14px; padding: 14px 16px; line-height: 1.55; background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-legal .gstate { padding: 40px 30px; text-align: center; color: var(--d-muted); font-size: 16px; line-height: 1.65; }
.dan-legal .gstate b { display: block; color: var(--d-ink); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.dan-legal .gstate .links { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; }

/* עמוד המסמך — `legal-privacy.html` / `legal-terms.html`. */
.dan-legal .lsec, .dan-legal .lcard { scroll-margin-top: 72px; }   /* גם הכרטיס: "חזרה לתחילת העמוד" (`#lg-top`) לא מצמיד אותו לקצה החלון */
.dan-legal h2 { font-size: clamp(19px, 2.8vw, 22px); color: var(--d-ink); letter-spacing: normal; margin: 38px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--d-line2); line-height: 1.75; }
.dan-legal h3 { font-size: 17.5px; color: var(--d-ink); letter-spacing: normal; margin: 26px 0 8px; line-height: 1.75; }
.dan-legal h4 { font-size: 16.5px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; margin: 0; line-height: 1.75; }
.dan-legal p { margin: 12px 0; }
.dan-legal ul, .dan-legal ol { margin: 12px 0; padding-inline-start: 22px; }
.dan-legal li { margin: 6px 0; }
.dan-legal .lparts li { margin: 14px 0; }
.dan-legal .lparts li p { margin: 2px 0 0; }
.dan-legal .lnote { font-size: 15px; color: var(--d-muted); }
.dan-legal blockquote { margin: 16px 0; padding: 14px 16px; background: var(--d-orange-soft); color: var(--d-orange-ink);
  border-radius: 12px; font-size: 15.5px; }
.dan-legal blockquote strong { color: var(--d-orange-ink); }
.dan-legal blockquote ul { margin: 8px 0 0; }
/* הקופסה הכתומה של "טיוטה — אינה בתוקף". */
.dan-legal .draft { background: #FDEEE3; border: 1.5px solid #E9C4A8; border-radius: 14px; padding: 15px 17px;
  margin: 18px 0 4px; font-size: 15.5px; color: var(--d-orange-ink); line-height: 1.65; }
.dan-legal .draft b { display: block; font-size: 16.5px; margin-bottom: 4px; }
/* ⚠️ overflow-x על המעטפת ולא על ה-table: טבלה עם min-width גולשת מהעמוד עצמו אחרת (הערת דן). */
.dan-legal .tw { overflow-x: auto; margin: 16px 0; border: 1px solid var(--d-line2); border-radius: 12px; background: #fff; }
.dan-legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
.dan-legal th, .dan-legal td { padding: 10px 13px; text-align: start; border-bottom: 1px solid var(--d-line2); vertical-align: top; }
.dan-legal th { background: var(--d-cream2); font-weight: 600; color: var(--d-ink); white-space: nowrap; }
.dan-legal tr:last-child td { border-bottom: 0; }
.dan-legal .foot { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--d-line2); font-size: 14.5px; color: var(--d-faint); }

@container dan-legal (max-width: 560px) {
  .dan-legal .lbody { padding: 20px 18px 26px; }
  .dan-legal .doc { padding: 13px 14px; }
}

/* ═══════════════════════════ 404 — לא נמצא ═══════════════════════════ */

.dan-not-found { --d-nbody: #55625B; container: dan-not-found / inline-size; line-height: normal;   /* ⑤ — `--body` של 404.html */
  display: grid; place-items: center; padding: clamp(16px, 8vh, 72px) 0;
  /* ⭐ סבב תיקון — `body{min-height:100vh;display:grid;place-items:center}` של 404.html: בלי גובה מינימלי `place-items` אין לו מה למרכז והכרטיס צף בראש האזור. */
  min-height: min(70vh, 640px); }
.dan-not-found .nfcard { max-width: 420px; width: 100%; text-align: center; }
.dan-not-found h1 { font-size: 56px; margin: 0; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: normal; }
/* מסך מתוכנן — אותו כרטיס, בלי "404" (זה היה שקר): שם המסך בגודל כותרת. */
.dan-not-found .nfcard.planned h1 { font-size: 34px; line-height: 1.25; }
.dan-not-found p { color: var(--d-nbody); line-height: 1.7; margin: 12px 0 24px; }
.dan-not-found .nfurl { margin-top: -12px; font-size: 14px; color: var(--d-faint); overflow-wrap: anywhere; }
.dan-not-found a { color: var(--d-green); text-decoration: none; font-weight: 500; }
.dan-not-found a:hover { text-decoration: underline; }
.dan-not-found .nfhome { display: inline-block; padding: 4px 2px; }
.dan-not-found .nfnav { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--d-line); }
.dan-not-found .nfnav h2 { font-size: 14px; font-weight: 500; color: var(--d-faint); margin: 0 0 10px; letter-spacing: normal; }
.dan-not-found .nfnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }

@container dan-not-found (max-width: 360px) {
  .dan-not-found h1 { font-size: 46px; }
  .dan-not-found .nfcard.planned h1 { font-size: 28px; }
}