/* ============================================================
   עמוד הפקת המפה · נטען אחרי style.css ו-home.css
   ⚠️ נטען אחרון, ולכן חייב לחזור בעצמו על התאמות המובייל שלו ולא
   להישען על בלוקי המדיה של הקבצים שלפניו. זה הכלל שנשבר כבר פעמיים
   בפרויקט, ראו SITE-STATUS.md
   ============================================================ */

/* ⚠️ ‎[hidden]‎ של הדפדפן הוא ‎display:none‎ בספציפיות של תג בלבד, וכל
   מחלקה שמצהירה ‎display‎ גוברת עליו. ‎.fields{display:grid}‎ ו-‎.entry
   {display:inline-flex}‎ עשו בדיוק את זה, ואלמנטים שהוסתרו ב-JS נשארו
   על המסך. זה נראה כמו באג לוגי והוא באג ספציפיות. */
[hidden]{display:none!important}

/* ===== הטופס ===== */
/* ‎.chart-panel‎ ו-‎.fields‎ כבר מוגדרים ב-style.css ומשמשים את הטופס
   ב-reading.html. כאן רק מה שחסר להם: שדה ברוחב מלא, בורר, והשלמה. */
.fields .full{grid-column:1 / -1}
.fields select{
  width:100%; padding:14px; border-radius:3px;
  background:rgba(var(--deep),.72); border:1px solid rgba(224,192,112,.12);
  color:var(--text); font-family:var(--sans); font-size:.98rem; font-weight:300;
}
.fields select:focus{outline:none; border-color:rgba(79,216,206,.55)}
.fields input[type="date"],.fields input[type="time"]{min-height:50px}

.place-wrap{position:relative}
.ac{
  position:absolute; inset-inline:0; inset-block-start:100%; z-index:40;
  margin:6px 0 0; padding:6px; list-style:none;
  background:rgba(10,32,52,.97); backdrop-filter:blur(14px);
  border:1px solid rgba(224,192,112,.22); border-radius:10px;
  box-shadow:0 18px 44px rgba(4,16,28,.55);
  max-height:270px; overflow:auto;
}
.ac li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; min-height:44px; cursor:pointer; border-radius:7px;
  color:var(--text); font-size:.95rem; font-weight:300;
}
.ac li:hover,.ac li[aria-selected="true"]{background:rgba(79,216,206,.13)}
.ac small{color:var(--muted); font-size:.76rem; white-space:nowrap}

/* הכפתור להפקה והכפתור למסלול, זה לצד זה */
.form-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px}

.err{color:#FF9B94; font-size:.9rem; margin-top:14px}

/* ===== ⭐ המפה בשפת ההירו =====
   הצורות והערוצים משתמשים במחלקות ‎.shape ‎.chan ‎.star ‎.halo‎ שכבר
   מוגדרות ב-style.css, כדי לרשת מהן את אותן אנימציות בדיוק. כאן רק
   ההבחנה בין מוגדר לפתוח, ושינוי הפרופורציה: מפה אמיתית גבוהה מרוחבה,
   בעוד ‎.const .bg‎ תוכנן לקבוצת כוכבים כמעט ריבועית. */
/* ⚠️ מערכת הצירים של המפה גדלה מ-600 על 980 ל-860 על 1320 בשכתוב של
   06.08. עובי קו שנשאר כפי שהיה נראה דק ב-30 אחוז אחרי השינוי, כי הוא
   נמדד ביחידות ה-viewBox. הערכים כאן הוגדלו בהתאם */
.const .bg.real{width:auto; height:92%; max-width:82%}
.bg .shape.dim{stroke:rgba(238,212,150,.24); stroke-width:1.6}
.bg .shape.on{stroke:rgba(240,216,158,.95); fill:rgba(224,192,112,.11); stroke-width:2.4}
.bg .chan.dim{stroke:rgba(126,240,232,.12); stroke-width:1.4}
.bg .chan{stroke-width:3.6}

/* ===== התוצאה ===== */
.sub-lead{color:var(--muted); margin-top:16px; max-width:66ch}
.c-des{color:#E8756E; font-weight:400}
.c-per{color:#EAF1F8; font-weight:400}

.warn{
  background:rgba(224,192,112,.07); border:1px solid rgba(224,192,112,.24);
  border-inline-start:3px solid var(--gold); border-radius:10px;
  padding:14px 18px; margin-top:14px; color:#E6DCC4; font-size:.92rem;
}
#warns{margin-top:26px}

.layer4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px}
.layer4 .pane{padding:32px 26px}
.layer4 .n{font-size:.66rem; letter-spacing:.26em; color:var(--turq); display:block; margin-bottom:15px}
.layer4 h3{color:var(--gold); font-weight:300; font-size:1.35rem; margin-bottom:9px; line-height:1.25}
.layer4 p{color:var(--muted); font-size:.9rem}

/* ⭐ ⚠️ **בלי לוח לבן.** המפה מצוירת בערכה הכהה: אדום לעיצוב, לבן
   לאישיות. שחור על כחול כהה אינו נקרא, ולכן האישיות התהפכה ללבן.
   ההיפוך מוסבר במפורש בטקסט הסקציה ולא מונח כמובן מאליו. */
.sheet-wrap{
  margin-top:42px; padding:22px 18px;
  background:linear-gradient(160deg,rgba(56,110,150,.24),rgba(20,58,88,.30));
  border:1px solid rgba(224,192,112,.20); border-radius:18px;
  overflow-x:auto;
}
/* ⚠️⚠️ **בלי ‎min-width‎ במסך צר.** מתחת ל-820px מצוירת מפת הגוף לבדה
   (ראו ui.js), והיא חייבת להיכנס בשלמותה. ‎min-width‎ שגדול מהמסך גורם
   ל-‎overflow-x‎ להיפתח, ובעמוד RTL הגלילה מתחילה מימין: המשתמש רואה מפה
   חתוכה בצד שמאל בלי שום סימן שאפשר לגלול. מספרי השערים קטנים בטלפון,
   וזה המחיר הנכון מול מפה חתוכה */
.sheet-wrap svg{display:block; width:100%; height:auto}
@media(min-width:820px){ .sheet-wrap svg{min-width:720px} }
.plate-row{display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap; margin-top:24px}
.plate-row .fineprint{margin:0; max-width:64ch}
/* מקרא הצבעים. שורה אחת מתחת למפה, לא פסקה מעליה */
.legend{max-width:none}

/* ⛔ 06.08.2026: הוסרו מכאן ‎.two-cols ‎.kv-h ‎table.kv ‎table.planets‎
   ו-‎code‎, יחד עם סקציית "מה מוגדר ומה פתוח" שהשתמשה בהן. אחרי המפה יש
   משפט אחד וקריאה לפעולה. ראו ההערה ב-page.html לפני שמחזירים משהו */

.center{text-align:center}
.center .sub-lead{margin-inline:auto}
.center .cta-row{justify-content:center; margin-top:36px}

.site-foot{padding:46px 0 56px; text-align:center; border-block-start:1px solid rgba(224,192,112,.12)}
.site-foot .fineprint{margin:0 auto 10px; max-width:72ch}
.site-foot .credit{opacity:.72}
.site-foot a{color:var(--turq)}

/* ===== מובייל ===== */
@media(max-width:960px){
  .layer4{grid-template-columns:1fr 1fr; gap:14px}
  .sheet-wrap{padding:14px 10px; border-radius:14px}
}
@media(max-width:640px){
  .layer4{grid-template-columns:1fr}
  .layer4 .pane{padding:24px 20px}
  .plate-row{flex-direction:column; align-items:stretch}
  .plate-row .entry{justify-content:center}
  .form-cta{flex-direction:column; align-items:stretch}
  .form-cta .entry{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  /* ⚠️ ‎*{animation:none}‎ לבדו אינו נגישות אלא הסתרה: צורה שמצוירת
     מ-‎stroke-dashoffset‎ מלא נתקעת בלתי נראית. ראו SITE-STATUS.md */
  .bg .shape{stroke-dashoffset:0!important}
  .bg .chan,.bg .star,.bg .halo{opacity:1!important}
}