/* ============================================================
   TikTax — Questionnaire page skin
   Re-skins the ported "executable spec" questionnaire onto the
   TikTax design language (navy #001f3f, lime #32cd32, glass, Heebo).
   Tokens come from style.css :root. Scoped where possible so the
   rest of the site is untouched.
   ============================================================ */

/* ---- Page shell ---- */
/* The site header is position:fixed (see style.css). Offset the page so the
   progress rail and hero are not hidden behind it. */
body { background: var(--color-bg); padding-top: 72px; }

.tq-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 140px; /* bottom room for the sticky footer */
}

/* ---- Progress rail (sticky under the header) ---- */
.tq-progress {
  position: sticky;
  top: 72px;
  z-index: 900;
  background: rgba(244, 244, 244, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px 12px;
}
.tq-progress-inner { max-width: 900px; margin: 0 auto; }
.tq-progress-label {
  font-size: 0.95rem; font-weight: 800; color: var(--color-navy);
  margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px;
}
.tq-progress-label .tq-step-count { color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; }
/* פס פרקים (2026-07-27): לכל היותר 8 מקטעים ראשיים — פס + תווית פרק קצרה מתחתיו.
   עמודי-הפירוט (הכנסות נוספות / הטבות מס) מוצגים כפסים קטנים בשורת חלקי-הפרק (.tq-substeps). */
.tq-dots { display: flex; gap: 6px; }
.tq-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tq-seg-bar { height: 7px; border-radius: 7px; background: var(--color-border); transition: background 0.25s; }
/* done = כל פרק שכבר בוקר — לפני או אחרי הנוכחי: הצבע שנקבע לשלב שבוצע אינו משתנה
   כשקופצים אחורה (בקשת המוצר 2026-07-27; מצב ה-seen התכול בוטל). */
.tq-seg.done .tq-seg-bar { background: var(--color-primary); }
/* "אתה כאן" מודגש (2026-07-27, בקשת המוצר): הפס הנוכחי עבה מהאחרים וזוהר — שיהיה ברור
   מיד באיזה שלב נמצאים. השוליים השליליים שומרים על גובה-זרימה 7px כך שהתוויות נשארות מיושרות. */
.tq-seg.current .tq-seg-bar {
  background: linear-gradient(135deg, #32cd32 0%, #00d4ff 100%);
  height: 12px; margin: -2.5px 0; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(50, 205, 50, 0.3), 0 2px 10px rgba(0, 212, 255, 0.4);
}
.tq-seg-lbl {
  font-size: 0.66rem; font-weight: 700; color: var(--color-text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.25s;
}
.tq-seg.done .tq-seg-lbl { color: var(--color-navy); opacity: 0.7; }
.tq-seg.current .tq-seg-lbl { color: var(--color-navy); font-weight: 800; font-size: 0.72rem; }
/* במסכים צרים התוויות נחתכות — הפס לבדו מספיק (הכותרת שמעל אומרת היכן נמצאים) */
@media (max-width: 560px) { .tq-seg-lbl { display: none; } }

/* עמודי הפרק הפעיל (2026-07-27): פסים קטנים ישירות מתחת למקטע הפרק עצמו — בלי מגש/תיבה
   ובלי מספור "חלק X מתוך Y"; המיקום בפרק מוצג ויזואלית בלבד. */
.tq-seg-pips { display: flex; justify-content: center; align-items: center; gap: 3px; flex-wrap: wrap; padding: 0 2px; }
.tq-subpip { flex: 1 1 6px; min-width: 4px; max-width: 18px; height: 3px; border-radius: 3px; background: var(--color-border); transition: background 0.25s, transform 0.15s; }
.tq-subpip.done { background: var(--color-primary); }
/* הפס הקטן הנוכחי מודגש גם הוא — עבה מאחיו וזוהר ("אתה כאן" בתוך הפרק). */
.tq-subpip.current {
  background: linear-gradient(135deg, #32cd32 0%, #00d4ff 100%);
  height: 7px; margin: -2px 0; max-width: 24px; border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(50, 205, 50, 0.3);
}

/* ניווט בלחיצה (2026-07-27): פרק/עמוד שכבר בוקר לחיץ — קפיצה ישירה אחורה או קדימה-אל-בוקר
   (goTo ב-questionnaire.js). הלחיצה והריחוף על הפס בלבד — לא על תווית הפרק, ובלי קו תחתון
   (בקשת המוצר 2026-07-27). .clickable מוצמד ב-sync רק לפרק שבוקר. */
.tq-seg.clickable .tq-seg-bar { cursor: pointer; }
.tq-seg.clickable .tq-seg-bar:hover { filter: brightness(1.12); }
.tq-subpip.done { cursor: pointer; }
.tq-subpip.done:hover { transform: scaleY(1.8); }

/* ---- "נזכיר לך בסוף" (2026-07-27) — שלב שנדחה להשלמה בסיום (data-defer) ----
   פס-העמוד נצבע ענבר (גובר על done/seen — הכללים כאן אחרונים), ומקטע הפרק שמכיל שלב כזה
   נצבע ענבר גם הוא — אלא כשהוא הפרק הפעיל, שנשאר בגרדיאנט "אתה כאן" (:not(.current)). */
.tq-subpip.defer { background: #f0a000; cursor: pointer; }
.tq-subpip.defer:hover { transform: scaleY(1.8); }
.tq-seg.hasdefer:not(.current) .tq-seg-bar { background: linear-gradient(135deg, #ffc14d 0%, #f0a000 100%); }

/* ---- מד-שנים קבוע מתחת לנקודות השלבים (2026-07-25) ----
   ✓ ירוק = נבחנת עם TikTax · ✕ כתום = לייעוץ פרטני · עמום = לא סומנה לבדיקה.
   מאוכלס חי ע"י sync() ב-questionnaire.js; תיבת ההערה (.tq-yearnote) יושבת לצד השבבים. */
/* min-height = גובה .tq-yearnote החד-שורתית (28px, מול גלולות של 26px) — הופעת ההערה עם בחירת
   שנה לא מגביהה את הפס, וכל התוכן שמתחתיו (כולל שבבי השנים ב-s0) נשאר במקומו. */
.tq-yearbar { margin-top: 9px; display: flex; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; min-height: 28px; }
.tq-years { display: flex; gap: 6px; flex-wrap: wrap; }
.tq-year {
  display: inline-flex; align-items: center; gap: 5px; direction: ltr;
  font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 20px; padding: 2px 10px;
  background: rgba(255, 255, 255, 0.65);
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.tq-year.dim { opacity: 0.45; }
.tq-year .yi { font-size: 0.72rem; font-weight: 900; line-height: 1; }
.tq-year.on { color: var(--color-navy); border-color: rgba(50, 205, 50, 0.5); background: rgba(50, 205, 50, 0.1); }
.tq-year.on .yi { color: #1f9d3a; }
/* שנה שלא תיבחן — אדום, באותה פלטה של תיבות הטקסט האדומות (.block-banner) לבקשת המוצר 2026-07-25
   (קודם היה כתום/ענבר; האדום מסמן חד-משמעית "לא נבחנת"). */
.tq-year.off { color: #b02a37; border-color: rgba(176, 42, 55, 0.5); background: #fdecee; }
.tq-year.off .yi { color: #b02a37; }
.tq-yearnote {
  flex: 1 1 240px; min-width: 200px;
  font-size: 0.74rem; font-weight: 600; line-height: 1.5; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 4px 10px; background: rgba(255, 255, 255, 0.55);
}
.tq-yearnote .yn-ok b { color: #1f9d3a; font-weight: 800; }
.tq-yearnote .yn-off b { color: #b02a37; font-weight: 800; }

/* ---- Step cards ---- */
section.step {
  background: var(--color-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  margin-bottom: 20px;
  /* overflow גלוי (הוחלף מ-hidden 2026-07-23): בועות הריחוף (data-tip) נפתחות מעל/מתחת לשאלה
     וחייבות לחרוג מגבול הכרטיס בלי להיחתך; עיגול פינות הכותרת נשמר ב-.step-head עצמו. */
  overflow: visible;
  box-shadow: 0 10px 30px rgba(0, 31, 63, 0.04);
}
/* One step at a time — the JS navigator sets .tq-current on the active section */
#form-root .step { display: none; }
#form-root .step.tq-current { display: block; }
.hidden { display: none !important; }        /* preserved: source visibility logic depends on this */
.tq-suppressed { display: none !important; } /* dev-only sections removed from the flow */

.step-head {
  /* flex-wrap (2026-07-27): לחצן "נזכיר לך בסוף" יושב בקצה השמאלי — במסך צר הוא יורד לשורה משלו */
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(0, 31, 63, 0.04), rgba(0, 118, 255, 0.04));
  border-bottom: 1px solid var(--color-border);
  border-radius: 21px 21px 0 0;   /* הכרטיס כבר אינו חותך (overflow:visible) — הפינות מעוגלות כאן */
}
.step-head .num {
  /* גלולה ולא עיגול קשיח (2026-07-27): המספור ההיררכי ("4.12") רחב מספרה בודדת */
  flex: none; min-width: 34px; height: 34px; border-radius: 17px; padding: 0 9px;
  box-sizing: border-box; direction: ltr;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; color: #fff;
  background: linear-gradient(135deg, #001f3f 0%, #0076ff 100%);
}
.step-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--color-navy); }
.step-body { padding: 20px 24px; }

/* ---- לחצן "נזכיר לך בסוף" (2026-07-27) — כחול, בקצה השמאלי של כותרת עמודי-הפירוט
   (margin-inline-start:auto ב-RTL). מוזרק מ-questionnaire.js לעמודי ההכנסות הנוספות
   וההטבות בלבד; במצב מסומן (.on) הוא מתחלף לענבר — כמו הפס שנצבע בפס ההתקדמות. ---- */
.tq-defer-btn {
  margin-inline-start: auto; flex: none; max-width: 100%;
  border: 1px solid rgba(0, 118, 255, 0.4);
  background: rgba(0, 118, 255, 0.08);
  color: #0076ff;
  font-family: inherit; font-weight: 700; font-size: 0.78rem;
  padding: 6px 12px; border-radius: 18px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tq-defer-btn:hover { background: rgba(0, 118, 255, 0.16); }
.tq-defer-btn.on {
  background: #fff7e6; border-color: rgba(240, 160, 0, 0.55); color: #9a6200;
}
.tq-defer-btn.on:hover { background: #ffefd0; }

/* תיבת התזכורת בראש עמוד האסמכתאות — רשימת השלבים שסומנו לחזרה: שם השלב = קפיצה חזרה,
   ה-✕ שלצדו מבטל את הסימון ("אין לי מה להוסיף"). השליחה חסומה כל עוד התיבה אינה ריקה. */
.tq-defer-remind {
  margin: 0 0 14px; padding: 12px 14px;
  background: rgba(0, 118, 255, 0.06);
  border: 1px solid rgba(0, 118, 255, 0.25);
  border-inline-start: 4px solid #0076ff;
  border-radius: 10px;
}
.tq-defer-remind-title { font-weight: 800; color: var(--color-navy); font-size: 0.95rem; }
.tq-defer-remind-sub { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin: 4px 0 10px; }
.tq-defer-remind-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-defer-chipwrap {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid rgba(0, 118, 255, 0.4); border-radius: 16px; background: #fff;
}
.tq-defer-chip, .tq-defer-chip-x {
  border: none; background: none; font-family: inherit; font-weight: 700; cursor: pointer;
}
.tq-defer-chip { color: #0076ff; font-size: 0.82rem; padding: 6px 12px; }
.tq-defer-chip:hover { background: rgba(0, 118, 255, 0.08); }
.tq-defer-chip-x { color: #b02a37; font-size: 0.8rem; padding: 6px 10px; border-inline-start: 1px solid rgba(0, 118, 255, 0.25); }
.tq-defer-chip-x:hover { background: #fdecee; }

/* ---- Questions ---- */
.q {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.q label.main-label { display: block; font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 8px; }
/* כותרת-מקטע שחורה מודגשת בראש מסגרת שאלה ("שכר הדירה" / "מס ששולם" — שכירות חו"ל; בקשת המוצר
   2026-07-28): מזהה ויזואלית במה עוסקת המסגרת. השאלות שתחתיה יורדות לגודל תווית רגילה (.sub-q). */
.q .sec-title { font-weight: 800; color: #111; font-size: 1.05rem; margin-bottom: 8px; }
.q label.main-label.sub-q { font-size: 1rem; font-weight: 400; }
/* Marking/selection helper text — smaller & lighter than the question, so it reads
   as a hint. Canonical style for EVERY "about the marking" note across the questionnaire
   (pre-selected years, children auto-fill, etc.). Unscoped so it can be reused anywhere. */
.preselect-note { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); }
/* הערת סימון-מראש שממוקמת מיד אחרי תת-כותרת (.inc-group) — צמודה לכותרת, עם אוויר לפני כרטיס
   השאלה. מוזחת פנימה 19px (= border 1px + padding 18px של .q) כך שתחילת הטקסט מתיישרת עם טקסט
   השאלה שבכרטיס מתחת ולצד תחילת האימוג'י שבתג הכותרת (בקשת המוצר 2026-08-04). הסלקטור השני —
   אותה הערה כשהערת-מפתח נסתרת (.mod-note) חוצצת בינה לבין הכותרת (קבוצת החישוב האוטומטי במרכז ההטבות). */
.inc-group + .preselect-note, .inc-group + .mod-note + .preselect-note { margin: -4px 0 12px; padding-inline-start: 19px; }

.expl {
  background: rgba(0, 118, 255, 0.06);
  border: 1px solid rgba(0, 118, 255, 0.14);
  border-radius: 12px;
  padding: 10px 14px; margin: 8px 0;
  font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted);
}
/* קידומת ה-💡 (::before) הוסרה 2026-07-27 (בקשת המוצר): תיבות הערה = טקסט בלבד, בלי סימנים. */
.hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 6px; }

/* ---- מסגרת "נתוני..." — פתיח ממוסגר של עמוד-פירוט ----
   בעמודי מודולי ההכנסה (R · FR · SO · L · SEC · הכנסות אחרות) המסגרת הוסרה (בקשת המוצר 2026-07-24 —
   "התיבה האפורה" נמצאה חזרתית ומעייפת; המידע הקריטי עבר להערות/בועות ליד השדות עצמם, והשאר נשמר
   כהערות מתכנת בקוד). נותרה בשימוש רק בשלבי הפירוט של מרכז ההטבות (CR_DETAILS · scr_*),
   וכן mod-frame-note משמש כהודעת ריק (btlref). ההסבר בתוכה גלוי מיד, לא מאחורי מנורת 💡
   (ולכן mod-frame-note ולא .expl, ש-bubbleify מקפל). */
.mod-frame {
  border: 1.5px solid rgba(0, 31, 63, 0.22);
  border-radius: 14px;
  background: rgba(0, 31, 63, 0.025);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.mod-frame-title { font-weight: 800; font-size: 1.05rem; color: var(--color-navy); line-height: 1.5; }
.mod-frame-note { margin-top: 4px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); line-height: 1.55; }

/* ---- פתיח ידידותי גלוי מתחת לכותרת השלב — תיבת ההסבר הכחולה שפותחת כל שלב (בקשת המוצר
   2026-07-23: s1 · s1d · s1c [התוכן הדינמי s1c-sub] · s1b · s3 · s4 · scr) ----
   בניגוד ל-mod-note (הערת-מפתח, display:none) — זהו כיתוב למשתמש: מסביר מה עושים בשלב
   ומה מטרתו במילים פשוטות. */
.step-intro {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-navy);
  background: rgba(0, 118, 255, 0.06);
  border-inline-start: 3px solid var(--color-secondary);
  border-radius: 10px;
  line-height: 1.6;
}
/* התוכן של s1c-sub מוזרם ב-render — עד אז אין להציג תיבה ריקה */
.step-intro:empty { display: none; }

/* ---- כותרות-משנה שקטות לקבוצות ההכנסה בשלב "הכנסות נוספות" (s4) — מקבצות את השאלות
   לפי סוג ההכנסה (תקבולים חד-פעמיים · נכסים · השקעות · קצבאות · אחר) כדי שברור על מה נשאל.
   קו-הפרדה עדין מעל כל קבוצה, למעט הראשונה (.first). ---- */
/* כותרת קבוצת-הכנסה כתת-כותרת מובלטת (בקשת המשתמש 07/2026): "תג"/pill כחלחל (secondary) עם רקע
   כחול עדין, טקסט מודגש בגודל "ברור" וסימן קונטקסט בתחילת המחרוזת (מופיע מימין ב-RTL). כל
   תתי-הכותרות בשלב ההכנסות אחידות — אותו כחלחל ואותו גודל כמו כותרות-המשנה (.inc-subhdr). */
.inc-group {
  display: inline-block;
  margin: 26px 0 10px;
  padding: 6px 15px;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--color-secondary);
  background: rgba(0, 118, 255, 0.08);
  border-radius: 10px;
  line-height: 1.4;
}
.inc-group.first { margin-top: 6px; }
/* כותרת-משנה בתוך קבוצת הכנסה (משפחות הפריסה: הפרשים / פיצויים / קצבאות שהוונו / רווחי הון /
   משיכות). מובלטת ואטרקטיבית (בקשת המשתמש 07/2026): טקסט גדול, כחול (--color-secondary), מודגש,
   כ"תג" עם רקע כחול עדין — כדי שכל תת-קבוצה תהיה ברורה ומזמינה. */
.inc-subhdr { display: inline-block; margin: 18px 0 8px; padding: 6px 15px; font-weight: 800;
  font-size: 1.12rem; color: var(--color-secondary); background: rgba(0, 118, 255, 0.08);
  border-radius: 10px; line-height: 1.4; }

/* ---- איור "פריסה" + שורת כותרת-משנה (איור משמאל לכותרת) בבלוק התקבול החד-פעמי ----
   כל תת-קבוצה שניתנת לפריסה (הפרשים / פיצויים / קצבאות שהוונו / רווחי הון) מקבלת איור "פריסה"
   משמאל לכותרת הכחולה; משיכת התגמולים (שאינה נפרסת) מקבלת תג אפור "אינה נפרסת" במקום האיור. */
.inc-subhdr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }
.inc-subhdr-row .inc-subhdr { margin: 0; }
.spread-art { flex: 0 0 auto; width: 58px; height: auto; display: block; }
.sa-coin { fill: rgba(0, 118, 255, 0.14); stroke: var(--color-secondary); stroke-width: 1.6; }
.sa-shekel { fill: var(--color-secondary); font-size: 11px; font-weight: 800; }
.sa-arrow path { stroke: var(--color-secondary); stroke-width: 1.5; }
.sa-head path { fill: var(--color-secondary); }
.sa-year rect { fill: rgba(0, 118, 255, 0.10); stroke: var(--color-secondary); stroke-width: 1.2; }
.no-spread-tag { flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted);
  background: rgba(0, 31, 63, 0.06); border: 1px solid rgba(0, 31, 63, 0.12); border-radius: 8px; padding: 3px 10px; }

/* איור "פריסה" כטריגר-מידע ליד כל תת-כותרת שניתנת לפריסה: האיור (58px, גודל בסיס) נושא תג "!"
   כחול קטן, וההסבר המלא על התקבולים והפריסה נפתח בבועת ריחוף/פוקוס (במקום קיר-טקסט קבוע — הפחתת
   עומס חזותי). מנגנון הטולטיפ כמו .info-bubble (data-tip + ::after); ממורכז מעל האיור כדי להישאר
   בתוך גבולות ה-section (overflow:hidden) גם כשהאיור יושב באמצע שורת תת-הכותרת. */
.spread-art-info { position: relative; display: inline-flex; align-items: flex-start; cursor: help; flex: 0 0 auto; }
/* תג ה-"!" הכחול הקטן על פינת האיור (הקצה המוֹבִיל ב-RTL) — רמז ויזואלי שיש כאן הסבר */
.spread-art-info .spread-art-badge { position: absolute; top: -6px; inset-inline-end: -6px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--color-secondary); color: #fff;
  font-size: 0.7rem; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 31, 63, 0.28); pointer-events: none; }
/* הבועה ממורכזת מעל האיור ומוזזת ב---tipdx (כמו .info-bubble) כדי להישאר בתוך המסך */
.spread-art-info::after { content: attr(data-tip); position: absolute; bottom: 130%; left: 50%;
  transform: translateX(calc(-50% + var(--tipdx, 0px)));
  z-index: 30; width: max-content; max-width: min(430px, 88vw); background: var(--color-navy); color: #fff;
  padding: 11px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 500; line-height: 1.65;
  white-space: pre-line; text-align: right; opacity: 0; visibility: hidden; transition: opacity .15s;
  box-shadow: 0 8px 26px rgba(0, 31, 63, 0.28); pointer-events: none; }
.spread-art-info:hover::after, .spread-art-info:focus::after { opacity: 1; visibility: visible; }
.spread-art-info.tip-below::after { bottom: auto; top: 130%; }
/* איור הפריסה בתוך הערת-פריסה (נאדג' דמי-לידה/מילואים בעמוד המל"ל s7btl): מוקטן, צמוד לכותרת.
   אותו מראה גם בתוך באנר חסימה — הערת "שווה לדעת" של פריסת רווח-הון (s7eq) מוטמעת בתוך הבאנר
   האדום כשהשנה חסומה (בקשת המוצר 2026-08-01). */
.note-finger .spread-art-info, .block-banner .spread-art-info { margin-inline-start: 10px; vertical-align: middle; }
.note-finger .spread-art, .block-banner .spread-art { width: 46px; }

/* ---- Securities entry gate (module SEC) — restyled 07/2026 as a standard ☝️ info
   note (.note-finger): intro line + numbered conditions 1-4, text size/color
   inherited from the note. The actual confirmation happens per-year (gate_confirm@Y). */
.sec-gate-list {
  margin: 8px 0 0; padding-inline-start: 1.4em;
  line-height: 1.7; list-style: decimal;
}
.sec-gate-list li { margin: 2px 0; }

.autonote {
  font-size: 0.85rem; font-weight: 600; color: #1e7e34;
  background: #e6f4ea; border: 1px solid rgba(30, 126, 52, 0.4);
  border-radius: 10px; padding: 8px 12px; margin: 8px 0;
}
.bignote {
  font-size: 1rem; font-weight: 800; color: var(--color-navy);
  background: rgba(50, 205, 50, 0.1); border: 2px solid var(--color-primary);
  border-radius: 12px; padding: 10px 14px; margin-top: 10px; text-align: center;
}

/* ---- Document prompts (kept, re-skinned) ---- */
/* אטב אסמכתא: ידיעה מראש שבהגשת הדוח באתר רשות המסים יידרש צירוף המסמך. הטקסט בתיבה הוא שם
   המסמך בלבד, תלוי-הקשר (בקשת המוצר 2026-07-24). מ-2026-07-26 התיבות .doc-req/.doc-ev אינן
   נפתחות עוד בשאלון (clipify מסתיר אותן לתמיד) — הן מקור-האמת לשם המסמך עבור בועת הריחוף של
   האטב (clipTip ב-questionnaire.html); העיצוב כאן נשמר למתכנת ולתצוגות עתידיות. */
.doc-req {
  background: #e8f6ee; border: 1px solid rgba(30, 126, 52, 0.5); color: #14532d;
  border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 0.85rem; font-weight: 600;
}
.doc-req::before, .doc-ev::before { content: "📎 לצרף בהגשת הדוח: "; }
.doc-ev {
  background: #fdf6e8; border: 1px solid rgba(200, 138, 45, 0.5); color: #7a5410;
  border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 0.85rem;
}
/* תיבת "העלאה עכשיו" (טופסי 106 — docUp): הוראת העלאה בשאלון עצמו, גלויה תמיד ואינה נאטבת. */
.doc-upload {
  background: #e8f6ee; border: 1px solid rgba(30, 126, 52, 0.5); color: #14532d;
  border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 0.85rem; font-weight: 600;
}
.doc-upload::before { content: "📤 "; }

/* ---- Inputs ---- */
input[type=number], input[type=date], select, input[type=text] {
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 1rem; font-family: var(--font-main);
  min-width: 130px; background: #fff; color: var(--color-navy);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type=number] { direction: ltr; text-align: left; }
input:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
input[type=file] { font-size: 0.85rem; color: var(--color-text-muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- Checkboxes ---- */
/* צ'קבוקס עם תווית: פריסת בלוק (לא flex!) — הטקסט זורם כשורת מלל רגילה גם כשהוא מפוצל
   ל-span-ים (הטיית זכר/נקבה), במקום להתפרק לאיברי flex עם רווחים. הצ'קבוקס מוצמד לימין. */
.chk { display: block; position: relative; padding-right: 28px; font-weight: 600; color: var(--color-navy); cursor: pointer; margin: 4px 0; line-height: 1.5; }
.chk input { position: absolute; right: 0; top: 3px; width: 18px; height: 18px; accent-color: var(--color-primary); }
/* צ'קבוקס-עובדה: הסימון הראשי של שאלה המנוסחת כעובדה — בולט כמו כותרת שאלה (main-label) */
.chk.fact, .q > label.chk { font-weight: 700; font-size: 1.05rem; }

/* ---- Radio pills ---- */
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label {
  border: 1.5px solid var(--color-border); border-radius: 30px;
  padding: 8px 18px; cursor: pointer; background: #fff; color: var(--color-navy);
  font-weight: 600; transition: all 0.2s;
}
.radios label:hover { border-color: var(--color-primary); }
.radios input { margin-inline-end: 6px; accent-color: var(--color-primary); }
.radios label:has(input:checked) { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.radios label.opt-disabled { opacity: 0.4; cursor: not-allowed; border-style: dashed; text-decoration: line-through; }
/* גלולה נעולה זמנית (תלות בשאלה קודמת — למשל spsepwant עד בחירת בן הזוג הרשום): מעומעמת,
   בלי קו-חוצה ובלי מסגרת מקווקוות — הנעילה תפוג, האפשרות אינה פסולה */
.radios label.opt-locked { opacity: 0.45; cursor: not-allowed; }
.radios label.opt-locked:hover { border-color: var(--color-border); }

/* ---- אפשרות-בחירה מודרכת: כל אפשרות ולצדה השמאלי (בסוף ה-pill) בועת "!" ירוקה עם ההסבר
       "סמן אפשרות זו אם…" בטולטיפ (info-bubble) — לא כשורה מלאה מתחת ---- */
.opt-guided { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.opt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* וריאנט אופקי — האפשרויות (ובועת ה-"!" שלצד כל אחת) בשורה אחת זו לצד זו, נגללות כמכלול במסך צר;
   בתוך .qsel (השאלה באותה שורה) אין צורך במרווח העליון (למשל Q_TYPE במודול השכירות) */
.opt-guided.opt-inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qsel > .opt-guided.opt-inline { margin-top: 0; }
/* שאלת-משנה בתוך מסגרת קיימת (למשל "קצבה חודשית" בתוך מסגרת "בסיס הזכאות") — מופרדת בקו עדין מלמעלה */
.dis-inframe-q { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* ---- Year chips (the recurring per-year visual language) ---- */
.ychips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ychips label {
  border: 1.5px solid var(--color-primary); border-radius: 24px;
  padding: 5px 12px; cursor: pointer; background: #fff;
  font-size: 0.92rem; font-weight: 700; color: #229a22; user-select: none;
  transition: all 0.15s;
}
.ychips label:has(input:checked) { background: var(--color-primary); color: var(--color-navy); }
.ychips input { display: none; }
/* עוגן לאטבי האסמכתא (📎 · clip-btn, מיקום absolute על קו המסגרת) ולבועות ההסבר.
   מנורות ה-💡 הוחלפו בבועות "!" ירוקות בסיום השאלה (bubbleify · בקשת המוצר 2026-07-23). */
.q { position: relative; }
.has-lamp { position: relative; }
/* שורות-עובדה פר בן/בת זוג (תושבות/עצמאות בן/בת הזוג) — התווית והשנים באותה שורה */
.ps-fact { font-weight: 700; font-size: 1.05rem; color: var(--color-navy); }
.ps-row + .ps-row { border-top: 1px dashed var(--color-border); padding-top: 6px; }
/* קו-הפרדה ויזואלי בין שורת המשתמש/ת (‎.row‎) לשורות בני/בנות הזוג (‎.ps-chips‎) — כמו הקו שבין
   בן זוג 1 לבן זוג 2 (‎.ps-row + .ps-row‎). מוצג רק כשיש תוכן (בני זוג) — לא לצד יחיד/ה. */
.row + .ps-chips:not(:empty) { border-top: 1px dashed var(--color-border); margin-top: 8px; padding-top: 8px; }
/* שורת תושבות (שלב 1ד) — כמו ‎.ps-row-inline‎ אך עם צ'קבוקס "לא בטוח/ה" בקצה: התווית והשנים
   נעולות יחד ב-‎.res-main‎ (nowrap — הצ'יפים לעולם לא יורדים מתחת לתווית), והצ'קבוקס נעול לאותה
   שורה (nowrap גם ב-‎.res-row‎ — בקשת המוצר 2026-07-26: אסור שיקפוץ לשורה מתחת לשנים).
   מה שנשבר כשהרוחב לא מספיק הוא תווית השאלה בתוך עצמה — לא הצ'יפים ולא הצ'קבוקס. */
.res-row { display: flex; align-items: flex-start; gap: 6px 10px; flex-wrap: nowrap; }
.res-main { display: flex; align-items: flex-start; gap: 6px 10px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
.res-main > .main-label, .res-main > .ps-fact, .res-main > .unsure-q { flex: 0 1 auto; min-width: 0; margin: 0; }
.res-main > .ychips { flex: 0 0 auto; margin-top: 0; }
/* צ'קבוקס "לא בטוח/ה" — סימונו פותח שורת שנים משלו, והשנים שייבחרו בה מוחרגות (ייעוץ פרטני).
   הכיתוב דו-שורתי (בקשת המוצר 2026-07-26): שורת מבוא קטנה ("קראתי את סימן הקריאה הירוק") מעל
   ההצהרה עצמה — כדי שהסימון ייעשה אחרי קריאת ההסבר ולא במקומו. שתי השורות ב-nowrap (הצ'יפ גדל
   לגובה, לא נשבר באמצע משפט); במסך צר (‎640px‎) הוא עובר לשבירה פנימית ורוחב חסום. */
.unsure-chk { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap;
  text-align: start; line-height: 1.25;
  border: 1.5px dashed var(--color-border); border-radius: 14px; padding: 4px 9px; background: #fff;
  font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s; }
.unsure-chk input { display: inline-block; margin: 0; width: 13px; height: 13px; flex: 0 0 auto; accent-color: var(--color-primary); }
.unsure-pre { display: block; font-size: 0.62rem; font-weight: 600; opacity: 0.8; }
.unsure-chk:has(input:checked) { border-style: solid; border-color: var(--color-primary); color: var(--color-navy); }
/* שורת השנים של "לא בטוח/ה" — מוסטת פנימה בלבד כדי שתיקרא כהמשך של השורה שמעליה. אין צבע/פס
   ייעודי: הטקסט והצ'יפים זהים לכל שאר השאלון (לבן→ירוק כשמסומן) — בקשת המוצר 2026-07-25.
   ההחרגה עצמה מוצגת במד-השנים ובבאנר, לא כאן. */
.unsure-row { margin-top: 6px; padding-inline-start: 16px; }
/* שורת אי-הוודאות מפרידה בין שתי שורות בני זוג ⇒ הקו המקווקו עובר אליה (‎.ps-row + .ps-row‎ אינו תופס) */
.unsure-row + .ps-row { border-top: 1px dashed var(--color-border); padding-top: 6px; }
.unsure-q { font-weight: 700; font-size: 0.95rem; color: var(--color-navy); }
/* מקורות הכנסה נוספים (singleYears): "באילו שנים?" יושבת בשורה קבועה משלה, ומתחתיה תחילה כל
   השנים כצ'יפים לא-מסומנים בשורה אחת. שנה שסומנה קופצת לשורה מלאה משלה (מיד מתחת לשאלה) עם
   "של מי ההכנסה?" ובורר הבעלות סמוכים לה באותה שורה; השנים שלא סומנו נדחקות יחד לשורה שמתחת.
   כך מיקום השאלה יציב בין מצב מסומן/לא-מסומן — משתנה רק סדר/מיקום השנים. */
.yr-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.yr-unit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* שנה מסומנת = שורה ברוחב מלא עם אפשרויות הבחירה שלה (תצוגה "רגילה" — ללא הקפה כחולה). */
.yr-unit.on { flex-basis: 100%; padding: 5px 2px; }
.yr-unit.on + .yr-unit.on { border-top: 1px dashed var(--color-border); }
.yr-box { border: 1.5px solid var(--color-primary); border-radius: 24px; padding: 5px 12px;
  cursor: pointer; background: #fff; font-size: 0.92rem; font-weight: 700; color: #229a22;
  user-select: none; transition: all 0.15s; }
.yr-box:has(input:checked) { background: var(--color-primary); color: var(--color-navy); }
.yr-box input { display: none; }
.yr-own-me { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); padding-inline: 4px; }
/* "של מי ההכנסה?" — תווית-המשנה שלצד שנה מסומנת בשערי מקורות ההכנסה */
.yr-own-q { font-size: 0.9rem; font-weight: 700; color: var(--color-navy); }
.radios.sm { gap: 5px; }
.radios.sm label { padding: 3px 9px; font-size: 0.85rem; }
/* בחירה סמוכה לשאלה — הדפוס הקנוני ל"שאלה → בחר/סמן" בכל השאלון: התווית ופקד הבחירה
   (רדיו / קלט / צ'יפים) יושבים באותה שורה (flex-wrap), במקום פקד בשורה נפרדת מתחת. */
/* משפט-שער ("אני או בן/בת זוגי שילמנו באופן פרטי… עבור:") — כותרת שאלה מעט מעלה, עם מרווח ברור מהמסגרות שמתחת */
.intro-fact { font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin: -2px 0 16px; }
.qsel { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.qsel > label.main-label, .qsel > .main-label { margin: 0; }
.qsel > .expl, .qsel > .preselect-note { flex-basis: 100%; }   /* הסבר/הערה — לשורה נפרדת מתחת, לא באמצע הבחירה */
/* בחירה פר-שנה: השנה (ylab) ופקד הבחירה באותה שורה */
.yblock.inline-yb { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.yblock.inline-yb > .ylab { margin: 0; }
/* שאלה + צ'יפי-שנים באותה שורה גם כשהתווית ארוכה: התווית מתקצרת/נשברת לשורה נוספת, אך צ'יפי
   השנים נשארים לצידה ולעולם אינם יורדים לשורה נפרדת מתחת (קריטי לקריאוּת — למשל שאלת טופס 106). */
/* יישור-לראש: הצ'יפים צמודים לשורה הראשונה של התווית (גם כשהיא נשברת לשתי שורות), כך שמרחקם מקצה
   המסגרת זהה לשאלות עם תווית בשורה אחת — אחידות ויזואלית לאורך כל השאלון. */
.ps-row-inline { display: flex; align-items: flex-start; gap: 6px 10px; flex-wrap: nowrap; }
.ps-row-inline > .main-label, .ps-row-inline > .ps-fact { flex: 0 1 auto; min-width: 0; }
.ps-row-inline > .ychips, .ps-row-inline > .radios { flex: 0 0 auto; margin-top: 0; }
/* בחירות + הערה נלווית ("ניתן לסמן יותר מאפשרות אחת") — עוטפים יחד כך שההערה תמיד צמודה
   לבחירות (מיד אחריהן) ולעולם לא נופלת לשורה נפרדת מתחת. הקבוצה כולה גולשת כיחידה. */
.choice-hint-group { display: inline-flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.choice-hint-group > .preselect-note { margin: 0; }
/* בתוך שורת-שאלה (qsel / בלוק-שנה inline-yb) הקבוצה גמישה: מתחילה תמיד בשורת התווית ונשברת
   פנימית במסך צר — במקום ליפול כיחידה שלמה לשורה נפרדת מתחת לשאלה (בורר המכשירים פר-שנה
   של שער מניות-המעסיק) */
.qsel > .choice-hint-group, .yblock.inline-yb > .choice-hint-group { flex: 1 1 260px; min-width: 0; }
/* רשימת מקורות ההכנסה-המשותפת בבדיקת ההגשה-הנפרדת (s1bsep, sepBody) — שורה פר מקור, וכל
   צמדי הכן/לא מיושרים זה מתחת לזה בטור אחד (בקשת המוצר 2026-08-27 — "מסודר בעין"): גריד
   דו-טורי — טור התוויות ברוחב הארוכה שבהן (נשברת פנימה במסך צר), וטור הגלולות מתחיל באותו
   קו בכל השורות. */
.sep-ji-list { margin-top: 6px; display: grid; grid-template-columns: fit-content(100%) max-content; gap: 3px 16px; align-items: center; justify-content: start; }
.sep-ji { display: contents; }
.sep-ji > .sep-ji-lbl { min-width: 0; }
.sep-ji > .radios { margin: 0; }
/* רדיו-בטון דו-שורתי: המונח בשורה הראשונה, וההסבר (בסוגריים) בשורה שנייה — הבטון "גבוה" יותר.
   כך שלוש האפשרויות נשארות בשורה אחת (המונחים קצרים) ובכל זאת מוסבר המונח הלא-ברור. */
.radios label:has(.opt-2l) { display: inline-flex; align-items: center; text-align: start; }
/* צ'יפ דו-שורתי בשורת שנים/בחירה (ychips) — שם המכשיר ומתחתיו תיאור זעיר; בורר המכשירים של
   שער מניות-המעסיק (g_equity): כל שבע האפשרויות נכנסות בשורת השאלה */
.ychips label:has(.opt-2l) { display: inline-flex; align-items: center; text-align: start; padding-block: 3px; }
.opt-2l { display: inline-flex; flex-direction: column; line-height: 1.25; }
.opt-2l .opt-sub { font-size: 0.74rem; font-weight: 600; opacity: 0.72; }
/* שנה חסומה לסימון (למשל nsp בשנת נישואין לאותו הורה נוסף) — לא לחיצה, מסומנת ויזואלית */
.ychips label.yr-blocked { border-style: dashed; border-color: var(--color-border); color: var(--color-text-muted); opacity: 0.55; cursor: not-allowed; text-decoration: line-through; }
.ychips label.yr-blocked:has(input:checked), .ychips label.yr-blocked { background: #fff; }

/* Friendly inline nudge to pick a year — shares the chips' row instead of
   adding a heavy separate banner box. Toggled by data-v="noyears" in render(). */
.year-hint {
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  color: #e11d2e; font-weight: 800; font-size: 0.95rem; line-height: 1;
  white-space: nowrap;
  animation: yearHintPulse 1.9s ease-in-out infinite;
}
.year-hint .yh-point {
  font-size: 1.15rem; line-height: 1;
  animation: yearHintNudge 1.1s ease-in-out infinite;
}
@keyframes yearHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes yearHintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .year-hint, .year-hint .yh-point { animation: none; }
}
/* נעילת תת-מדור ההגשה הנפרדת (s1b): הכיתוב האדום הקבוע (.sep-lock) הוסר (בקשת המוצר
   2026-08-03 מאוחר) — קליק על גלולה נעולה מקפיץ toast תחתון (sepLockNudge ב-questionnaire.html);
   הנעילה הוויזואלית נשארה ב-.opt-locked שלמעלה. */
/* מודול זיהוי בן/בת הזוג — שורות הזיהוי (שנת לידה + מין) והשם הפרטי. בקשת המוצר 2026-08-02
   (מאוחר): התוויות לעולם לא נשברות לשתי שורות בגלל האצבע האדומה — כשהכול נכנס, שורה אחת
   (כמו אחרי בחירת מין, כשהכינוי מתקצר); כשאין מקום, ההינט — הפריט האחרון — יורד בשלמותו
   לשורה מתחת ("אם אין ברירה הצג את השורה האדומה מטה"). לכן wrap עם פריטים קשיחים בלבד:
   ב-flex-wrap שבירת השורות נעשית לפי הרוחב המלא של כל פריט, בלי כיווץ תוויות. */
.sp-idrow, .sp-nmrow { flex-wrap: wrap; }
.sp-idrow > span, .sp-nmrow > span, .sp-nmrow > .main-label { white-space: nowrap; flex: 0 0 auto; }
.sp-idrow > select, .sp-idrow > .radios, .sp-idrow > .year-hint, .sp-nmrow > input[type="text"] { flex: 0 0 auto; }
/* הינט השם הפרטי ארוך (המלצה ולא דרישה) — כשהוא יורד לשורה משלו מותר לו להישבר פנימית במסך צר. */
.sp-nmrow > .year-hint { white-space: normal; flex: 0 1 auto; min-width: 0; line-height: 1.35; }
/* אצבע שורת-השנים בריבוי בני זוג — הנוסח הארוך ("בחר/י לפחות שנה אחת בה הינך נשוי/אה ל…")
   נשאר על שורת הצ׳יפים: בסיס קטן (130px) כדי שלא יגלוש לשורה נפרדת במסך רחב, והטקסט
   נשבר פנימית — כדפוס eq-row. */
.sp-yrrow > .year-hint { flex: 1 1 130px; min-width: 0; white-space: normal; line-height: 1.35; }

.yblock {
  border: 1px dashed rgba(0, 118, 255, 0.4); border-radius: 14px;
  padding: 14px 16px; margin-top: 10px; background: rgba(0, 118, 255, 0.03);
}
.yblock .ylab { font-weight: 800; color: var(--color-secondary); font-size: 0.95rem; margin-bottom: 8px; }
/* פאנלי הפירוט של מודול הפריסה (s10_<code> · panel() ב-spreading.js) — אותו מראה בדיוק כמו בלוקי
   השנה של יתר מודולי ההכנסה (.yblock): מסגרת מקווקוות כחלחלה + כותרת "שנת Y — עבור…" כחולה מודגשת
   (בקשת המוצר 2026-07-24, בעקבות עמוד משיכת קרן ההשתלמות E3). */
.q.sp-panel { border: 1px dashed rgba(0, 118, 255, 0.4); background: rgba(0, 118, 255, 0.03); }
.q.sp-panel > .ylab { font-weight: 800; color: var(--color-secondary); font-size: 0.95rem; margin-bottom: 8px; }

/* ---- מניות ואופציות מהמעסיק (s7eq) — תת-מסגרת פר מכשיר ----
   כל מכשיר שסומן בצ'יפים מקבל מסגרת משלו שכותרתה שם המכשיר, וכל מה שנשאל עליו (חברה · מסלול ·
   השלמת פרטי המכירה) יושב בתוכה בשורה נפרדת: התווית בעמודה קבועה בצד ההתחלה והאפשרויות/שדה
   ההזנה לצידה. (בקשת המוצר 2026-07-26 — קודם ישבו כל השאלות בשורות רצות ללא הפרדה בין המכשירים,
   והעמוד נקרא עמוס ולא ברור.) במסך צר התווית עולה לשורה משלה. */
.eq-inst { border: 1px solid rgba(0, 118, 255, 0.18); border-radius: 12px; background: #fff;
  padding: 8px 14px 10px; margin-top: 10px; }
.eq-inst-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 800;
  color: var(--color-navy); padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.eq-inst-sub { font-weight: 600; font-size: 0.78rem; color: var(--color-text-muted); }
.eq-row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 7px 0; }
.eq-row + .eq-row { border-top: 1px dashed rgba(0, 118, 255, 0.12); }
.eq-row > .eq-q { flex: 0 0 150px; max-width: 100%; font-weight: 600; font-size: 0.9rem; line-height: 1.4; }
/* הגלולות שומרות תמיד על גודלן הטבעי — הטקסט לעולם אינו נשבר באמצע גלולה (בקשת המשתמש
   2026-08-01 ערב: מודל הכיווץ הקודם — flex:1 1 0 + min-width:0 + nowrap בין הגלולות — מעך את
   הגלולות במסך בינוני/במסגרות מקוננות עד ששורת התווית נשברה בתוכן, "מוצג מאוד לא יפה").
   flex-basis:auto ⇒ הקבוצה חולקת את שורת השאלה רק כשהיא נכנסת בה בשלמותה; אחרת היא יורדת
   לשורה מלאה משלה (השאלה נשארת לבדה מעל — העדיפות היא שלמות הגלולות, הכרעת המשתמש). רק כשצר
   מכדי להכיל את כולן בשורה אחת (מובייל) — גלולות שלמות עוטפות בין שורות, לעולם לא נמעכות.
   eq-vert ("סוג הפעולה") נשאר עמודה מכוונת — לא מושפע. */
.eq-row > .radios { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.eq-row > .radios > label { max-width: 100%; }
/* אפשרויות "סוג הפעולה שקרתה" — תמיד אחת מתחת לשנייה (בקשת המשתמש 2026-07-27): עם שורות
   המשנה הארוכות ("יש אירוע מס — ...") העטיפה האופקית נקראה כזיגזג, וסדר האפשרויות השתנה
   לפי רוחב המסך. עמודה מיישרת אותן כמו ביתר שאלות המכשיר.
   2026-08-01 (בקשת המשתמש): כל אפשרות היא גלולה רגילה סביב תוכנה — אותה אליפסה בדיוק כמו
   ביתר שאלות המכשיר (מודל הכרטיס-הנמתח מ-2026-07-28 בוטל: stretch + פינות 12px הוסרו,
   והתווית יורשת את גלולת הבסיס של ‎.radios.sm). flex-start פירושו צמוד לימין ב-RTL.
   flex-basis:0 (בקשת המשתמש, המשך): בלי זה גלולה שרוחבה הטבעי עולה על המקום שנותר לצד
   התווית גלגלה את כל העמודה לשורה מלאה משלה — והגלולות התחילו בקצה השורה במקום בעמודת
   הבחירה, לא מיושרות מתחת לגלולות של יתר השאלות. basis 0 משאיר את העמודה תמיד לצד התווית
   (מיושרת כמו כולן), וגלולה רחבה מדי שוברת את שורת-המשנה בתוכה במקום לשבור את העמודה. */
.eq-row > .radios.eq-vert { flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 0; }
/* בשורת eq-vert רמז ה-👉 יורד לשורה מלאה מתחת ללחצנים: כפריט flex לצדם הוא חולק איתם את
   הגידול ומצר את העמודה עד רוחב-המינימום (230px) — בדיוק הדחיסות שה-stretch נועד לבטל. */
.eq-row:has(> .radios.eq-vert) > .year-hint { flex: 1 1 100%; }
/* רמז ה-👉 הוא הפריט שמוותר: הוא מתכווץ ראשון, ואם גם זה לא מספיק הוא יורד לשורה שמתחת —
   ובלבד שהאפשרויות עצמן יישארו לצד השאלה. בלי הרצועה הזו רמז ארוך חנק את הגלולות עד 15px. */
.eq-row > .year-hint { flex: 1 1 130px; min-width: 0; }
.eq-inst > .note-finger { margin-top: 8px; }
/* מפריד "פרטי המכירה" והכותרת הפר-בעלים שמתחתיו (רק כששני בני הזוג מסומנים לאותה שנה) */
.eq-sechd { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border);
  font-weight: 700; font-size: 0.88rem; color: var(--color-text); }
.eq-ownhd { margin-top: 8px; font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 640px) { .eq-row > .eq-q { flex-basis: 100%; } }

/* ---- ריבית מהלוואות חברתיות (s7e) — מסגרת פר הלוואה ----
   בכל בלוק (שנה, בעלים) כפתור ירוק "+ הוסף הלוואה לשנת Y" (דפוס ה-.add של מודול הקצבאות) פותח
   מסגרת נוספת; ביותר מהלוואה אחת כל מסגרת מקבלת כותרת כחולה "הלוואה 1", "הלוואה 2"… עם כפתור
   "הסר" בקצה השורה (בקשת המוצר 2026-07-26, ברוח המסגרות פר-מכשיר של s7eq). בהלוואה אחת
   (ברירת המחדל) אין מסגרת ואין כותרת — הבלוק נראה כפי שהיה. */
.p2p-loan.multi { border: 1px solid rgba(0, 118, 255, 0.18); border-radius: 12px; background: #fff;
  padding: 12px 14px 0; margin-top: 10px; }
.p2p-loan-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 800; color: var(--color-secondary); font-size: 0.95rem;
  padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--color-border); }
/* ההערה "מהי הלוואה אחת" יושבת בשורת הכפתור, לצדו השמאלי (RTL) ובאותו אפור של .hint —
   כיתוב-לוואי לפעולה ולא עוד פסקה מעליה (בקשת המוצר 2026-07-26). */
.p2p-loanadd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.p2p-loanadd > .hint { margin-top: 0; flex: 1 1 240px; }

/* ---- פרקי השכרה (ישראל s7 · חו"ל s7f) — מסגרת פר נכס ----
   אותו דפוס כמו מסגרות ההלוואות שמעל (בקשת המוצר 2026-07-28): כפתור ירוק "+ הוסף נכס לשנת Y"
   פותח בלוק נוסף (עד 3); ביותר מנכס אחד כל בלוק מקבל כותרת כחולה "נכס 1", "נכס 2"… עם "הסר"
   בקצה השורה; בנכס אחד (ברירת המחדל) אין מסגרת ואין כותרת — הבלוק נראה כפי שהיה. ניסיון לפתוח
   נכס רביעי מסמן rent_over3/frent_over3 ⇒ באנר ⛔ (BLOCK_RENT_MULTI/BLOCK_FRENT_MULTI) עם
   כפתור ביטול (.rm) בתוכו. */
.prop-frame.multi { border: 1px solid rgba(0, 118, 255, 0.18); border-radius: 12px; background: #fff;
  padding: 12px 14px 0; margin-top: 10px; }
.prop-frame-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 800; color: var(--color-secondary); font-size: 0.95rem;
  padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.prop-addrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.prop-addrow > .hint { margin-top: 0; flex: 1 1 240px; }
/* כפתור הביטול שבתוך באנר ה-⛔ — יושב בשטף המשפט ("לחצ/י [ביטול] — והשנה תחזור להיבחן.") */
.block-banner button.rm { margin: 0 4px; vertical-align: middle; }

/* ---- Repeater cards (children / degrees) ---- */
.child-card {
  border: 1.5px dashed var(--color-primary); border-radius: 14px;
  padding: 14px; margin-top: 10px; background: rgba(50, 205, 50, 0.03);
}

/* Depreciation-waiver — set off at the END of the expenses frame (a divider above it) so the
   ◻️ acknowledgment reads as the concluding line of the recognised-expenses box. */
.dep-waiver { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }

/* ---- Sub-grids ---- */
.subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
/* התווית למעלה ותיבת ההזנה נדחפת לתחתית התא — כך כל תיבות ההזנה בשורה מיושרות בקו אחד, גם כשחלק
   מהתוויות נשברות לשתי שורות (התא נמתח לגובה התא הגבוה, וה-input צמוד לתחתית). */
.subgrid .cell { display: flex; flex-direction: column; }
.subgrid .cell label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 4px; }
.subgrid .cell input { width: 100%; min-width: 0; margin-top: auto; }
/* רשתות ההוצאות (סולארי + שכירות): בועת ה-"!" ותג ה-"(₪)" נשארים על שורת התווית, צמודים
   משמאל לטקסט — flex מונע מהם להישבר לשורה משלהם מתחת כשהתווית ארוכה ("ריבית ריאלית על
   הלוואה"); הטקסט (פריט-flex אנונימי) נשבר פנימית לפי הצורך (בקשת המוצר 2026-07-28).
   התוויות כאן = טקסט + תג + בועה בלבד — לא להרחיב לרשתות עם תוויות מרובות-מקטעים (ני"ע). */
.subgrid.exp-grid .cell label { display: flex; align-items: center; }
.subgrid.exp-grid .cell label .ils-tag { flex: 0 0 auto; }
/* מסגרת ההוצאות של השכירות כששולם מס 10% (rental.js · .exp-only-alt): נשארת בה רק שורת "דמי
   שכירות מוטבים", ולכן הבועה שעל כותרת המסגרת — שמסבירה את הכרת ההוצאות במסלול המדרגות —
   מיותרת ואף מטעה. הבועה נוצרת ע"י bubbleify אחרי רינדור המודול, ולכן היא נכבית בכיתה על
   המסגרת ולא בסימון הבועה עצמה (בקשת המוצר 2026-08-10). שורת ההוצאה עצמה + הבועה הירוקה שלה
   אינן מושפעות — הן יושבות בתא שבתוך .subgrid, לא על ה-main-label. */
.q.exp-only-alt > label.main-label > .info-bubble { display: none; }
/* שורת נעילה בתא הוצאה (בלעדיות "דמי שכירות מוטבים" ⇄ "דירה חלופית") — צמודה מתחת לתיבה */
.subgrid.exp-grid .cell > .hint { margin-top: 4px; }
/* מודול שכ"ד מחו"ל (FR) — כל הוצאה מוכרת (סכום ההוצאה + תאריך התשלום שלה) עטופה במסגרת מקווקוות,
   כדי להפריד ויזואלית בין כל זוג הוצאה⇠תאריך לבין ההוצאה הבאה. */
.subgrid .fr-exp-cell { border: 1px dashed var(--color-border); border-radius: 8px; padding: 8px 10px; }
/* בחירת מטבע פר-הוצאה — תוויות המטבע המלאות ("דולר אמריקאי — USD ($)") רחבות מהתא, וה-select
   במידתו הטבעית גלש מחוץ למסגרת המקווקוות. מלל מוקטן + רוחב מלא של התא כולאים אותו בפנים
   (הרשימה הנפתחת עצמה עדיין מציגה את התווית המלאה). */
.fr-exp-cell .fr-expcur { display: block; margin-top: 3px; }
.fr-exp-cell .fr-expcur select { width: 100%; min-width: 0; font-size: 11px; }
/* שדה סכום עם סימן ₪ בתוך התיבה (מודול פריסה · moneyin). העוטף נדחף לתחתית התא במקום ה-input. */
.money-in { position: relative; display: block; margin-top: auto; }
.money-in > input { width: 100%; padding-inline-start: 24px; }
.money-in::before { content: "₪"; position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 0.9rem; line-height: 1; pointer-events: none; }

/* מודול סולארי (SO) — "נתוני ההכנסה" של כל שנה (סוג המקור + ברוטו + ניכוי במקור) מוצגים במסגרת (.q)
   נפרדת בראש בלוק השנה, המבדילה אותם משאלות המסלול/הזכאות/ההוצאות שמתחת — כמו כרטיסי ההכנסה במודול
   השכירות. רקע ה-.q הבהיר בולט על רקע ה-.yblock הכחלחל; רצועת-ההדגשה הכחולה בצד ההתחלה הוסרה
   (בקשת המוצר 2026-07-24 — בלי קו כחול מימין למסגרת). */

/* ---- מודול סולארי (SO) — כרטיסי הוצאות מפורטים (כמו במודול שכירות) + הטבת פחת ----
   כל כרטיס הוצאות (חשמל / השכרה) הוא תת-כרטיס .q שנפתח רק כשהענף חייב במס (render). */
.solar-exp { margin-top: 12px; }
.solar-exp .subgrid { margin-top: 8px; }
/* שאלת "עולה לכדי עסק?" (SA_BIZ3/RB_BIZ3) — כרטיס .q פר בעלים-שנה, מוצג רק בשנת מסלול שולי מכוון. */
.solar-biz { margin-top: 12px; }
/* ויתור-הפחת בתוך מסגרת ההוצאות (זהה במבנה למודול השכירות): צ'קבוקס-אישור מופרד בקו עליון בתחתית
   הכרטיס. ההסבר המלא מוצג בבועת "!" ירוקה (info-bubble) — הצ'קבוקס עצמו בגוון הרגיל (נייבי). */

/* תנאי הזכאות (טופס 1400) — רשימה מוצגת אינטראקטיבית לצד אישור העמידה בתנאים, לפי סוג ההכנסה
   שנבחר (מכירת חשמל / השכרה). מסגרת כחלחלה קלה כמו .expl, עם כותרת ורישום תבליטים. */
.solar-elig-cond { background: rgba(0, 118, 255, 0.06); border: 1px solid rgba(0, 118, 255, 0.14);
  border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.solar-elig-cond-title { font-weight: 700; color: var(--color-navy); font-size: 0.9rem; margin-bottom: 6px; }
.solar-elig-cond-title::before { content: "💡 "; }
.solar-elig-cond-list { margin: 0; padding-inline-start: 1.3em; list-style: disc;
  font-size: 0.88rem; line-height: 1.6; color: var(--color-text-muted); }
.solar-elig-cond-list li { margin: 2px 0; }

/* אישור תנאי הזכאות (טופס 1400) — כל ההערה בתיבה צהובה אחת (note-action ❗): תזכורת ❣️ להתחייבות
   שבטופס, רשימת התנאים (הכרטיס הכחלחל מולבן מעט לקריאות על הרקע הצהוב), בקשת אישור הנוקבת בשנות
   ההטבה, שתי אפשרויות הסימון, ונאדג' אדום מודגש "עד לאישור…" בתוך התיבה — לא תיבה צהובה נפרדת. */
.solar-elig-note .main-label { margin-bottom: 6px; }
.solar-elig-note .solar-elig-cond { background: rgba(255, 255, 255, 0.72); }
.solar-elig-heart { font-weight: 800; color: var(--color-navy); font-size: 0.95rem; margin: 2px 0 6px; }
.solar-elig-ask { font-weight: 700; color: #5a4200; margin: 8px 0 6px; }
.solar-elig-pending { color: #e11d2e; font-weight: 800; font-size: 0.9rem; line-height: 1.5;
  margin-top: 8px; animation: yearHintPulse 1.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .solar-elig-pending { animation: none; } }

/* ---- טווח תאריכים (תקופה: מ־ עד) — שני שדות התאריך תמיד באותה שורה ---- */
.date-range { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.date-range > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
/* מודול פריסה (SP) — שאלת אישור פריסה ראשונה (כן/לא · inline) בכל סוג הכנסה, ושורת "סכום + תאריכי
   התחלה/סיום" צמודים באותה שורה (.sp-amount-row); תא הסכום שומר רוחב מינימלי כדי שה-₪ והתאריכים
   לא יצטופפו. כשמסומן "יש אישור" — שדות התאריך (data-if=…!=yes) נעלמים ורק הסכום נשאר. */
.sp-approval { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; }
/* גודל שאלת האישור (וכל שאלת .sp-approval) זהה לשורת "אנא מלא/י…" (.sp-fill-lead · בקשת המוצר 2026-07-19). */
.sp-approval > .main-label { flex: 0 1 auto; font-weight: 700; font-size: 0.9rem; color: var(--color-navy); }
.sp-amount-row { align-items: flex-end; }
.sp-amount-cell { min-width: 160px; }
.sp-amount-cell > .money-in { width: 100%; }
/* פתיח "אנא מלא/י…" לפני אשכול שדות סכום/תאריכים במודול הפריסה (בקשת המוצר). */
.sp-fill-lead { margin-top: 10px; font-weight: 700; font-size: 0.9rem; color: var(--color-navy); }
/* זרימת החזר ה-159 (E1/E2 · refund159Box ב-spreading.js) — התיבה הסגולה (note-finger) עם שורות
   העילות; החליפה את צ'קבוקס .sp-159-chk (הוסר 2026-07-31). שורות העילות = .sp-approval רגילות. */
.sp-159-box .sp-approval { margin-top: 8px; }
/* זוג תאריכי התחלה/סיום בשורת הסכום — יחידה אחת שאינה נשברת: התאריכים תמיד זה לצד זה,
   וכשהשורה צרה הזוג יורד יחד לשורה הבאה (בקשת המוצר 2026-07-19). */
.sp-date-pair { display: inline-flex; gap: 14px; align-items: flex-end; flex-wrap: nowrap; }
.sp-date-pair > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }

/* ---- מבנה פנימי אחיד להערות הפתוחות (note-finger / note-action) — אותו גודל טקסט, רק אוויר
   וסדר: כותרת-סעיף מודגשת (nf-head), פסקאות מרווחות (nf-p) ורשימות (nf-list) · בקשת המוצר 2026-07-19. ---- */
.note-finger, .note-action { line-height: 1.6 !important; }   /* גובר על 1.55 שבהצהרות הבסיס המאוחרות */
.nf-head { display: block; font-weight: 800; margin: 10px 0 2px; }
.note-finger > .nf-head:first-child { display: inline; }   /* הכותרת הראשונה נשארת על שורת ה-☝️ */
.nf-p { margin: 6px 0 0; }
.note-finger > .nf-head:first-child + .nf-p { margin-top: 4px; }
.nf-list { margin: 4px 0 0; padding-inline-start: 20px; }
.nf-list li { margin: 3px 0; }
.sp-fill-lead + .date-range, .sp-fill-lead + .subgrid { margin-top: 6px; }

/* ---- מודול פריסה — פירוט אישור פריסה (approvedGrid) ----
   נפתח כשמסומן "התקבל אישור פריסה": קופסה אפורה שקטה עם שני סעיפים — פריסה לאחור ופריסה קדימה
   (סוגי fwd) — כותרת אפורה קצרה לכל סעיף, ותחתיה תיבות-שנה קומפקטיות זו לצד זו (בקשת המוצר). */
.sp-approved-box { background: #f4f5f7; border: 1px solid #d9dce1; border-radius: 12px;
  padding: 12px 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.sp-approved-src { font-size: 0.85rem; font-weight: 800; color: #4a5361; }
.sp-approved-head { font-size: 0.84rem; font-weight: 600; color: #5a6472; line-height: 1.55; margin-bottom: 8px; }
.sp-approved-years { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-approved-year { display: inline-flex; flex-direction: column; gap: 4px; background: #fff;
  border: 1px solid #d9dce1; border-radius: 10px; padding: 7px 8px; flex: 0 1 auto; }
.sp-approved-year .yr { font-size: 0.78rem; font-weight: 700; color: #5a6472; white-space: nowrap; }
.sp-approved-year .yr-tag { font-size: 0.68rem; font-weight: 600; color: #8a93a3; white-space: nowrap; }
.sp-approved-year .money-in > input { width: 84px; min-width: 0; padding-top: 8px; padding-bottom: 8px; }

/* ---- מודול נכות (ס' 9(5)) — תקופות נכות נוספות + צ'קבוקס "ללא תאריך סיום" בשורת התאריכים ----
   כל תקופה נוספת = שורה בתוך אותה תת-מסגרת של תקופת הנכות (קו-הפרדה מנוקד מעל), עם שני שדות
   תאריך, צ'קבוקס "ללא תאריך סיום" בשורה, וכפתור "הסר תקופה" (‎.rm‎). */
.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-navy); cursor: pointer; }
.chk-inline input { width: 17px; height: 17px; accent-color: var(--color-primary); }
.date-range > label.chk-inline, .dis-period-row > label.chk-inline { flex-direction: row; align-items: center; }
.dis-period-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); }
.dis-period-row > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.dis-period-row .rm { align-self: flex-end; }
/* ---- ניתוב מסלול + אישור אחוז הנכות פר תקופה (הוראת המעבר של תיקון 257) ----
   לכל תקופת נכות: שאלת מועד ההגשה (רק לתקופה שמתחילה מ-15.11.2021) והערת ❣️ עם שאלת כן/לא לאישור
   האחוז הנדרש למסלול שנגזר (qsel בתוך note-action; ברירת-מחדל "לא"). בריבוי תקופות — בלוק לכל
   תקופה, מופרד בקו מנוקד, עם תווית טווח התקופה. */
.dis-route-block { margin-top: 12px; }
.dis-route-block + .dis-route-block { border-top: 1px dashed var(--color-border); padding-top: 12px; }
.dis-route-span { font-weight: 700; color: var(--color-navy); font-size: 0.92rem; margin-bottom: 8px; }
.dis-route-q { margin: 4px 0 10px; }
.dis-route-label { font-weight: 600; color: var(--color-navy); font-size: 0.95rem; margin-bottom: 6px; }

/* ---- תקבולי ביטוח לאומי (btl) — "סוג התקבול", "סכום התקבול" ו"מס שנוכה במקור" תמיד באותה שורה ----
   כל שדה = תווית קטנה ומעומעמת מעל הפקד (כמו .date-range/.dis-period-row), כך שגם כשנבחר סוג תקבול
   ארוך (הבורר בעל רוחב קבוע וחותך בשלוש-נקודות במקום לגדול) שלושת השדות נשארים סמוכים באותה שורה.
   שדה הסוג גמיש וממלא את המקום הפנוי; כפתור "הסר" מיושר לתחתית. במסך צר בלבד — גלישה (wrap). */
.btl-item { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 6px; }
.btl-item > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.btl-item > label.btl-type { flex: 1 1 200px; min-width: 170px; }
.btl-item .btl-type select { width: 100%; min-width: 0; }
.btl-item .btl-num input { width: 120px; min-width: 0; }
.btl-item .rm { align-self: flex-end; }
/* בועת ה-"!" הירוקה של הבורר (עמוד הקצבאות s7h — allowances.js) יושבת בקצה השמאלי של התיבה
   עצמה, באותה שורה: העטיפה .sel-bub היא ה-flex, והבורר לוקח את המקום הפנוי לצדה. כך ההסבר
   צמוד לפקד שהוא מסביר, כמו בכל שאר השאלון (בקשת המוצר 2026-07-26). */
.btl-item .btl-type .sel-bub { display: flex; align-items: center; min-width: 0; }
.btl-item .btl-type .sel-bub select { flex: 1 1 auto; width: auto; min-width: 0; }

/* ---- משיכות מקופות גמל + פדיונות פוליסות חיסכון — כרטיס פר-משיכה/פדיון (gemel-interest.js) ----
   כל משיכה/פדיון = כרטיס .wd-card במסגרת כחולה (כמו מסגרות ההלוואות ב-s7e): כותרת כחולה
   "משיכה N"/"פדיון N" בראש הכרטיס, שם הקופה/המבטח לצדה ו"הסר" בקצה השורה; מתחתיה שורת
   ההסבר (.wd-cap) בכתב קטן, ורק אז רשת הסכומים (.subgrid). החליף את השורה השטוחה
   (.btl-item.gemel-wd) שבה "משיכה N" נראתה כתווית של שדה נוסף (בקשת המוצר 2026-07-26).
   משיכה/פדיון בודדים (ברירת המחדל) — בלי מסגרת, בלי כותרת ובלי "הסר": רק שדות ההזנה, כמו
   ההלוואה הראשונה ב-s7e. המסגרת והכותרות נכנסות רק כשנפתחה משיכה/פדיון שני (.multi). */
.wd-card { margin-top: 10px; }
.wd-card.multi { border: 1px solid rgba(0, 118, 255, 0.18); border-radius: 12px; background: #fff;
  padding: 12px 14px 14px; }
.wd-hd { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wd-card.multi .wd-hd { padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.wd-hd .wd-ttl { font-weight: 800; color: var(--color-secondary); font-size: 0.95rem;
  white-space: nowrap; padding-bottom: 8px; }
.wd-hd > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem;
  color: var(--color-text-muted); flex: 1 1 220px; min-width: 170px; max-width: 340px; }
.wd-hd > label select, .wd-hd > label input { width: 100%; min-width: 0; }
.wd-hd > .rm { margin-inline-start: auto; }
.wd-cap { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; }
/* סימון מרכיב ביטוח החיים (פדיון פוליסה) — צ'קבוקס בתוך שורת הכותרת עצמה, צמוד משמאל לבחירת
   חברת הביטוח מהרשימה (בקשת המוצר 2026-07-26 ערב; קודם ישב בשורה נפרדת מתחתיה). ה-override
   מנטרל את כללי .wd-hd > label (עמודה ברוחב 220px+) — כאן זו שורה צמודה ברוחב תוכן, מיושרת
   לגובה הפקדים שלצדה.
   flex:0 0 auto + white-space:nowrap (תיקון 2026-07-26): קודם היה flex:0 1 auto עם min-width:0,
   ולכן פריט-הטקסט האנונימי שבתוך ה-flex נדחס והתפצל לשלוש שורות. עכשיו התווית שומרת על רוחב
   התוכן ונשארת שורה אחת לצד בחירת חברת הביטוח; במסך צר היא יורדת שלמה לשורה הבאה (flex-wrap). */
.wd-life { display: flex; align-items: center; gap: 7px; font-size: 0.88rem;
  color: var(--color-navy); margin-bottom: 10px; cursor: pointer; }
.wd-life input { margin: 0; }
.wd-hd > label.wd-life { flex: 0 0 auto; flex-direction: row; max-width: none; white-space: nowrap;
  font-size: 0.88rem; color: var(--color-navy); margin-bottom: 0; padding-bottom: 9px; }
.wd-card .subgrid { margin-top: 8px; }
/* ניכוי המס במקור — שורה נפרדת מתחת לרשת הרווחים (בקשת המוצר 2026-07-27), כי הוא אינו רווח
   ובתוך הרשת הוא נקרא כשיעור רביעי. הרשת זהה לרשת הרווחים (auto-fill/160px) ולא עמודה רחבה
   משלה — כך תיבת ההזנה של הניכוי יוצאת בדיוק בגודל תיבות הרווחים שמעליה (בקשת המוצר). התווית
   ארוכה מהתא (~265px מול ~160px) ולכן nowrap: היא נמשכת שורה אחת אל תוך שאר השורה, שריקה
   ממילא, במקום להתפצל לשתיים ולהגביה את התא. במסך צר אין לאן להימשך — שם היא חוזרת לגלישה. */
.wd-card .subgrid.wht-row { margin-top: 10px; }
.wd-card .subgrid.wht-row .cell label { white-space: nowrap; }
@media (max-width: 640px) { .wd-card .subgrid.wht-row .cell label { white-space: normal; } }
/* .wd-sub — שורת "משיכה N" השטוחה שנותרה בפריסת קרן ההשתלמות (spreading E3) */
.btl-item .wd-sub { font-weight: 700; color: var(--color-navy); white-space: nowrap;
  align-self: flex-end; padding-bottom: 8px; }
/* קרן השתלמות (spreading E3) — אותו דפוס פר-משיכה, אך המעטפת .sp-e3-wd בזרימה רגילה (רק שורת
   הכותרת "משיכה N" + שם הקרן + "הסר" היא .btl-item פנימי) כי לכל משיכה יש גם רדיו ותתי-בלוקים. */
.sp-e3-wd + .sp-e3-wd { border-top: 1px dashed var(--color-border); padding-top: 10px; margin-top: 14px; }
/* שדות המכתב (E3): התווית = שם השורה במכתב, וההסבר בבועת "!" בקצה התווית. ההדגשה (navy/700)
   שהייתה כאן הוסרה (בקשת המוצר 2026-07-26) — התוויות אפורות בדיוק כמו כל תוויות ה-.subgrid
   בשאלון. היישור לתחתית התא נשמר ע"י margin-top:auto הגלובלי של .money-in.
   שורת ההסבר לאשכול הסכומים היא .wd-cap — אותה תצוגה בדיוק כמו בפדיון פוליסת החיסכון; כאן היא
   אינה בתוך .wd-card ולכן צריכה מרווח עליון משלה (שם הוא מגיע מ-.wd-hd{margin-bottom}). */
.sp-e3-wd .wd-cap { margin-top: 12px; }

/* ---- דמי לידה — פאנל גזירת התקופה מעוגן-הלידה: כל שאלה בשורה אחידה (תווית מימין, פקד משמאל,
   בסגנון ה-inline-choice של הבית), והתקופה שחושבה כשורת-סיכום מובלטת בתחתית. ---- */
.mat-panel { border: 1px solid rgba(43,108,176,0.25); border-radius: 12px; background: rgba(43,108,176,0.04);
  padding: 12px 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
/* התווית בתחילת השורה והפקד בקצה הנגדי (justify-content) — כך פקדי כל השורות מיושרים לאותו קו
   אנכי, במקום להיצמד לתווית ולהשאיר קצה משונן (התווית הארוכה דחקה את הרדיו לקצה והשורה נראתה
   דחוסה מקצה לקצה · משוב מוצר 2026-07-26). בגלישה (מסך צר) כל פקד יורד לשורה משלו בתחילתה. */
.mat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mat-row .mat-q { font-weight: 600; color: var(--color-navy); font-size: 0.92rem;
  display: inline-flex; align-items: center; flex: 0 1 auto; }
.mat-row input[type="date"] { min-width: 150px; }
.mat-sub { margin-inline-start: 18px; }             /* שדה-המשך (תאריך הפסקת העבודה) — מוזח מעט */
.mat-derived { background: #fff; border: 1px dashed var(--color-primary); border-radius: 10px;
  padding: 7px 12px; font-size: 0.9rem; font-weight: 600; color: var(--color-navy); width: fit-content; }

/* ---- בועת הסבר (ⓘ) — מוצגת בריחוף/פוקוס, סמוך לצ'קבוקס של כל סוג פריסה ---- */
.info-bubble { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-inline-start: 6px; border-radius: 50%;
  border: 1.4px solid var(--color-primary); background: #fff; color: var(--color-primary);
  font-size: 0.72rem; font-weight: 800; font-style: normal; line-height: 1; cursor: help; user-select: none;
  vertical-align: middle; flex: 0 0 auto; }
/* הבועה ממורכזת מעל הסימן ומוזזת אופקית ב---tipdx (נקבע חי ב-questionnaire.js לפי גבולות המסך) —
   כך ההערה לעולם אינה נדחקת מחוץ למסך, מכל מיקום של הסימן (תווית קצרה/ארוכה, ימין/שמאל).
   white-space: pre-line — פסקאות ההסבר מופרדות ב-\n (ושורה ריקה \n\n בין פסקאות) לריווח קריא.
   כשאין מקום מעל (הסימן צמוד לפס ההתקדמות) — .tip-below הופך את הפתיחה מטה. */
.info-bubble::after { content: attr(data-tip); position: absolute; bottom: 135%; left: 50%; right: auto; z-index: 30;
  transform: translateX(calc(-50% + var(--tipdx, 0px)));
  width: max-content; max-width: min(430px, 88vw); background: var(--color-navy); color: #fff; padding: 11px 14px;
  border-radius: 10px; font-size: 0.82rem; font-weight: 500; line-height: 1.65; white-space: pre-line; text-align: right;
  opacity: 0; visibility: hidden; transition: opacity .15s; box-shadow: 0 8px 26px rgba(0,31,63,.28); pointer-events: none; }
.info-bubble:hover::after, .info-bubble:focus::after { opacity: 1; visibility: visible; }
.info-bubble.tip-below::after { bottom: auto; top: 135%; }
/* גרסה ירוקה של בועת ה-"!" (ibubg) — סימן קריאה ירוק ליד השאלה, במקום מנורת 💡 בפינה. משמש
   להסבר חשוב שרוצים להבליט בנפרד מבועות המידע הכחולות (בקשת המשתמש 07/2026). */
.info-bubble.ib-green { border-color: #2e9e44; color: #2e9e44; }

/* ---- מודול פריסה (SP) — בורר סוגי הכנסה מקובץ לתתי-קבוצות אינטואיטיביות ----
   כל תת-קבוצה = כרטיס עם כותרת (אייקון + שם בשפה יומיומית) ומשפט "למי זה מתאים", ואז הצ'קבוקסים
   של סוגי ההכנסה השייכים לה. המטרה: שהמשתמש יזהה את מצבו ויסמן נכון, בלי קודי-סוג/מספרי-שדה. */
.sp-select { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.sp-group { border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px;
  background: rgba(0, 31, 63, 0.02); border-inline-start: 3px solid rgba(0, 118, 255, 0.35); }
.sp-group-head { font-weight: 800; color: var(--color-navy); font-size: 1rem; margin-bottom: 3px; }
.sp-group-desc { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); margin-bottom: 8px; }
.sp-group-opts { display: flex; flex-direction: column; gap: 2px; }
/* תת-קטגוריה בתוך כרטיס משפחה (למשל "קצבאות שהוונו" בתוך כרטיס C) — מוצגת כמסגרת נפרדת:
   קופסה ממוסגרת (border + רקע עדין) עם כותרת משנה, כדי להבליט אותה כתת-קבוצה עצמאית בתוך הכרטיס. */
.sp-subgroup { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--color-border);
  border-radius: 12px; background: rgba(0, 31, 63, 0.03); }
.sp-subgroup-head { font-weight: 700; color: var(--color-navy); font-size: 0.9rem; margin-bottom: 6px; }
/* שורת הסבר קטנה ומעומעמת מתחת לצ'קבוקס בורר (בתוך ה-label). ההזחה (inline-start) מיישרת אותה
   בקו אחד עם טקסט השאלה — ששורתו נפתחת בבועת ה-ⓘ (רוחב הבועה + הרווחים ≈ 13px · בקשת המוצר 2026-07-19). */
.sp-opt-hint { display: block; margin-top: 2px; margin-inline-start: 27px; font-size: 0.78rem; font-weight: 500;
  line-height: 1.5; color: var(--color-text-muted); }
/* קבוצה E (משיכות קופות) מוצגת באותו גוון ויזואלי כשאר כרטיסי הבחירה (A/C/D) — לבקשת המוצר 2026-07-19. */

/* ---- "סימון חובה" — תג סמוך לצ'קבוקס חובה + הבהוב כשמנסים להתקדם בלי לסמן ---- */
.req-badge { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #b02a37; background: #fdecee;
  border: 1px solid rgba(176,42,55,.4); border-radius: 10px; padding: 1px 7px; margin-inline-start: 2px;
  vertical-align: middle; white-space: nowrap; }
.req-chk { border-inline-start: 3px solid rgba(176,42,55,.32); padding-inline-start: 8px; }

/* ---- "מופיע ב-106" — תג מידע (לא אזהרה): ההכנסה כבר חולצה מטופס 106 שהועלה בשלב 5, אין להזין פעמיים ---- */
.badge-106 { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #0b6a75; background: #e3f5f7;
  border: 1px solid rgba(11,106,117,.4); border-radius: 10px; padding: 1px 7px; margin-inline-start: 4px;
  vertical-align: middle; white-space: nowrap; cursor: help; }
@keyframes reqFlash { 0%,100% { background: transparent; } 30%,70% { background: rgba(176,42,55,.14); } }
.req-flash { animation: reqFlash .8s ease-in-out 3; border-radius: 8px; }

/* ---- חלון חוסם (המשתמש היחיד שנותר: "💰 מחכים לך" — no106GetOverlay ב-questionnaire.html) ----
   מודאל "☝️ נדרש סימון" (blockModal) הוסר 2026-07-28 — חסימות סימון-חובה הן toast תחתון + הבהוב השדה. */
.tq-block-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,31,63,.45); direction: rtl; padding: 20px; }
.tq-block-card { background: #fff; border-radius: 18px; max-width: 420px; width: 100%; padding: 26px 24px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,31,63,.35); }
.tq-block-finger { font-size: 2.4rem; line-height: 1; animation: reqFingerBounce 1s ease-in-out infinite; }
@keyframes reqFingerBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tq-block-title { margin-top: 8px; font-weight: 800; font-size: 1.15rem; color: var(--color-navy); }
.tq-block-msg { margin-top: 10px; font-size: 0.98rem; line-height: 1.55; color: var(--color-text-muted); }
/* שתי דרכי המשך: "נתראה תכף — אחזור עם הטופס" (מלא) מול "התבלבלתי — ממשיכים בלי השנים" (מתאר) */
.tq-block-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tq-block-btn { border: none; border-radius: 30px; background: var(--color-navy); color: #fff;
  font-weight: 700; font-size: 0.92rem; line-height: 1.35; padding: 11px 20px; cursor: pointer; font-family: inherit; }
.tq-block-btn:hover { background: #00306a; }
.tq-block-btn.alt { background: #fff; color: var(--color-navy); border: 2px solid var(--color-navy); padding: 9px 20px; }
.tq-block-btn.alt:hover { background: rgba(0,31,63,.07); }
@media (prefers-reduced-motion: reduce) { .tq-block-finger, .req-flash { animation: none; } }

/* ---- שפת-צבע אחידה להערות ("בועות הסבר") ----
   ☝️ אצבע  = מידע / "חשוב לדעת" → רקע סגול בהיר (note-finger)
   ❗ סימן קריאה = דורש סימון מהמשתמש → רקע צהבהב נעים (note-action)
   הסגול הקנוני של כל משפחת ההדגשות (note-finger / sp-more / guard-box · בקשת המוצר 2026-08-03):
   רקע rgba(124,92,214,0.09) + מסגרת rgba(124,92,214,0.30) — אין להוסיף גוון/שקיפות סגולים אחרים. */
.note-finger { background: rgba(124,92,214,0.09); border: 1px solid rgba(124,92,214,0.30); border-radius: 12px;
  padding: 10px 14px; margin: 8px 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-navy); }
.note-finger::before { content: "☝️ "; }
.note-action { background: rgba(245,183,49,0.14); border: 1px solid rgba(214,158,30,0.5); border-radius: 12px;
  padding: 12px 14px; margin: 8px 0; line-height: 1.55; color: #6b4e00; font-size: 0.9rem; }   /* גודל טקסט זהה ל-.expl ו-.note-finger */
.note-action .chk { color: #5a4200; }
.note-action .chk input { accent-color: #d69e1e; }
/* בתוך התיבה הצהובה — כל הטקסט באותו גודל ובאותו גוון (בקשת המוצר · C4 קיבוע זכויות · opt-in
   קיזוז הפסדי-הון בני"ע): שאלת ה-main-label יורשת את גודל/צבע גוף התיבה במקום ההבלטה
   הכחולה-גדולה של ברירת המחדל. ההדגשה נשארת ב-font-weight בלבד. */
.note-action .sp-approval > .main-label, .note-action .qsel > .main-label { font-size: inherit; color: inherit; }

/* ---- "מידע נוסף" מתקפל (details/summary) — הסבר ארוך נפתח על פי דרישה, כך שהפאנל נשאר נקי ---- */
.sp-more { margin: 8px 0; }
.sp-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  width: max-content; max-width: 100%; font-size: 0.85rem; font-weight: 600; color: var(--color-primary);
  background: rgba(124,92,214,0.09); border: 1px solid rgba(124,92,214,0.30); border-radius: 999px; padding: 4px 12px; }
.sp-more > summary::-webkit-details-marker { display: none; }
.sp-more > summary::before { content: "ℹ️"; }
.sp-more > summary::after { content: "▾"; font-size: 0.85em; margin-inline-start: 2px; }
.sp-more[open] > summary::after { content: "▴"; }
.sp-more[open] > summary { border-radius: 12px 12px 0 0; }
.sp-more-body { background: rgba(124,92,214,0.09); border: 1px solid rgba(124,92,214,0.30); border-top: none;
  border-radius: 0 0 12px 12px; padding: 10px 14px; font-size: 0.9rem; line-height: 1.55;
  color: var(--color-navy); white-space: pre-line; }
.sp-more-body ul, .sp-more-body .sp-why { margin: 4px 0 0; padding-inline-start: 20px; }

/* ---- Banners ---- */
.block-banner {
  background: #fdecee; border: 1px solid rgba(176, 42, 55, 0.5); color: #b02a37;
  border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-weight: 600; font-size: 0.9rem;
}
/* באנר התושבות (s1d) — מסגרת אחת שמאגדת את שתי סיבות ההחרגה (אי-תושבות / אי-ודאות) ואת משפט
   הסיום המשותף; השורות מופרדות ב-‎\n‎ מתוך ה-JS ⇒ pre-line, ו-line-height נדיב לקריאות רב-שורתית. */
.block-banner.res-banner { white-space: pre-line; line-height: 1.6; }
.ok-banner {
  background: #e6f4ea; border: 1px solid rgba(30, 126, 52, 0.5); color: #1e7e34;
  border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-weight: 600; font-size: 0.9rem;
}
.banner-warn {
  background: #fdf6e8; border: 1px solid rgba(200, 138, 45, 0.5); color: #7a5410;
  border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-weight: 600; font-size: 0.9rem;
}
/* ---- מסלול קטין — תיבת הסכמת ההורה/האפוטרופוס (guardbox, שלב האסמכתאות) ----
   מסגרת סגולה "רשמית" (משפחת ההדגשות הסגולות — sp-more/refund159): שם + ת"ז + קרבה בשורה אחת,
   ומתחתם הצהרת ההסכמה עם צ'קבוקס — תנאי שליחה (submit gate ב-questionnaire.js). */
.guard-box { background: rgba(124,92,214,0.09); border: 1.5px solid rgba(124,92,214,0.30);
  border-radius: 12px; padding: 14px 16px; margin: 12px 0; line-height: 1.55; font-size: 0.9rem; }
.guard-title { font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.guard-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0; }
.guard-fields > label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.guard-fields input[type="text"] { min-width: 170px; }
.guard-fields .radios { display: inline-flex; gap: 8px; }
.guard-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 0.85rem; font-weight: 600; }
.guard-consent input { margin-top: 3px; flex: 0 0 auto; }

/* ---- Inline add/remove buttons ---- */
button.add {
  background: var(--color-primary); color: var(--color-navy); border: none;
  border-radius: 10px; padding: 10px 18px; cursor: pointer; font-size: 0.95rem; font-weight: 700;
}
button.rm {
  background: #fff; color: #b02a37; border: 1px solid rgba(176, 42, 55, 0.5);
  border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: 0.82rem;
}

/* ============================================================
   Dev chrome — removed from the user-facing UI
   ============================================================ */
.var, .calc, .mod-note, .panel, .step-head .tag, .sumtbl, .grand { display: none !important; }

/* ============================================================
   Sticky step navigation footer
   ============================================================ */
.tq-footer {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 950;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 30px rgba(0, 31, 63, 0.06);
  padding: 14px 20px;
}
.tq-footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tq-footer .tq-note { font-size: 0.78rem; color: var(--color-text-muted); flex: 1; }
.tq-btn {
  border: none; border-radius: 30px; padding: 13px 32px;
  font-family: var(--font-main); font-size: 1.05rem; font-weight: 800; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.tq-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tq-btn-back {
  background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy);
}
.tq-btn-back:hover:not(:disabled) { background: var(--color-navy); color: #fff; }
.tq-btn-next {
  background: linear-gradient(135deg, #001f3f 0%, #013a73 55%, #0076ff 100%);
  color: #fff; box-shadow: 0 8px 25px rgba(0, 31, 63, 0.3);
}
.tq-btn-next:hover:not(:disabled) { transform: translateY(-2px); }
.tq-btn-submit {
  background: linear-gradient(135deg, #32cd32 0%, #00d4ff 100%);
  color: var(--color-navy); box-shadow: 0 8px 25px rgba(0, 212, 255, 0.35);
}
.tq-btn-submit:hover:not(:disabled) { transform: translateY(-2px); }

/* ---- Intro + completion screens ---- */
.tq-hero {
  text-align: center; padding: 20px 10px 8px;
}
.tq-hero h1 { font-size: 2rem; font-weight: 900; color: var(--color-navy); margin: 0 0 8px; letter-spacing: -1px; }
.tq-hero p { font-size: 1.05rem; color: var(--color-text-muted); margin: 0; }

.tq-done {
  text-align: center; background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 24px; padding: 56px 32px; box-shadow: 0 20px 60px rgba(0, 31, 63, 0.08);
  max-width: 560px; margin: 40px auto;
}
.tq-done .tq-check {
  width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  background: linear-gradient(135deg, #32cd32 0%, #00d4ff 100%); color: #fff;
}
.tq-done h2 { font-size: 1.9rem; font-weight: 900; color: var(--color-navy); margin: 0 0 12px; }
.tq-done p { font-size: 1.1rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 24px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .tq-shell { padding: 16px 14px 150px; }
  .step-head { padding: 16px 18px; }
  .step-head h2 { font-size: 1.1rem; }
  .step-body { padding: 16px; }
  .tq-hero h1 { font-size: 1.6rem; }
  .tq-btn { padding: 12px 22px; font-size: 1rem; }
  .tq-footer .tq-note { display: none; }
  /* צ'קבוקס "לא בטוח/ה" (שורת התושבות) — במסך צר הוא נשאר בשורת השנים (nowrap), ולכן שם הוא
     מתפרס לגובה במקום לרוחב: שורת המבוא נשברת ורוחב הצ'יפ נחסם, כדי שלא ידחוק את השנים החוצה. */
  .unsure-chk { white-space: normal; max-width: 112px; }
  .tq-footer-inner { justify-content: stretch; }
}

/* ---- שדות תאריך dd/mm/yyyy (עטיפה גלובלית של input[type=date] — ראו questionnaire.js) ----
   הפורמט של שדה תאריך נטיבי תלוי בשפת הדפדפן; הקהל ישראלי, לכן התצוגה תמיד dd/mm/yyyy:
   שדה טקסט גלוי + כפתור 📅 שפותח את הלוח הנטיבי; ה-input הנטיבי מוסתר אך חי (מקור האמת, ISO). */
.dmy { position: relative; display: inline-flex; align-items: center; }
.dmy input.dmy-native {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  min-width: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
}
/* input.dmy-face ולא .dmy-face לבדו: כלל הבסיס input[type=text] הוא (0,1,1) — סלקטור-מאפיין
   שקול ל-class — ובלי חיזוק הוא גובר על ה-padding שמפנה מקום לכפתור ה-📅. */
.dmy input.dmy-face { width: 158px; direction: ltr; text-align: left; padding-right: 38px; }
.dmy input.dmy-face:disabled { background: #f3f4f6; color: #9aa1ac; }
.dmy input.dmy-face.dmy-bad { border-color: #c92a2a; box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.12); }
.dmy-cal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 1.05rem; padding: 2px; line-height: 1;
}
.dmy-cal:disabled { opacity: 0.4; cursor: default; }
/* ---- פסיקי אלפים בשדות סכום (amt-face — ראו questionnaire.js) ----
   הנטיבי מוסתר ומחזיק את הערך הגולמי; הפנים הטקסטואליים מציגים 1,234,567 חי. */
input.amt-native { display: none; }
input.amt-face { direction: ltr; text-align: left; min-width: 136px; }
/* בזמן שה-placeholder העברי מוצג — השדה עצמו RTL: Chrome מתעלם מ-direction בתוך ::placeholder,
   ולכן בלי זה placeholder ארוך מהשדה נחתך בתחילתו ("לידי סכום"); כך הוא נחתך בזנב, אם בכלל. */
input.amt-face:placeholder-shown { direction: rtl; text-align: right; }
/* סימן השקל של שדות סכום — "(₪)" בכיתוב האפור של התווית, לא בתוך התיבה
   (מוזרק גלובלית ע"י ilsTag בשכבת ה-placeholder, questionnaire.js). */
.ils-tag { color: var(--color-text-muted); font-size: 0.85em; margin-inline: 4px 2px; }
/* placeholder של שדות מספר/סכום: עברית נצמדת לימין גם בשדה LTR, ומוקטנת מעט
   כדי ש"הקלידי סכום" ייכנס בשלמותו גם במסגרות הצרות (120px) בלי חיתוך.
   direction לא נתמך בתוך ::placeholder — הכיוון נקבע על השדה עצמו (:placeholder-shown לעיל) */
input[type=number]::placeholder, input.amt-face::placeholder { text-align: right; font-size: 0.85rem; }
/* אפור אחיד לכל רמזי הקלט: placeholder של שדות טקסט/מספר/תאריך ו-select במצב "בחר/י"
   (sel-ph — value ריק) — אותו צבע בדיוק, במקום חלקם אפורים וחלקם שחורים.
   text-overflow: רשת ביטחון — placeholder שבכל זאת ארוך מהשדה נקטם ב"…" ולא נחתך באמצע אות */
input::placeholder { color: var(--color-text-muted, #556b82); opacity: 1; text-overflow: ellipsis; }
select.sel-ph { color: var(--color-text-muted, #556b82); }
select.sel-ph option { color: var(--color-navy, #001f3f); }

/* פער 3 · מפת חלון הפריסה + משפך השנים החסרות (spreading.js spwRender · 2026-08-08):
   שורות ✓ ירוקות שקטות לשנים שבשאלון, אקורדיון <details> לשנה חסרה, והודעות
   ⛔/⏳ פר-שנה. המד ("עומק הבחינה") הוא .hint רגיל. */
.sp-winmap { margin-top: 12px; border-top: 1px dashed #d6dee8; padding-top: 8px; }
.sp-winmap .spw-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.spw-row { padding: 4px 10px; margin: 3px 0; border-radius: 8px; font-size: 0.9rem; }
.spw-row.ok { background: #eefaf0; color: #1d7a3d; }
.spw-row.poison { background: #fdf0f0; color: #8a2f2f; }
.spw-row.dim { background: #f4f6f9; color: #7c8da0; }
/* פער 4ב · dual-lite — בלוק התקבול המקביל של בן/בת הזוג (spDualRender) */
.sp-dual:not(:empty) { margin-top: 12px; border-top: 1px dashed #d6dee8; padding-top: 8px; }
.spw-acc { margin: 4px 0; border: 1px solid #e3e9f2; border-radius: 10px; background: #fbfcfe; }
.spw-acc summary { cursor: pointer; padding: 6px 10px; font-size: 0.92rem; font-weight: 600; }
.spw-acc .spw-body { padding: 4px 12px 10px; }
.spw-msg { font-size: 0.85rem; margin-top: 4px; }
.spw-msg.poison { color: #b00020; font-weight: 600; }
.spw-msg.out { color: #8a6d00; }

/* ============================================================
   שכבת המיקרו-אנימציות (2026-08-26) — משוב עדין, לא ראוותני:
   כניסת עמוד בניווט (tq-enter — מוצמד ב-go/goTo ולא ב-sync, כדי
   שהקלדה בשדות לא תרצד את הכרטיס), הבזק "פרק הושלם" על מקטע פס
   ההתקדמות (just-done), ✓ צירוף קובץ, לחיצת כפתור מוחשית, וסימן
   ה-✓ במסך הסיום. כיבוי מלא תחת prefers-reduced-motion (ה-count-up
   של אומדן ההחזר נבדק שם ב-JS — results-screen.js).
   ============================================================ */
@keyframes tqStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step.tq-enter { animation: tqStepIn 0.3s ease-out; }
/* הבזק חד-פעמי על מקטע הפרק שזה עתה הושלם (celebrateChapter ב-questionnaire.js) */
@keyframes tqSegDone {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(1.9); box-shadow: 0 0 0 5px rgba(50, 205, 50, 0.25); }
  100% { transform: scaleY(1); box-shadow: 0 0 0 0 rgba(50, 205, 50, 0); }
}
.tq-seg.just-done .tq-seg-bar { animation: tqSegDone 1.1s ease-out; }
/* ✓ ירוק קטן שמופיע ליד שדה קובץ ברגע שצורף קובץ (מאזין change ב-questionnaire.js) */
@keyframes tqFileOk { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.tq-file-ok { display: inline-block; margin-inline-start: 8px; color: #0b7a3b; font-weight: 700; font-size: 0.85rem; animation: tqFileOk 0.25s ease-out; }
/* לחיצה מוחשית על כפתורי הניווט — משלימה את ה-hover הקיים (translateY(-2px)) */
.tq-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
/* סימן ה-✓ במסך "תודה רבה" נכנס בקפיצה קטנה — רגע הסיום */
@keyframes tqCheckPop { 0% { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
.tq-done .tq-check { animation: tqCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* הערת "השנה האחרונה להגשה" בתיבת הפתיח של s0 — מוזנת חי ב-render (s0-deadline) */
.s0-deadline { display: block; margin-top: 6px; font-weight: 700; color: #9a6200; }
@media (prefers-reduced-motion: reduce) {
  .step.tq-enter, .tq-seg.just-done .tq-seg-bar, .tq-file-ok, .tq-done .tq-check { animation: none !important; }
}