/* ==========================================================================
   TheMap 2.0 — מערכת העיצוב
   מקור-האמת היחיד לכל צבע, גופן, ריווח ורדיוס בפרויקט.
   כלל קבלה: אין ערך hex בקובץ הזה מחוץ לבלוק :root ולבלוק ההדפסה.
   מקור: research/SPEC-DESIGN.md §2.9, בכפוף להכרעות K7–K11 ב-BLUEPRINT.md §1.1
   ========================================================================== */

/* ==========================================================================
   גופנים
   כל משקל מפוצל לעברית וללטינית בנפרד, עם unicode-range. כך הדפדפן מוריד
   רק את מה שהעמוד באמת צריך, ומשקל לטיני שלא בשימוש אינו נטען כלל.
   ‏`swap` מכוון: טקסט קריא מיד עדיף על עמוד ריק.
   ========================================================================== */

@font-face { font-family:'Assistant'; font-style:normal; font-weight:400; font-display:swap;
  src:url('f/assistant-400-he.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:400; font-display:swap;
  src:url('f/assistant-400-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }

@font-face { font-family:'Assistant'; font-style:normal; font-weight:600; font-display:swap;
  src:url('f/assistant-600-he.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:600; font-display:swap;
  src:url('f/assistant-600-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }

@font-face { font-family:'Assistant'; font-style:normal; font-weight:700; font-display:swap;
  src:url('f/assistant-700-he.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Assistant'; font-style:normal; font-weight:700; font-display:swap;
  src:url('f/assistant-700-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }

@font-face { font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:600; font-display:swap;
  src:url('f/frank-600-he.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:600; font-display:swap;
  src:url('f/frank-600-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }

:root{
  color-scheme: dark;

  /* ===== משטחים ===== */
  --bg-canvas:        #0A0D12;
  --bg-surface:       #10141C;
  --bg-raised:        #171C26;
  --bg-overlay:       #1F2532;
  --bg-terminal:      #050810;   /* רקע הקנבס בלבד — כהה מהדף כדי שהמסגרת תיראה */

  /* ===== טקסט — היחס מול --bg-canvas ===== */
  --text-primary:     #E8EDF5;   /* 16.55:1 */
  --text-secondary:   #A9B4C4;   /*  9.28:1 */
  --text-tertiary:    #7E8B9C;   /*  5.62:1 — רק בגודל 24px ומעלה */
  --text-disabled:    #5A6575;   /*  3.29:1 — פטור לפי SC 1.4.3 */
  --text-on-accent:   #181206;   /* 12.18:1 על --heat-lo */

  /* ===== גבולות ===== */
  --border-subtle:      #232A36;  /* דקורטיבי בלבד */
  --border-default:     #2E3644;  /* דקורטיבי בלבד */
  --border-interactive: #6E7C8F;  /* ברירת מחדל לכל פקד — ≥3.61:1 בכל משטח */
  --border-strong:      #8C97A8;  /* הפרדת מידע */

  /* ===== מותג ===== */
  --heat:      #FFB340;   /* צבע-האות היחיד */
  --heat-lo:   #FFC86E;
  --heat-hi:   #E89A2E;
  --gold-edge: #8A6A2A;
  --cyan:      #3EC6EE;
  --focus:     #79C0FF;

  /* ===== שוק ===== */
  --mkt-up:    #3DD68C;
  --mkt-down:  #FF5C5C;
  --mkt-flat:  #8C97A8;
  --cvd-up:    #5AA9FF;
  --cvd-down:  #FFA033;

  /* ===== טינטים ===== */
  --tint-up-10:#0F211E; --tint-up-16:#122D26; --tint-up-22:#15392D;
  --tint-dn-10:#231519; --tint-dn-16:#311A1E; --tint-dn-22:#401E22;
  --tint-ht-10:#1A160B; --tint-ht-16:#241E0D;
  --ink-good:  #C2ECDA;
  --ink-risk:  #F2C6D1;
  --ink-note:  #FFD9A8;

  /* ===== היטמאפ: inferno — ברירת מחדל, L* מונוטוני ===== */
  --heat-00:#000004; --heat-10:#160B39; --heat-20:#420A68;
  --heat-30:#6A176E; --heat-40:#932667; --heat-50:#BC3754;
  --heat-60:#DD513A; --heat-70:#F37819; --heat-80:#FCA50A;
  --heat-90:#F6D746; --heat-100:#FCFFA4;

  /* ===== היטמאפ: viridis — ידידותי לעיוורון-צבעים ===== */
  --vir-00:#440154; --vir-20:#414487; --vir-40:#2A788E;
  --vir-60:#22A884; --vir-80:#7AD151; --vir-100:#FDE725;

  /* ===== היטמאפ: cividis — עיוורון-צבעים מלא ===== */
  --civ-00:#00224E; --civ-25:#4F576C; --civ-50:#7D7C78;
  --civ-75:#C8B866; --civ-100:#FEE838;

  /* ===== הדפסה ותעודה ===== */
  --print-ink:#132030; --print-body:#33414E; --print-muted:#5C7387;
  --print-rule:#D8DEE6; --print-thead:#F0F3F7; --print-note:#FDF6E8;
  --cert-frame:#B98F2E; --cert-name:#8A5A14;

  /* ===== טיפוגרפיה ===== */
  --font-disp: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --font-ui:   'Assistant', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
  --font-num:  'TMNum', 'IBM Plex Mono', ui-monospace, monospace;

  --fs-2xs:  0.75rem;
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   clamp(1.5rem, 3vw, 2.25rem);
  --fs-2xl:  clamp(2.1rem, 4.8vw, 3.4rem);
  --fs-3xl:  clamp(2.6rem, 6vw, 4.2rem);

  /* עברית צריכה שורה גבוהה יותר מלטינית: אין בה אותיות עולות ויורדות שמפרידות
     בין השורות, ולכן טקסט צפוף נקרא כגוש. */
  --lh-tight:1.28; --lh-body:1.75; --lh-lead:1.85; --lh-num:1.35;

  /* ===== ריווח — סקאלת 4 ===== */
  --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ===== רדיוסים ===== */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* ===== צללים =====
     גוונים כחלחלים ולא שחור טהור. צל שחור על משטח כחלחל נראה כמו חור
     שנחתך בדף; צל שנושא את גוון הרקע נראה כמו אור שחסר. */
  --sh-hair:  inset 0 1px 0 rgba(255,255,255,.035);
  --sh-1:     0 2px 8px  rgba(3,6,14,.55);
  --sh-2:     0 10px 30px rgba(3,6,14,.62);
  --sh-3:     0 26px 70px rgba(3,6,14,.7);
  --sh-accent:0 6px 22px rgba(255,179,64,.28);

  /* ===== תנועה ===== */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  /* ===== פריסה ===== */
  /* שורת-קריאה בעברית קצרה מזו שבלטינית. 68 תווים נראה סביר על הנייר ומרגיש
     כמו קיר על המסך, כי המילה העברית הממוצעת ארוכה יותר. */
  --measure: 54ch;
  /* רוחב-החריגה. כותרות, ציטוטים ומפות חורגים מעמודת-הקריאה החוצה, וזה מה
     שנותן לעמוד קצה שבור במקום עמוד ישר שנקרא כמו תבנית. */
  --measure-wide: 74ch;
  --rail-w: 264px;      /* תוכן-עניינים */
  --bar-h: 56px;        /* סרגל עליון */
}

/* עיוורון-צבעים — מתג גלובלי, לא הגדרה קבורה בתוך רכיב */
[data-cvd="on"]{ --mkt-up:var(--cvd-up); --mkt-down:var(--cvd-down); }

@media (prefers-contrast: more){
  :root{
    --text-secondary:#C8D2E0;
    --text-tertiary: #A9B4C4;
    --border-subtle: #47505F;
    --border-default:#6E7C8F;
    --border-interactive:#A9B4C4;
  }
}

/* ==========================================================================
   בסיס
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg-canvas);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}

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

   שתיהן `pointer-events:none` ומתחת לתוכן. הגרעין מוסתר במצב ניגודיות-גבוהה:
   שם רעש הוא הפרעה, לא מרקם.

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

.atmos::before,
.atmos::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
}

.atmos::before{
  background:
    radial-gradient(115vmax 78vmax at 86% -14%,
      color-mix(in srgb, var(--heat) 10%, transparent), transparent 58%),
    radial-gradient(88vmax 66vmax at -12% 112%,
      color-mix(in srgb, var(--cyan) 7%, transparent), transparent 56%);
}

/* feTurbulence, לא תמונה: כמה מאות בתים, ואינו נשלח בבקשת-רשת נוספת */
.atmos::after{
  opacity:.42; mix-blend-mode:soft-light; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-contrast: more){ .atmos::after{ display:none; } }
@media print{ .atmos::before, .atmos::after{ display:none; } }

/* התוכן חייב לשבת מעל שתי השכבות. מפורש ולא גורף: `dialog` הוא ילד של
   הגוף, ו-`position:relative` עליו היה שובר את המרכוז של חלון מודאלי. */
.atmos > .shell,
.atmos > .wrap,
.atmos > main,
.atmos > header{ position:relative; z-index:1; }

/* ריווח-אותיות שלילי הוא כלי לטיני. בעברית הוא מדביק אותיות שדומות ממילא
   (ב/כ, ד/ר, ה/ח) והופך כותרת לקשה לפענוח. לכן אפס, בכל הגדלים. */
h1,h2,h3{
  font-family:var(--font-disp);
  line-height:var(--lh-tight);
  margin:0 0 var(--sp-4);
  font-weight:600;
  letter-spacing:0;
  text-wrap:balance;
}
h1{ font-size:var(--fs-2xl); }
h2{ font-size:var(--fs-xl); }
h3{ font-size:var(--fs-lg); font-family:var(--font-ui); font-weight:700; }
p{ margin:0 0 var(--sp-5); max-width:var(--measure); text-wrap:pretty; }

a{ color:var(--cyan); text-underline-offset:.22em; text-decoration-thickness:from-font; }
a:hover{ color:var(--heat-lo); }

/* מספרים: תמיד רוחב-טבלאי וכיוון לטיני, גם בתוך פסקה עברית */
.num,[data-num]{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  line-height:var(--lh-num);
  direction:ltr;
  unicode-bidi:isolate;
}

/* מונחים לועזיים בתוך טקסט עברי — בידוד כיווניות, לא רק צבע */
.lat{ direction:ltr; unicode-bidi:isolate; color:var(--cyan); font-size:.95em; }

/* ==========================================================================
   מיקוד — טבעת אחת לכל הממשק, לעולם לא outline:none בלי חלופה
   ========================================================================== */

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute; inset-inline-start:var(--sp-4); top:calc(var(--sp-4) * -4);
  z-index:100; padding:var(--sp-3) var(--sp-4);
  background:var(--bg-overlay); color:var(--text-primary);
  border:1px solid var(--border-interactive); border-radius:var(--r-md);
  transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{ top:var(--sp-4); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   רכיבים
   ========================================================================== */

.btn{
  --btn-bg:var(--bg-raised);
  --btn-fg:var(--text-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:44px; padding:var(--sp-3) var(--sp-5);
  font:inherit; font-weight:600;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--border-interactive); border-radius:var(--r-md);
  box-shadow:var(--sh-hair);
  cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover{ background:var(--bg-overlay); border-color:var(--border-strong); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ color:var(--text-disabled); cursor:not-allowed; transform:none; }

.btn--primary{
  --btn-fg:var(--text-on-accent);
  background:linear-gradient(180deg, var(--heat-lo), var(--heat-hi));
  border-color:var(--heat-hi);
  box-shadow:var(--sh-accent);
}
.btn--primary:hover{
  background:linear-gradient(180deg, var(--heat-lo), var(--heat));
  border-color:var(--heat-lo);
  box-shadow:0 10px 30px rgba(255,179,64,.36);
}

.btn--ghost{ background:transparent; border-color:var(--border-default); }
.btn--ghost:hover{ background:color-mix(in srgb, var(--bg-raised) 70%, transparent); }

.card{
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--sh-1), var(--sh-hair);
}

/* קופסאות-סימון: ירוק/אדום/ענבר — תמיד גם עם אייקון וכותרת, לא צבע לבד */
.note{
  border-inline-start:3px solid var(--border-strong);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  margin:0 0 var(--sp-5);
}
.note__label{ display:block; font-weight:700; font-size:var(--fs-xs); letter-spacing:.04em; margin-bottom:var(--sp-2); }
.note--good{ background:var(--tint-up-10); border-color:var(--mkt-up);   color:var(--ink-good); }
.note--risk{ background:var(--tint-dn-10); border-color:var(--mkt-down); color:var(--ink-risk); }
.note--key { background:var(--tint-ht-10); border-color:var(--heat);     color:var(--ink-note); }

.tag{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:2px var(--sp-2);
  font-family:var(--font-num); font-size:var(--fs-2xs); letter-spacing:.06em;
  color:var(--text-secondary);
  background:var(--bg-raised);
  border:1px solid var(--border-default); border-radius:var(--r-sm);
  direction:ltr; unicode-bidi:isolate;
}

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

.brand{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  text-decoration:none; color:var(--text-primary);
}
.brand-mark{
  display:grid; grid-template-columns:repeat(5, 3px); gap:2px;
  align-items:end; height:22px;
}
.brand-mark i{ display:block; border-radius:1px; }
.brand-mark i:nth-child(1){ height:34%; background:var(--heat-30); }
.brand-mark i:nth-child(2){ height:62%; background:var(--heat-60); }
.brand-mark i:nth-child(3){ height:100%; background:var(--heat-90); }
.brand-mark i:nth-child(4){ height:54%; background:var(--heat-70); }
.brand-mark i:nth-child(5){ height:26%; background:var(--heat-40); }

.brand-word{
  font-family:var(--font-disp); font-size:var(--fs-md); font-weight:600;
  line-height:1; direction:ltr; unicode-bidi:isolate;
}
.brand-word em{ font-style:normal; color:var(--heat-lo); }

/* ==========================================================================
   כניסה מדורגת
   הכול-מופיע-בבת-אחת קורא כמו החלפת שקופית. עיכוב זעיר בין בלוק לבלוק
   מוביל את העין למטה בסדר שבו הטקסט נכתב. `transform`+`opacity` בלבד,
   כדי שזה ירוץ בכרטיס המסך ולא יגרור פריסה מחדש.
   ========================================================================== */

@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

[data-enter] > *{
  animation:rise var(--dur-3) var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 38ms);
}

/* ==========================================================================
   הקנבס — הכרעה K22: נשאר כהה תמיד, גם במצב בהיר
   ========================================================================== */

.canvas-frame{
  position:relative;
  background:var(--bg-terminal);
  border:1px solid var(--border-default);
  border-radius:var(--r-md);
  overflow:hidden;
  /* הסימולטור הוא אי LTR בתוך דף RTL — ציר הזמן רץ שמאל→ימין תמיד */
  direction:ltr;
}
.canvas-frame canvas{ display:block; width:100%; }

/* תגי-אמת שמוצהרים על הקנבס ולעולם לא מוסתרים */
.canvas-badges{
  position:absolute; top:var(--sp-2); left:var(--sp-2);
  display:flex; gap:var(--sp-1); pointer-events:none;
}

/* ==========================================================================
   תנועה — הכרעה K12: לעולם לא קפיצה למצב הסופי בקנבס-הוראה
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}