/* ============================================================
   מערכת העיצוב של תאוריה.IL: מקור אחד לאמת.
   נטען אחרון, אחרי styles.css, journey.css ו-product.css, ומכריע.
   עד עכשיו היו באתר 36 עיגולי פינות, 115 גדלי טקסט, 42 צללים ו-500 צבעים,
   כי כל מסך הגדיר לעצמו. מכאן: כל רכיב לוקח ערכים רק מכאן.
   כלל: מסך חדש לא מגדיר צבע, פינה, צל או גודל טקסט משלו. רק משתנים מכאן.
   ============================================================ */

:root {
  /* צבעים: כחול כמותג, ניטרליים כחלחלים (בלי הירוק שהתערבב קודם) */
  --ink: #14223b;
  --ink-soft: #5b6b86;
  --paper: #f3f6fb;
  --card: #ffffff;
  --line: #e2e7f0;
  --surface-soft: #eef2f8;
  --road: #1b5fd9;
  --road-deep: #14418f;
  --sign: #ffc93c;
  --go: #1f7a4d;
  --stop: #b54336;
  --brand-tint: #e8eefb;

  /* סולם טקסט: 7 גדלים בלבד */
  --fs-xs: calc(12.5px * var(--font-scale, 1));
  --fs-sm: calc(14px * var(--font-scale, 1));
  --fs-base: calc(16px * var(--font-scale, 1));
  --fs-md: calc(18px * var(--font-scale, 1));
  --fs-lg: calc(22px * var(--font-scale, 1));
  --fs-xl: calc(28px * var(--font-scale, 1));
  --fs-2xl: calc(36px * var(--font-scale, 1));

  /* פינות: 4 בלבד */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --radius: var(--r-lg);

  /* צללים: 2 בלבד */
  --sh-1: 0 1px 2px rgba(20, 34, 59, .04), 0 6px 20px rgba(20, 34, 59, .05);
  --sh-2: 0 2px 6px rgba(20, 34, 59, .06), 0 16px 40px rgba(20, 34, 59, .10);
  --shadow: var(--sh-1);

  /* רווחים */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}
:root[data-theme="dark"] {
  --ink: #eef2fb;
  --ink-soft: #a3b0cc;
  --paper: #0d1322;
  --card: #16203a;
  --line: #2a3755;
  --surface-soft: #1c2945;
  --road: #8fb0ff;
  --road-deep: #a6c1ff;
  --brand-tint: #1c2b4a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
}

/* ==================== טקסט ==================== */
body { color: var(--ink); }
.muted, .is-member .muted { color: var(--ink-soft); }
#view h1:not(.hero *), .section-title { font-size: var(--fs-xl); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
#view h2:not(.hero *) { font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; }
#view h3:not(.hero *) { font-size: var(--fs-md); line-height: 1.3; font-weight: 700; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
@media (max-width: 620px) { #view h1:not(.hero *), .section-title { font-size: calc(25px * var(--font-scale, 1)); } }

/* ==================== כפתורים: הגדרה אחת ==================== */
/* כלל: ערך עם !important בקבצים הישנים הוא החלטה מכוונת (מינימום קריאות) ולא מומר */
/* כלל: הרכיב קובע איך כפתור נראה, אף פעם לא אם הוא מוצג (בלי display). קודם
   display כאן חשף כפתורים שמוסתרים עד שצריך אותם, כמו "יציאה ממצב פוקוס" */
.btn {
  align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 22px; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-lg { min-height: 54px; padding: 0 26px; font-size: var(--fs-md); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-primary { background: var(--road); color: #fff; border-color: var(--road); }
.btn-primary:hover { background: var(--road-deep); border-color: var(--road-deep); }
:root[data-theme="dark"] .btn-primary { color: #0d1322; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-soft); border-color: var(--line); }

/* ==================== כרטיסים ומשטחים: הגדרה אחת ==================== */
.card, .app-card, .app-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.app-row { border-radius: var(--r-md); }
.app-row-soft { background: transparent; box-shadow: none; }
.app-step-n, .app-bar { background: var(--brand-tint); }
.app-bar i { background: var(--road); }
.app-hello { color: var(--ink-soft); font-size: var(--fs-sm); }
.app-main h1 { font-size: var(--fs-xl); }

/* ==================== שדות ==================== */
#view input:not([type=checkbox]):not([type=radio]):not([type=range]), #view select, #view textarea,
.modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea {
  min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--ink);
  /* לפחות 16: מתחת לזה ספארי באייפון מזווג את כל הדף בכל לחיצה על שדה (גם כשבוחרים טקסט קטן) */
  font-size: max(16px, var(--fs-base)); padding: 0 14px;
}
#view textarea, .modal textarea { padding: 12px 14px; }
#view input:focus-visible, #view select:focus-visible, #view textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--road) 35%, transparent); outline-offset: 1px; border-color: var(--road); }

/* ==================== קישורים ==================== */
/* קישור כחול רק בתוך טקסט רציף (פסקה, הערה). לא ברשימות: שם כל פריט הוא שורה. כרטיס או שורה שהם
   קישור נשארים בעיצוב שלהם: קודם כלל רחב צבע בכחול גם כרטיסים שלמים */
#view p a:not(.btn), #view small a:not(.btn), #view .muted a:not(.btn) { color: var(--road); text-decoration: none; }
#view p a:not(.btn):hover, #view small a:not(.btn):hover { text-decoration: underline; }
#view .prose a, #view article a, html.a11y-links #view a { text-decoration: underline; }

/* ==================== הכותרת העליונה ==================== */
/* שם המסך ושם המותג משמאל, כפתור חשבון עגול מימין. בלי קו תחתון ובלי חץ "קישור חיצוני" */
/* בלי display: הפס מוסתר לאורחים ובמצב פוקוס, והכללים הקיימים מחליטים מתי הוא מוצג */
.product-topbar { align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); background: var(--card); }
.product-topbar > span:first-child { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.product-wordmark { font-weight: 800; color: var(--road); font-size: var(--fs-base); }
.product-divider { color: var(--line); }
#productScreenName { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.topbar-end { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.topbar-account { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--road-deep); text-decoration: none; flex: none; }
.topbar-account:hover { background: var(--surface-soft); }
.topbar-account svg { width: 20px; height: 20px; }
.lang-pick select { min-height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: var(--fs-sm); padding: 0 12px; }

/* ==================== תיקונים מהסורק ==================== */
/* שני קישורים בשורה: אזור הלחיצה של כל קישור (38 פיקסלים) גבוה מהשורה, והאזורים
   חפפו. בנייד לחיצה על קצה של אחד פתחה את השני. מעכשיו שני קישורים נפרדים עם
   רווח, והמפריד "·" מוסתר (גודל טקסט 0 על השורה, והקישורים בגודל רגיל) */
.focus-more { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; font-size: 0; }
.focus-more a { font-size: var(--fs-sm); }
/* אותיות התשובה בשאלת ההדגמה: שאלה אמיתית שעונים עליה, לא תצוגה מוקטנת */
.demo-option > span:first-child { font-size: var(--fs-xs); }
/* תוויות הסרגל התחתון בנייד: לא קטן מסולם הטקסט */
@media (max-width: 900px) { .is-member .nav a span { font-size: var(--fs-xs); } }
/* בנייד לתלמיד: כפתור "עזרה" לא צף מעל התוכן. העזרה בתפריט "עוד" (#navHelp).
   כפתור הנגישות נשאר: באתר צריך גישה מהירה להתאמות. זה כלל הצגה מכוון למצב, לא לרכיב */
@media (max-width: 900px) { .is-member .fb-fab { visibility: hidden; pointer-events: none; } }