/* torim — הפאנל של בעל המקצוע.
 *
 * ⚠️ כל ערך כאן מפנה למשתנה מ-``tokens.css``. אין צבע, אין צל.
 *
 * ═══ המסך שנפתח בבוקר ═══════════════════════════════════════════
 *
 * ספר פותח את הטלפון בין לקוח ללקוח כדי לראות **מי הבא**. לכן מסך
 * הבית הוא היומן של היום — לא סטטיסטיקות, ולא תפריט. המספרים חיים
 * שורה אחת מעל, קטנים, כי הם נכונים ולא דחופים.
 *
 * ═══ ניווט תחתון במובייל ════════════════════════════════════════
 *
 * האגודל מגיע לתחתית המסך, לא לראשו. תפריט עליון בטלפון פירושו
 * לתפוס את המכשיר מחדש בכל מעבר — עם מספריים ביד השנייה.
 */

/* ═══ למה סרגל צד ולא תפריט עליון ═════════════════════════════════
 *
 * ☠️ **מה שהיה כאן קודם:** שנים-עשר קישורים בשורה אופקית אחת, בתוך
 *    ‎960px. הם נשברו לשתי שורות, "הגדרות" נחת מתחת ל"דשבורד", ומי
 *    שחיפש מסך סרק את שתי השורות מההתחלה בכל פעם. תפריט שצריך לקרוא
 *    אותו כדי למצוא בו פריט אינו ניווט — הוא רשימה.
 *
 * ‎**סרגל צד אנכי פותר את זה בלי שום תחכום:** הפריטים אחד מתחת לשני,
 * במקום קבוע, ומקובצים לפי מה שהם עושים. העין קופצת לקבוצה ואז לפריט,
 * במקום לסרוק שנים-עשר פריטים שווי-משקל.
 *
 * במובייל אין סרגל צד — יש הניווט התחתון, שנשאר כמו שהיה. האגודל
 * מגיע לתחתית המסך, לא לצידו.
 */

/* ── סרגל עליון ──────────────────────────────────────────────── */
.app-bar {
  --focus-ring: var(--paper);
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.app-bar__inner {
  display: flex; align-items: center; gap: var(--gap);
  max-width: var(--app-max); margin: 0 auto; padding: 0.6rem var(--gap);
  min-height: 56px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 0.15rem;
  font-weight: 800; font-size: var(--text-lg); color: var(--accent); text-decoration: none;
}
.brand__mark { color: var(--gold); font-weight: 800; }

/* ── שלד: סרגל צד + תוכן ─────────────────────────────────────── */
.shell { max-width: var(--app-max); margin: 0 auto; }

@media (min-width: 60rem) {
  .shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
    padding-inline: var(--gap);
  }
  /* ‎``minmax(0, 1fr)`` ולא ``1fr``: בלעדיו טבלה רחבה מרחיבה את העמודה
   * מעבר למסך, והדף כולו גולש לרוחב במקום שהטבלה תגלול בתוך עצמה. */
  .shell > .page { max-width: none; padding-inline: 0; }
}

.rail { display: none; --focus-ring: var(--paper); }

@media (min-width: 60rem) {
  .rail {
    display: block; position: sticky; top: calc(56px + var(--gap));
    padding: var(--gap) 0;
  }
}
/* קבוצה בסרגל: תווית קטנה ורכה, ואז הפריטים צמודים לה. */
.rail__group + .rail__group { margin-top: var(--s5); }
.rail__label {
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink-faint); padding-inline: 0.7rem; margin-bottom: var(--s2);
}
.rail a {
  display: block; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none;
  font-weight: 600; font-size: var(--text-sm);
}
.rail a:hover { background: var(--surface-2); color: var(--ink); }
/* ★ הפריט הפעיל מסומן **גם בקו וגם בצבע**. גוון לבדו נעלם בצילום
 *   מסך, בשמש, ואצל מי שאינו מבחין בו — והמשתמש מאבד את התשובה
 *   לשאלה "איפה אני". */
.rail a[aria-current='page'] {
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
  border-inline-start: 3px solid var(--accent);
}

/* התפריט העליון נשאר רק כשאין מקום לסרגל — בין מובייל לדסקטופ. */
.top-nav { display: none; gap: 0.25rem; flex: 1; }
.top-nav a {
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: var(--text-sm);
}
.top-nav a:hover { background: var(--surface-2); color: var(--ink); }
.top-nav a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }

@media (min-width: 48rem) and (max-width: 59.99rem) {
  .top-nav { display: flex; flex-wrap: wrap; }
}

/* ── ניווט תחתון (מובייל) ────────────────────────────────────── */
.bottom-nav {
  /* ★ קרקע נייבי → טבעת לבנה. 17.09:1 מול 2.06 של המבטא. */
  --focus-ring: var(--paper);
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1; min-height: var(--touch);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; padding: 0.45rem 0.2rem;
  color: var(--ink-faint); text-decoration: none;
  font-size: var(--text-xs); font-weight: 600;
}
.bottom-nav a[aria-current='page'] { color: var(--accent); }
/* ‎הקו העליון מסמן את הפריט הפעיל בלי להסתמך על צבע בלבד — מי שאינו
 * מבחין בגוונים עדיין רואה איפה הוא. */
.bottom-nav a[aria-current='page'] .bottom-nav__icon { border-top: 3px solid var(--accent); }
.bottom-nav__icon {
  font-size: 1.25rem; line-height: 1; padding-top: 0.25rem; border-top: 3px solid transparent;
}
/* מרווח בתחתית הדף כדי שהניווט לא יכסה תוכן. */
.has-bottom-nav { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

@media (min-width: 48rem) {
  .bottom-nav { display: none; }
  .has-bottom-nav { padding-bottom: var(--gap-lg); }
}

/* ── כותרת מסך ───────────────────────────────────────────────── */
.screen-head { display: flex; justify-content: space-between; align-items: flex-start;
               gap: var(--gap); flex-wrap: wrap; }
.screen-head h1 { margin: 0; }
.screen-head__sub { color: var(--ink-soft); font-size: var(--text-sm); margin: var(--s1) 0 0; }
/* הכפתורים נצמדים לקצה גם כשהכותרת קצרה, ואינם קופצים בין מסכים. */
.screen-head .row { margin-inline-start: auto; }

/* ── שורת מספרים ─────────────────────────────────────────────── */
/* ☠️ קודם: ``minmax(7.5rem)`` ושישה אריחים. ב-960px כל אריח יצא 150px,
 *    והמילים "פגישות החודש" ו"בלי פגישה 14 יום" נשברו לשתי שורות מעל
 *    ספרה בודדת. אריח שהכותרת שלו ארוכה מהמספר אינו אריח מספר.
 *
 * ‎**11rem** נותן לכותרת שורה אחת. שילוב עם ``auto-fit`` פירושו שגם
 * ארבעה אריחים ימלאו את הרוחב יפה, ושישה יירדו לשתי שורות מסודרות
 * במקום להצטופף לאחת. */
.stats {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s1);
}
/* ★ כותרת האריח **חייבת** צבע דיו: הרקע כאן הוא ``--surface``, ובלי
 * הכלל הזה נולד לבן-על-לבן. יש טסט שגוזר את הצמדים מה-CSS. */
.stat__label { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; }
/* המספר הוא המידע, ולכן הוא הגדול בכרטיס — ובמשקל שמבדיל אותו מטקסט. */
.stat__value { font-size: var(--text-num); font-weight: 800; line-height: 1.05; color: var(--ink); }
.stat__note { font-size: var(--text-xs); color: var(--ink-faint); }

/* ── היומן: כרטיס תור ────────────────────────────────────────── */
.agenda { display: grid; gap: 0.6rem; }
.appt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.85rem 0.9rem;
}
/* ‎השעה היא המידע — היא הגדולה ביותר בכרטיס, ובמשקל 800. */
.appt__time { font-size: var(--text-lg); font-weight: 800; line-height: 1.1; }
.appt__until { font-size: var(--text-xs); color: var(--ink-faint); }
.appt__who { font-weight: 700; }
.appt__what { font-size: var(--text-sm); color: var(--ink-soft); }
.appt__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
/* נקודת מצב, כמו בדוגמה. **לצד תג טקסט ולא במקומו** — נקודה צבעונית
 * לבדה אינה מידע למי שאינו מבחין בגוונים. */
.appt__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); }

/* פעולות מהירות בתוך כרטיס: חיוג, וואטסאפ, סימון הגעה */
.appt__actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch);
  border-radius: var(--radius-pill); border: 1.5px solid var(--rule-control);
  background: var(--surface); color: var(--ink-soft);
  font-size: 1.1rem; text-decoration: none; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent); }

/* קו מצב בקצה הכרטיס — מבט חטוף, בלי לקרוא */
.appt--pending { border-inline-start: 4px solid var(--warn); }
.appt--cancelled { border-inline-start: 4px solid var(--danger); opacity: 0.7; }
.appt--done { border-inline-start: 4px solid var(--rule-strong); }
.appt--confirmed { border-inline-start: 4px solid var(--ok); }

/* ── מסננים ──────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.filters .field { width: auto; min-width: 8rem; flex: 1; }

/* בורר מקטעים (עתידי/עבר/הכל) */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-pill);
       padding: 0.2rem; gap: 0.2rem; }
.seg a {
  padding: 0.45rem 0.9rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); text-decoration: none;
}
.seg a[aria-current='true'] { background: var(--surface); color: var(--accent); }

/* ── רשימת לקוחות ────────────────────────────────────────────── */
.person {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.person:last-child { border-bottom: 0; }
.person:hover { background: var(--surface-2); }
.person__name { font-weight: 700; }
.person__meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* ── כפתור פעולה צף ──────────────────────────────────────────── */
.fab {
  position: fixed; inset-inline-end: var(--gap);
  bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 25;
  min-width: 3.5rem; min-height: 3.5rem; padding: 0 1.1rem;
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; text-decoration: none;
}
@media (min-width: 48rem) { .fab { display: none; } }

/* ── טבלה שהופכת לכרטיסים במובייל ────────────────────────────── */
@media (max-width: 47.99rem) {
  .table-cards thead { display: none; }
  .table-cards tr {
    display: block; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 0.7rem 0.8rem; margin-bottom: 0.6rem;
  }
  .table-cards td { display: flex; justify-content: space-between; gap: var(--gap);
                    border: 0; padding: 0.2rem 0; }
  /* ‎``data-label`` נכתב בתבנית: בלעדיו הערך במובייל מופיע בלי הכותרת
   * שלו, ו"0501234567" בשורה נפרדת אינו אומר דבר. */
  .table-cards td::before {
    content: attr(data-label); color: var(--ink-soft); font-size: var(--text-sm);
    font-weight: 600;
  }
}

/* ── הקישור האישי ────────────────────────────────────────────── */
/* ‎``dir=ltr`` על השדה: כתובת אתר בתוך ממשק RTL נשברת ויזואלית —
 * הסלאש האחרון קופץ לתחילת השורה, והמשתמש חושב שהעתיק לא נכון. */
.share-url {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--text-sm); text-align: start;
}
.share-actions { display: grid; gap: 0.5rem; }
@media (min-width: 30rem) { .share-actions { grid-auto-flow: column; } }

/* ה-QR מוגבל ברוחב ומרוכז. הריפוד הלבן מסביבו אינו קישוט: סורק
 * דורש "אזור שקט" בשוליים, ובלעדיו קוד שמודבק על רקע כהה לא נקרא. */
.qr {
  display: flex; justify-content: center;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--gap);
}
.qr svg { width: 100%; max-width: 15rem; height: auto; display: block; }

/* רצועת הקישור בדשבורד */
.share-strip { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.share-strip__url {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--text-sm); color: var(--accent); font-weight: 600;
  overflow-wrap: anywhere;
}

/* ── מפריד "או" בין שני מסלולי הכניסה ────────────────────────── */
.or-line {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--ink-faint); font-size: var(--text-sm); margin: 0.25rem 0;
}
.or-line::before, .or-line::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}

/* ── כפתור גוגל ──────────────────────────────────────────────── */
/* לבן עם מסגרת, לפי הנחיות המותג של גוגל. הלוגו הוא SVG בתוך הדף
 * ולא מ-gstatic — חוק ברזל 10. */
.google-form { margin: 0; }
.btn--google { background: var(--surface); color: var(--ink); }
.btn--google:hover { background: var(--surface-2); }
.google-mark { flex: 0 0 auto; }

/* ═══ תיקוני ביקורת — 13/08/2026 ═══════════════════════════════════ */

/* ☠️ **שם העסק דחף את כל הדף לרוחב ב-360px.**
 *    ‎``.nowrap`` על העוטף יורש אל הטקסט, ופריט flex אינו מתכווץ מתחת
 *    ל-min-content — כלומר "מספרת אבי — סניף רמת גן" הרחיב את הסרגל
 *    מעבר למסך, והגלילה האופקית הייתה של **המסמך כולו**. */
.app-bar__biz {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-xs); color: var(--ink-faint);
}

/* ☠️ שם ומטא־נתונים נדחסו לשורה אחת: "אבי כהן חסום 050-1234567".
 *    ‎``<span>`` בלי ``display:block`` אינו יורד שורה, וב-360px הטלפון
 *    נשבר באמצע השם. */
.person__name, .person__meta { display: block; }
.person__meta { overflow-wrap: anywhere; }

/* ☠️ ה-FAB כיסה את כפתורי הפעולה של השורה האחרונה.
 *    ‎``--has-fab`` שמור למסכים שמגדירים אותו — הוספת המרווח לכולם
 *    הייתה משאירה חור לבן בתחתית כל מסך אחר. */
.has-bottom-nav.has-fab { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) { .has-bottom-nav.has-fab { padding-bottom: var(--gap-lg); } }

/* ☠️ ‎``--small`` תועד כחריג "לשורות טבלה בדסקטופ בלבד", ובפועל הוא
 *    הכפתור הראשי בניווט היום, בשלושת כפתורי התוצאה וביציאה. במגע
 *    הוא חוזר ל-48px; הריפוד הצר נשאר. */
@media (max-width: 47.99rem) { .btn--small { min-height: var(--touch); } }

/* ☠️ הבורר סימן את הפעיל בהפרש 1.14:1 — מתחת לסף התפיסה.
 *    אותו כלל שנכתב ל-``.rail`` ול-``.bottom-nav``, ונשכח כאן. */
.seg a[aria-current='true'] { border: 1.5px solid var(--accent); font-weight: 800; }

/* ☠️ ‎``.tiles``/``.tile`` שימשו ב-subscription.html ולא הוגדרו בשום
 *    גיליון — המכסות רונדרו כטקסט גוף חשוף. הרכיב הנכון כבר קיים
 *    (``.stats``/``.stat``), ולכן זה כינוי ולא עותק. */
.tiles { display: grid; gap: var(--s3);
         grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--rule);
        border-radius: var(--radius-sm); padding: var(--s4);
        display: flex; flex-direction: column; gap: var(--s1); }
.tile h3 { font-size: var(--text-xs); font-weight: 700; color: var(--ink-soft); margin: 0; }
.tile__value { font-size: var(--text-num); font-weight: 800; line-height: 1.05; color: var(--ink); }
.tile__note { font-size: var(--text-xs); color: var(--ink-faint); }

/* ‎``.list-empty`` הוסר ב-17/08/2026. הוא היה פיגום זמני: שש
 * ‎תבניות השתמשו בו והוא לא היה מוגדר בשום גיליון, ולכן הן רונדרו
 * ‎כפסקה חשופה. כולן הומרו ל-``.empty`` המלא — כותרת, הסבר, ופעולה.
 *
 * ★ ``test_every_class_exists`` הוא שגילה אותו מלכתחילה. */

/* ‎``.inline-form`` עבד רק במקרה, כי ההורה היה flex. */
.inline-form { display: inline; margin: 0; }

/* ☠️ תא בטבלת-כרטיסים לא נשבר על מחרוזת ארוכה (דוא"ל, נושא פנייה),
 *    והשורה גלשה לרוחב במקום שהתווית והערך יחלקו שורה. */
@media (max-width: 47.99rem) {
  .table-cards td { flex-wrap: wrap; min-width: 0; }
  .table-cards td > * { overflow-wrap: anywhere; min-width: 0; }
}

/* ☠️ שבעה אריחים ב-360px = טור בגובה 630px לפני התוכן. */
@media (max-width: 30rem) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s3); }
  .stat__value { font-size: var(--text-xl); }
}

/* ☠️ שלוש מחלקות שהיו בתבניות ולא בשום גיליון — נמצאו על ידי
 *    ‎``test_every_class_exists``, שנכתב אחרי ש-``.tiles`` התגלה.
 *    הן לא נראו כשגיאה: הדף נטען, הטקסט שם, אין שגיאה בקונסולה. */
.share-card { background: var(--surface); border: 1px solid var(--rule);
              border-radius: var(--radius); padding: var(--s5); }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
 * ★★ הפאנל מקבל את הזהות של המותג — 14/08/2026
 *
 * הבעיה שהבעלים תיאר ("פשוט מדי וגנרי") לא הייתה חוסר קישוט. הפלטה
 * **כבר הייתה כתובה** — נייבי עמוק, זהב, וטקסט מאומת עליהם — ושימשה
 * את דף הנחיתה בלבד. הפאנל צויר כולו בלבן על לבן-כמעט, עם מסגרות
 * דקות, ולכן נראה כמו ברירת מחדל של ספרייה ולא כמו מוצר.
 *
 * ⚠️ **וזה נעשה בלי צל אחד.** הכלל "הדף מודפס, לא מואר" עומד. מה
 *    שמייצר נוכחות כאן: **שטח צבע גדול** (סרגל הצד), **קו זהב** ככלי
 *    היררכיה, וניגוד בין אזור כהה לאזור נייר. צל היה מוסיף אשליית
 *    אור; שטח צבע מוסיף מבנה.
 *
 * הצמדים שבשימוש כבר נמדדו ומתועדים ב-``tokens.css``:
 *   לבן על ‎--navy-deep = 17.9:1 · ‎--on-navy-soft = 11.6:1 · זהב = 11.4:1
 * ═══════════════════════════════════════════════════════════════════ */

/* ── הסרגל העליון: נייבי, עם קו זהב שמפריד ולא צל ────────────── */
.app-bar {
  background: var(--navy-deep);
  border-bottom: 0;
  /* ★ הקו הזהוב הוא **קו שיער**, לא טקסט — בדיוק מה שהפלטה מתירה.
   *   הוא מה שמפריד בין הסרגל לתוכן, במקום צל. */
  border-block-end: 2px solid var(--gold);
}
.brand { color: var(--on-navy); }
.brand__mark { color: var(--gold); }
.app-bar__biz { color: var(--on-navy-soft); }
.app-bar .btn--quiet {
  background: transparent; color: var(--on-navy-soft);
  border-color: var(--on-navy-edge);
}
.app-bar .btn--quiet:hover { background: var(--on-navy-hover); color: var(--on-navy); }
.app-bar .top-nav a { color: var(--on-navy-soft); }
.app-bar .top-nav a:hover { background: var(--on-navy-hover); color: var(--on-navy); }
.app-bar .top-nav a[aria-current='page'] { background: var(--navy-mid); color: var(--on-navy); }

/* ── סרגל הצד: לוח נייבי, ולא רשימת קישורים על נייר ──────────── */
@media (min-width: 60rem) {
  .rail {
    background: var(--navy-deep);
    border-radius: var(--radius);
    padding: var(--s5) var(--s3);
    /* ★ **זה מה שמייצר את התחושה שזו אפליקציה.** שטח צבע רצוף בצד
     *   אחד נותן לדף עוגן ומבנה, ומחליף את מה שאנשים מנסים להשיג
     *   בצל מתחת לכרטיס. */
  }
}
.rail__label {
  color: var(--gold);
  /* קו זהב דק מתחת לתווית הקבוצה — מתאר, לא טקסט צבעוני על נייר. */
  border-block-end: 1px solid var(--gold-hair);
  padding-block-end: var(--s1);
  margin-block-end: var(--s2);
}
.rail a { color: var(--on-navy-soft); }
.rail a:hover { background: var(--navy-mid); color: var(--on-navy); }
.rail a[aria-current='page'] {
  background: var(--navy-mid); color: var(--on-navy);
  border-inline-start: 3px solid var(--gold);
}

/* ── הניווט התחתון במובייל, באותה שפה ────────────────────────── */
.bottom-nav { background: var(--navy-deep); border-top: 2px solid var(--gold); }
.bottom-nav a { color: var(--on-navy-soft); }
.bottom-nav a[aria-current='page'] { color: var(--gold); }
.bottom-nav a[aria-current='page'] .bottom-nav__icon { border-top-color: var(--gold); }

/* ── כותרת המסך: נוכחות טיפוגרפית, וקו זהב ──────────────────── */
.screen-head {
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--rule);
  position: relative;
}
/* ★ קטע זהב קצר מתחת לכותרת. **מתאר ולא טקסט** — הזהב על נייר נכשל
 *   כטקסט (4.21) ועובר בקלות כקו, וזו בדיוק ההבחנה שהפלטה עושה. */
.screen-head::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: 3.5rem; height: 3px; background: var(--gold); border-radius: 2px;
}
.screen-head h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
@media (min-width: 48rem) { .screen-head h1 { font-size: 2.25rem; } }

/* ── כרטיסים: כותרת על רצועה, במקום עוד טקסט על לבן ─────────── */
.card > h2:first-child,
.card > h3:first-child {
  padding-block-end: var(--s3);
  border-block-end: 1px solid var(--rule);
}

/* ── אריחי מספרים: קו נייבי בקצה, כדי שיקראו כיחידה ────────── */
.stat { border-inline-start: 3px solid var(--accent); }
.stat__value { color: var(--accent-dark); }

/* ── טפסים: שתי עמודות בדסקטופ ────────────────────────────────
 *
 * ☠️ מסך ההגדרות היה ``card narrow`` — כלומר **480px** בתוך עמודה של
 *    אלף. שישה שדות זה מתחת לזה, טור צר באמצע מסך ריק, וגלילה ארוכה
 *    למשהו שנכנס בקלות בחצי מסך.
 *
 * ‎``narrow`` נכון לטקסט קריאה (שורה של 30rem היא אורך שורה נוח).
 * ‎**הוא שגוי לטופס**, שאינו נקרא אלא ממולא.
 */
.form-grid { display: grid; gap: var(--s4); }
@media (min-width: 48rem) {
  .form-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  /* שדות שצריכים את כל הרוחב: טקסט חופשי, תיבות סימון, וכפתורים. */
  .form-grid > .form-row--wide,
  .form-grid > .form-actions { grid-column: 1 / -1; }
  /* ‎``.form-row + .form-row`` מוסיף מרווח עליון שמפר את יישור הרשת. */
  .form-grid .form-row + .form-row { margin-top: 0; }
}
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ═══ 3. שבירת מונוטוניות הכרטיסים ═════════════════════════════════
 *
 * ☠️ ‎``reports`` — 4 כרטיסים זהים. ``platform_whatsapp`` — 4.
 *    ‎``share`` — 3. כשכל סעיף עטוף בקופסה לבנה **זהה**, שום דבר אינו
 *    חשוב יותר מדבר אחר, והדף נקרא כמו רשימת קבלות. עיצוב בוחר מוקד
 *    אחד ומכפיף אליו את השאר; תבנית עוטפת הכל באותו דבר.
 *
 * ‎``--lead`` הוא המוקד: רקע נייבי, טקסט לבן. אחד למסך, ולא יותר.
 * ‎``--plain`` הוא ההפך: סעיף בלי קופסה בכלל.
 */
.card--lead {
  --focus-ring: var(--paper);
  background: var(--navy-deep); border-color: var(--navy-deep);
  color: var(--on-navy);
}
.card--lead h2, .card--lead h3 { color: var(--on-navy); border-block-end-color: var(--navy-mid); }
.card--lead p, .card--lead li { color: var(--on-navy-soft); }
.card--lead .tiny, .card--lead .micro { color: var(--on-navy-soft); }
.card--lead a { color: var(--gold); }
.card--lead .btn--ghost { color: var(--gold); border-color: var(--gold); }
.card--lead .btn--ghost:hover { background: var(--on-navy-hover); }

/* סעיף בלי קופסה — ``.eyebrow`` נושא את הכותרת במקום h2 מלא. */
.card--plain > h2:first-child,
.card--plain > h3:first-child { border-block-end: 0; padding-block-end: 0; }

/* ═══ 4. מסכי כניסה — מפוצלים, לא ממורכזים ════════════════════════
 *
 * ☠️ תשעה מסכים בנויים אווטאר → כותרת → טופס, במרכז. זו ברירת המחדל
 *    של כל תבנית שנוצרה אי פעם, והעין מזהה אותה.
 *
 * הפיצול נותן שני דברים שהמרכוז אינו נותן: **מקום למסר** (מה המוצר
 * עושה, ליד הטופס ולא במקומו), ו**א-סימטריה** — הדבר היחיד שמבדיל
 * פריסה שמישהו תכנן מפריסה שנוצרה.
 */
.auth { min-height: 100dvh; display: grid; }
@media (min-width: 56rem) {
  .auth { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
/* הצד הכהה — המסר, ולא עוד טופס. במובייל הוא רצועה קצרה מעל. */
.auth__aside {
  background: var(--navy-deep); color: var(--on-navy);
  padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s3);
  border-block-end: 2px solid var(--gold);
}
@media (min-width: 56rem) {
  .auth__aside { padding: var(--s7) var(--s6); border-block-end: 0;
                 border-inline-start: 2px solid var(--gold); }
}
.auth__brand { font-size: var(--text-lg); font-weight: 800; color: var(--on-navy); }
.auth__brand .brand__mark { color: var(--gold); }
.auth__title { font-size: 2rem; line-height: 1.15; margin: 0; color: var(--on-navy); }
.auth__lead { color: var(--on-navy-soft); margin: 0; max-width: 26rem; }
.auth__points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2);
                color: var(--on-navy-soft); font-size: var(--text-sm); }
.auth__points li { display: flex; align-items: center; gap: var(--s2); }
.auth__points .icon { color: var(--gold); }

/* הצד הבהיר — הטופס בלבד. */
.auth__main {
  padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; justify-content: center;
}
.auth__form { width: 100%; max-width: 24rem; margin-inline: auto; }

/* ★ תיבת סימון עם התווית שלה בשורה אחת, ויעד מגע מלא.
 *   ‎``label { display: block }`` הגלובלי דוחף את התווית לשורה נפרדת
 *   ומשאיר תיבה חשופה של 13px מתחתיה — קטן מדי לאצבע, ולא ברור
 *   למה הוא שייך. */
.check {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--touch); font-weight: 600; margin: 0;
}
.check input[type='checkbox'] { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }