/* ==========================================================================
   app.css - עיצוב האפליקציה והעמוד.

   עיקרון: הטופס עצמו הוא הממשק. השדות שקופים ברובם, ומה שנראה הוא הטופס
   המקורי עם הטקסט שהוזן. אין קישוטים גרפיים מעל הטופס - רק סימון עדין של
   השדות כדי שיהיה ברור איפה אפשר להקליד.
   ========================================================================== */

:root {
  --ink: rgb(0 0 90);
  /* כחול המותג, נדגם מקובץ הלוגו של אורן לוי רואה חשבון */
  --brand: #06539a;
  --brand-dark: #04406f;
  --text: #1c2733;
  --muted: #5b6b7a;
  --line: #d8e0e6;
  --bg: #f5f7f9;
  --panel: #ffffff;
  --danger: #a4262c;
  --warn: #8a5a00;
  --focus: #0b7fd4;
  --radius: 8px;
  --font: "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
}

@font-face {
  font-family: "Form6101Hebrew";
  src: url("../assets/fonts/form6101-hebrew.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

/* כללי display מפורשים גוברים על תכונת hidden של הדפדפן - צריך להחזיר אותה. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { line-height: 1.3; color: var(--brand-dark); }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 4px; }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h3 { font-size: 1.05rem; }

.site-header { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 0 20px; }
.subtitle { margin: 0 0 10px; font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--brand); font-weight: 600; }
.lede { margin: 0; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------- שורת המיתוג */

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 52px; width: auto; flex: none; display: block; }
.brand-text { margin: 0; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-kicker { font-size: 0.72rem; color: var(--muted); }
.brand-name { font-size: 1.05rem; font-weight: 700; color: var(--brand); }
.brand-role { font-size: 0.85rem; color: var(--muted); }

.brand-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 44px;            /* יעד מגע נוח בנייד */
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.brand-phone:hover { border-color: var(--brand); background: #f1f6fb; }
.brand-phone:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.brand-phone-icon { width: 17px; height: 17px; flex: none; }
/* המספר נשאר LTR גם בתוך עמוד RTL */
.brand-phone-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.content { padding: 28px 0; }
.content p, .content li { max-width: 72ch; }
.content ul, .content ol { padding-inline-start: 22px; }
.content-cta { background: var(--panel); border-block: 1px solid var(--line); }

.site-footer { padding: 20px 0 40px; color: var(--muted); font-size: 0.9rem; }
.site-footer p { margin: 0 0 8px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text); }
.footer-tel { color: var(--brand); direction: ltr; unicode-bidi: isolate; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.footer-links a, .footer-tel { color: var(--brand); }
.footer-links a, .footer-brand a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0;
}
.site-footer a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------- מטרת הטופס */

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em; height: 1.7em;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.15em;
}

.purpose { padding: 24px 0 6px; }
.purpose h2 { margin: 0 0 6px; }
.purpose-lede { margin: 0 0 14px; color: var(--muted); max-width: 78ch; }

.purpose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.purpose-card {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
  padding: 13px 15px;
  min-height: 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
}
.purpose-card:hover { border-color: var(--brand); }
.purpose-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.purpose-card.is-selected {
  border-color: var(--brand);
  background: #f1f6fb;
  box-shadow: inset 0 0 0 1px var(--brand);
}
.purpose-title { font-weight: 700; color: var(--brand-dark); }
.purpose-hint { font-size: 0.86rem; color: var(--muted); }

.purpose-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #f1f6fb;
  border: 1px solid #c9dcee;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------ סרגל כלים */

.app { padding: 20px 0 8px; }
.app h2 { margin: 0 0 6px; }
.app-lede { margin: 0 0 6px; color: var(--muted); max-width: 78ch; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 10px 0 14px;
}
.toolbar-group { display: flex; gap: 8px; align-items: center; }
.toolbar-zoom { margin-inline-start: auto; }

.btn {
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 16px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--brand); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-quiet { color: var(--muted); }
.btn-icon { min-width: 44px; padding: 9px 12px; font-size: 1.2rem; line-height: 1; }

.status {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #eef6ec;
  border: 1px solid #cfe3ca;
}
.status.is-error { background: #fdf0f0; border-color: #f0c8c8; color: var(--danger); }

/* ------------------------------------------------- פרטיות ואישור */

/* מוסתר חזותית אך זמין לקוראי מסך. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.consent {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
}
.consent-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  max-width: 82ch;
}
.consent-icon { width: 19px; height: 19px; flex: none; color: var(--brand); margin-top: 1px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; }

/* יעד מגע נוח (WCAG 2.5.8) בלי לשנות את מראה התיבה. */
.consent-check {
  width: 22px; height: 22px;
  flex: none; margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent-check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent-label { font-size: 0.92rem; line-height: 1.5; cursor: pointer; text-wrap: pretty; }
.consent-label a { color: var(--brand); }
.consent-label a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* שגיאת האישור: מסומנת בסימן, במסגרת ובמשקל טקסט - לא בצבע בלבד. */
.consent-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #7a1d22;
  background: #fdf2f2;
  border: 1px solid #d99a9e;
  border-radius: var(--radius);
}
.consent-error-mark {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #a4262c;
  color: #fff; font-weight: 700; line-height: 1;
}
.consent-check[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }

/* ------------------------------------------------------------- שגיאות */

.issues {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius);
}
.issues h3 { margin: 8px 0 6px; font-size: 0.98rem; }
.issues ul { margin: 0; padding-inline-start: 20px; }
.issues li { margin: 3px 0; }
.issues-missing { color: var(--warn); }
.issue-link {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-align: start; cursor: pointer; text-decoration: underline dotted;
}
.issue-link:hover { text-decoration: underline; }

/* דרישה שחוסמת הפקה נבדלת מהתרעה שאפשר לדלג עליה - בסימן ובמשקל, לא בצבע
   בלבד, כדי שההבחנה תעבור גם למי שאינו מבחין בצבעים. */
.issues-missing li.is-blocking { color: var(--danger); font-weight: 600; }
.issue-blocking-tag {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fdecec;
  border: 1px solid #d99a9e;
  color: #7a1d22;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------- פריסת האזור */

.app-body { display: grid; grid-template-columns: 268px 1fr; gap: 18px; align-items: start; }

.field-index-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.field-index-panel h3 { margin: 0 0 4px; }
.field-index-panel .hint { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
#field-index details { border-top: 1px solid var(--line); padding: 6px 0; }
#field-index details.is-secondary summary { color: var(--muted); font-weight: 500; }
#field-index summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.idx-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e4f0fa;
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 700;
}
#field-index ul { list-style: none; margin: 6px 0 4px; padding: 0; }
#field-index li button {
  font: inherit; font-size: 0.86rem;
  background: none; border: 0; color: var(--brand);
  padding: 5px 2px; cursor: pointer; text-align: start; width: 100%;
}
#field-index li button:hover { text-decoration: underline; }

/* --------------------------------------------------------- לשוניות עמוד */

.page-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.page-tab {
  font: inherit;
  font-size: 0.88rem;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #eef2f5;
  color: var(--muted);
  cursor: pointer;
}
.page-tab:hover { color: var(--brand); }
.page-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.page-tab.is-active,
.page-tab[aria-selected="true"] {
  background: var(--panel);
  color: var(--brand-dark);
  font-weight: 700;
  border-color: var(--line);
  box-shadow: inset 0 3px 0 var(--brand);
}

/* ------------------------------------------------------------- הבמה */

.stage-area { min-width: 0; }

.form-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  overflow: hidden;
}

.stage-viewport {
  overflow: auto;
  max-height: min(82vh, 1100px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}

.stage {
  position: relative;
  margin: 0 auto;
  background: #fff;
  /* --scale מתעדכן מ-JS: פיקסלים של מסך לכל נקודת PDF. */
  --scale: 1;
}

.stage-bg {
  display: block;
  width: 100%; height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* -------------------------------------------------- שדות מעל הטופס */

.f-text, .f-digits, .f-mark, .f-inklabel, .f-signature, .f-auto {
  position: absolute; margin: 0;
}

/* שדה נגזר (מס' ת.ז בראש כל עמוד) - מוצג כפי שייכתב, ואינו נערך ישירות. */
.f-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgb(11 127 212 / 4%);
  border-radius: 2px;
  color: var(--ink);
  font-family: "Form6101Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.f-auto:hover { background: rgb(11 127 212 / 12%); }
.f-auto:focus-visible { outline: 2px solid var(--focus); }

.f-text {
  border: 0;
  background: rgb(11 127 212 / 6%);
  border-radius: 2px;
  color: var(--ink);
  font-family: "Form6101Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  padding: 0;
  outline: 0;
  min-width: 0;
}
.f-text::placeholder { color: rgb(0 0 90 / 30%); }
.f-text:hover { background: rgb(11 127 212 / 12%); }
.f-text:focus { background: rgb(255 244 190 / 65%); box-shadow: 0 0 0 2px var(--focus); }
.f-text.is-tight { background: rgb(164 38 44 / 12%); }

/* --------------------------------------------- מילוי אוטומטי של הדפדפן

   שתי בעיות שהמילוי האוטומטי יוצר בטופס שמונח על גבי תמונה, ושתי התשובות:

   1. הדפדפן עשוי לקבוע value בלי לשגר אף אירוע קלט. האנימציה הריקה כאן היא
      הסימן היחיד שמגיע בוודאות; ui.js מאזין ל-animationstart שלה ומסנכרן את
      כל השדות מה-DOM (ראו watchAutofill).
   2. ה-user-agent צובע שדות שמולאו אוטומטית ברקע כחלחל וכופה צבע טקסט
      ב-!important. על שדה שקוף כמו .f-digits-input זה חושף את המספר הגולמי
      מעל משבצות הטופס, ועל .f-text זה מכסה את הטופס עצמו. שני הכללים למטה
      מחזירים את המראה המקורי בלי לכבות את המילוי האוטומטי.
   -------------------------------------------------------------------- */

@keyframes form6101-autofill { from { opacity: 1; } to { opacity: 1; } }

.f-text:-webkit-autofill,
.f-digits-input:-webkit-autofill {
  animation-name: form6101-autofill;
  animation-duration: 1ms;
}

.f-text:-webkit-autofill,
.f-text:-webkit-autofill:hover,
.f-text:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  /* הרקע של ה-user-agent אינו ניתן לביטול ישיר; צל פנימי מכסה אותו. */
  box-shadow: 0 0 0 1000px rgb(255 244 190 / 65%) inset;
  caret-color: var(--ink);
}

/* בשדה המשבצות הטקסט חייב להישאר בלתי נראה - הספרות מצוירות בתאים. */
.f-digits-input:-webkit-autofill,
.f-digits-input:-webkit-autofill:hover,
.f-digits-input:-webkit-autofill:focus {
  -webkit-text-fill-color: transparent;
  box-shadow: 0 0 0 1000px transparent inset;
  caret-color: transparent;
}

/* משבצות ספרות */

.f-digits { background: rgb(11 127 212 / 6%); border-radius: 2px; }
.f-digits:hover { background: rgb(11 127 212 / 12%); }
.f-digits.is-active { background: rgb(255 244 190 / 65%); box-shadow: 0 0 0 2px var(--focus); }

.f-digit-cell {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: "Form6101Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  pointer-events: none;
}
.f-digit-cell.is-next { background: rgb(11 127 212 / 18%); border-radius: 2px; }

.f-digits-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* מונע הגדלה אוטומטית של iOS בעת מיקוד */
  padding: 0;
  outline: 0;
}

/* תיבות סימון */

.f-mark { display: block; cursor: pointer; }
.f-mark input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.f-mark-x { position: absolute; inset: 0; border-radius: 2px; background: rgb(11 127 212 / 10%); }
.f-mark:hover .f-mark-x { background: rgb(11 127 212 / 22%); }
.f-mark input:focus-visible ~ .f-mark-x { box-shadow: 0 0 0 2px var(--focus); }
/* סימון = שני קווים אלכסוניים, כמו ב-PDF (ולא התו "X" מפונט). */
.f-mark input:checked ~ .f-mark-x::before,
.f-mark input:checked ~ .f-mark-x::after {
  content: "";
  position: absolute;
  inset: 12%;
  background: var(--ink);
  clip-path: polygon(0 0, 16% 0, 100% 84%, 100% 100%, 84% 100%, 0 16%);
}
.f-mark input:checked ~ .f-mark-x::after {
  clip-path: polygon(100% 0, 100% 16%, 16% 100%, 0 100%, 0 84%, 84% 0);
}

/* תוויות שהמערכת מדפיסה בעצמה (בלוק המייצג) - מוצגות כפי שייכתבו. */
.f-inklabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink);
  font-family: "Form6101Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: calc(var(--scale) * var(--fs) * 1px);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* אזור חתימה - נשאר ריק תמיד, ומסומן כדי שיהיה ברור שזו החלטה ולא תקלה. */
.f-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #b9c6d1;
  border-radius: 3px;
  background: rgb(0 0 0 / 2%);
  color: var(--muted);
  font-size: calc(var(--scale) * 6px);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

/* סימון רלוונטיות לפי המטרה שנבחרה - הדגשה בלבד, בלי חסימה. */
.is-relevant.f-text, .is-relevant.f-digits { background: rgb(11 127 212 / 14%); }
.is-relevant.f-mark .f-mark-x { background: rgb(11 127 212 / 20%); }
.is-secondary.f-text, .is-secondary.f-digits { background: rgb(11 127 212 / 3%); }
.is-secondary.f-mark .f-mark-x { background: rgb(11 127 212 / 5%); }

.has-issue { box-shadow: 0 0 0 2px var(--danger) !important; }
.is-hidden { display: none !important; }

/* ------------------------------------------------------ רמז לשדה פעיל */

.field-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field-hint-text { flex: 1; min-width: 0; font-size: 0.9rem; }
.field-hint-label { display: block; }
.field-hint-help { color: var(--muted); font-size: 0.85rem; }

.privacy-note { margin: 16px 0 0; font-size: 0.88rem; color: var(--muted); max-width: 80ch; }

/* ------------------------------------------------- תצוגה מקדימה */

.preview-dialog {
  width: min(96vw, 940px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.preview-dialog::backdrop { background: rgb(16 26 34 / 60%); }
.preview-dialog { display: none; }
.preview-dialog[open] { display: flex; flex-direction: column; }

.preview-head { padding: 16px 20px 8px; }
.preview-head h2 { margin: 0 0 4px; }
.preview-head p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.preview-scroll { flex: 1; overflow: auto; padding: 12px 20px 20px; background: #e9edf0; }
.preview-page { margin: 0 0 18px; }
.preview-page figcaption {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.preview-page canvas { display: block; margin: 0 auto; box-shadow: 0 2px 12px rgb(0 0 0 / 18%); }

.preview-notes {
  padding: 10px 20px;
  background: #fff7e6;
  border-top: 1px solid #f0dfb8;
  font-size: 0.88rem;
}
.preview-notes ul { margin: 6px 0 0; padding-inline-start: 20px; }

.preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.is-busy { cursor: progress; }

/* ---------------------------------------------- מיתוג במסכים צרים */

@media (max-width: 560px) {
  .site-header { padding: 12px 0 16px; }
  .brand-bar { padding-bottom: 10px; margin-bottom: 12px; gap: 8px 10px; }
  .brand { gap: 9px; }
  .brand-logo { height: 42px; }
  .brand-name { font-size: 0.98rem; }
  .brand-role { font-size: 0.8rem; }
  .brand-phone { padding: 8px 11px; font-size: 0.92rem; gap: 6px; }
  .brand-phone-icon { width: 15px; height: 15px; }
  .consent { padding: 11px 13px; }
  .consent-note { font-size: 0.86rem; }
  .consent-label { font-size: 0.88rem; }
  .page-tab { font-size: 0.8rem; padding: 8px 10px; flex: 1 1 auto; }
}

/* במסכים הצרים ביותר הכול עדיין נכנס לשורה אחת אחרי הקטנה קלה. */
@media (max-width: 359px) {
  .brand-logo { height: 36px; }
  .brand { gap: 8px; }
  .brand-kicker { font-size: 0.66rem; }
  .brand-name { font-size: 0.92rem; }
  .brand-role { font-size: 0.76rem; }
  .brand-phone { padding: 8px 9px; font-size: 0.86rem; gap: 5px; }
  .brand-phone-icon { width: 14px; height: 14px; }
}

/* ---------------------------------------------------------- נייד */

@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }

  .field-index-panel { position: static; max-height: none; order: 2; }
  .field-index-panel h3 { font-size: 0.98rem; }

  .stage-viewport { max-height: 68vh; }

  /* סרגל הכלים נשאר זמין בראש המסך, אבל בשתי שורות בלבד כדי לא לגזול
     גובה מאזור הטופס עצמו. */
  .toolbar {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg);
    gap: 8px;
    padding: 8px 0 10px;
  }
  .toolbar-zoom { margin-inline-start: 0; }
  .toolbar-group { flex: 1 1 auto; }
  .toolbar-group:first-child { flex: 1 1 100%; }
  /* רק כפתורי סרגל הכלים נמתחים. כפתורי החיצים שבסרגל הניווט חייבים
     להישאר בגודלם, אחרת הם דוחסים את שם השדה. */
  .toolbar .btn { flex: 1 1 auto; font-size: 0.88rem; padding: 8px 10px; }
  .toolbar-zoom .btn { flex: 0 0 auto; }
  .field-hint .btn-icon { flex: 0 0 auto; }

  /* סרגל הניווט בין השדות נצמד לתחתית - זמין תוך כדי הקלדה. */
  .field-hint {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: 8px;
    box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}