/*
design-system/tokens.css — משימה 36 שלב 1.
מקור האמת: אפליקציה/app-server/public/design-lab/national-v2.html (אושר במלואו על ידי אור).
זהו קובץ חילוץ, לא עיצוב חדש. כל טוקן/קלאס כאן קיים ב-v2 או הורחב ממנו בהשראה ישירה (מסומן בהערה איפה שכן).
תיעוד מלא, כולל כל שינוי/הרחבה, ב-design-system/MASTER.md. אל תשנו קובץ זה בלי לעדכן את MASTER.md.
סדר הטעינה המומלץ בכל דף app2:
1. (סינכרוני, מוקדם ב-head, לפני כל CSS — ר' תיעוד ב-shell.js)
2.
(משימה 48, ממצא 136)
3.
4. CSS ספציפי לדף (בא אחרי tokens.css כדי שיוכל לדרוס במידת הצורך).
*/
/* משימה 48, ממצא 136: הפונטים עברו ל- ישיר ב-head של כל דף. @import כאן יצר שרשרת חסימת רינדור, כי הדפדפן חייב לקרוא ולפרסר את tokens.css לפני שהוא בכלל מגלה שיש בקשת פונטים. **אל תחזיר את ה-@import.** דף חדש מעתיק את שורת ה-link מ-home.html יחד עם שתי שורות ה-preconnect. */
:root{
/* צבעי בסיס — זהים ל-v2 מילה במילה */
/* משימה 96 §2 (D-541): המשטחים הוארו מדרגה אחת — אותו גוון כחול-לילה של הזהות מ-17.08,
ערך בהיר יותר. היה: --bg:#0A0E14 --bg-elev:#121826 --bg-elev-2:#182233.
נבדק חישובית (WCAG 2.x) מול טוקני הטקסט על --bg-elev החדש (#1A2231):
--text #F1F5F9 → 14.6:1 · --text-muted #94A3B8 → 6.31:1 · --text-dim #7C8DAA → 4.77:1.
שלושתם מעל 4.5:1, ולכן ההארה אינה מורידה שום טקסט מתחת לשער הנגישות (§1). */
--bg:#0F1520; --bg-elev:#1A2231; --bg-elev-2:#242F42;
--glass-bg:rgba(255,255,255,.075); --glass-border:rgba(255,255,255,.14);
/* --primary/--danger תוקנו במשימה 38 שלב 4 (המתאם): #DC2626/#EF4444 המקוריים (זהים ל-v2) נותנים
טקסט לבן על btn-primary/btn-danger ביחס ניגודיות מתחת ל-4.5:1 במצב hover (filter:brightness(1.1)
ב-tokens.css למטה מבהיר עוד את הרקע). #C81E1E/#C22323 נבדקו חישובית (נוסחת WCAG 2.x, luminance
יחסית): btn-primary 5.74:1 בסיס / 4.90:1 ב-hover, btn-danger 5.90:1 בסיס / 5.06:1 ב-hover -
שניהם מעל יעד 4.5:1 גם אחרי ה-hover. --pos-att (שמצביע ל-primary) מושפע גם הוא, בכוונה - אותה
בעיית ניגודיות חלה על תג עמדת "התקפה". שאר הטוקנים (כולל --primary-2 שמשמש טקסט על רקע כהה,
לא רקע-עם-טקסט-לבן) לא נגעתי בהם - זהים ל-v2 כמתועד. אימות מלא: 03 דואר\תוצאה 38.md. */
--primary:#C81E1E; --primary-2:#F87171; --gold:#FBBF24; --gold-2:#FDE68A;
/* משימה 96 §2: `--text-dim` הואר מ-#7C8DAA ל-#8A9BB8. **הסיבה נמדדה
בדפדפן ולא נוחשה:** אחרי הארת `--bg-elev-2` (D-541), טקסט dim על
המשטח הזה ירד ל-4.00:1 בדיוק — מתחת ל-4.5 של §1 — וזה מה שהפיל
32 מדידות ניגודיות בשבעה מסכים (כספים 16, רפואה 4, טקטיקה 5,
אימונים 3, בית 2, העברות 2, לוח 2). הערך החדש נותן
4.79:1 על --bg-elev-2 · 5.70:1 על --bg-elev · 6.56:1 על --bg. */
--text:#F1F5F9; --text-muted:#94A3B8; --text-dim:#8A9BB8;
--success:#22C55E; --danger:#C22323; --info:#38BDF8;
--pos-gk:#FBBF24; --pos-def:#38BDF8; --pos-mid:#22C55E; --pos-att:#C81E1E;
/* רדיוסים */
--radius:16px; --radius-chip:999px; --radius-sm:10px;
/* ריווח */
--sp-1:9px; --sp-2:18px; --sp-3:26px; --sp-4:35px; --sp-6:53px; /* משימה 91א §3ד (D-494): ×1.1 — היה 8/16/24/32/48 */
/* תנועה */
--ease:cubic-bezier(.16,.8,.32,1);
--dur:260ms;
/* מבנה */
--header-h:64px;
/* צללים ומיקוד */
--shadow-card:0 12px 32px -12px rgba(0,0,0,.55);
--focus-ring:0 0 0 3px rgba(56,189,248,.55);
/* z-index — לא היו מתויגים כטוקן מפורש ב-v2 (רק ערכים חופשיים בכל רכיב: 50/200/300/1000),
כאן מוצא כסולם מפורש כדי שדפי המוצר לא יתנגשו. הרחבה מתועדת של הצוות שלי, לא המצאת ערכים חדשים —
הערכים עצמם (50, 200, 300, 1000) לקוחים ישירות מהשימושים ב-v2 (site-header, lightbox, toast-host, rotate-screen). */
/* משימה 45 סעיף 0.3: סולם z-index גלובלי אחד, מלמטה למעלה.
תוכן -> סרגלים -> אייקון הטלפון -> הטלפון -> מודאלים -> טוסטים -> מסך הסיבוב.
הסדר תוקן אחרי שהבקרה מצאה שבסדר הקודם מסך הסיבוב היה מתחת לטלפון
ולמודאלים, כלומר מודאל היה נפתח מעליו ומאפשר אינטראקציה בדיוק במצב
שנועד לחסום.
**הערה מחייבת:** הסולם הזה **אינו חל על שכבות** (כרטיס שחקן/מנהל, טבלה,
נבחרת, הטלפון, מסך הסיבוב כשהוא dialog). showModal() מכניס אלמנט ל-top
layer, שנמצא מעל כל z-index אפשרי, וסדר הערימה שם נקבע לפי סדר הפתיחה.
הסולם נשאר תקף **לתוכן, לסרגלים ולטוסטים בלבד**. בלי מספרים מפוזרים בקבצים. */
--z-content:1; --z-header:50; --z-dropdown:80;
--z-phone-icon:120; --z-phone:150;
--z-overlay:200; --z-toast:300; --z-rotate:1000;
/* ===== משימה 59 סעיף 2.1 ===== */
/* DES-10: בלי ההצהרה הזאת select, פסי גלילה ורכיבי טופס נייטיביים מרונדרים
בהירים על דף כהה. אומת חי בייצור על מסך ההעברות. */
color-scheme:dark;
/* DES-3: tokens.css עצמו (shell-manager-chip, shell-offline-bar) ו-tactics.css
צורכים var(--border) שלא היה מוגדר. */
--border:rgba(255,255,255,.08);
/* ===== משימה 59 ריצה ג, סעיף 6.1 ===== */
/* DES-17: המשטח הבהיר של hover, היה 23 מופעי #1e2a3f ליטרליים */
--bg-hover:#2B3850; /* משימה 96 §2 (D-541): הואר עם המשטחים. היה #1e2a3f */
/* DES-14: טוקני שקיפות ל-primary ול-danger. מחליפים את
rgba(220,38,38,*) ו-rgba(239,68,68,*) הישנים שנשארו מלפני תיקון
הצבעים של משימה 38 */
--primary-a08:rgba(200,30,30,.08);
--primary-a16:rgba(200,30,30,.16);
--primary-a25:rgba(200,30,30,.25);
--danger-a08:rgba(194,35,35,.08);
--danger-a16:rgba(194,35,35,.16);
--danger-a25:rgba(194,35,35,.25);
--danger-a40:rgba(194,35,35,.40);
/* DES-18: צבעי טקסט רכים שהיו קשיחים ומשוכפלים */
--danger-soft:#fca5a5;
--success-soft:#86efac;
--on-gold:#3b2600;
/* ===== מערכת התצלומים, טוקנים. IMG-3 סעיף 1.1 ===== */
/* שכבות עומק */
--z-photo-back:-3;
--z-photo-mid:-2;
--z-photo-scrim:-1;
--z-photo-product:2;
/* ספי אלפא. מחושבים ב-IMG-3 פרק 2. אל תשנה */
--scrim-a-gold:.72;
--scrim-a-white:.60;
--scrim-a-solid:.92;
/* מילויי סקרים */
--scrim-deep:linear-gradient(180deg,
rgba(10,14,20,.55) 0%, rgba(10,14,20,.60) 30%,
rgba(10,14,20,.72) 50%, rgba(10,14,20,.88) 78%,
rgba(10,14,20,.96) 100%);
--scrim-band:linear-gradient(180deg,
rgba(10,14,20,.72) 0%, rgba(10,14,20,.80) 55%,
rgba(10,14,20,.94) 100%);
--scrim-tile:linear-gradient(180deg,
rgba(10,14,20,0) 46%, rgba(10,14,20,.78) 100%);
--scrim-flat:rgba(10,14,20,.72);
/* RTL: 270deg שם את העצירה הכהה בימין, שם מתחיל הטקסט. אל תשתמש ב-90deg */
--scrim-rtl:linear-gradient(270deg,
rgba(10,14,20,.80) 0%, rgba(10,14,20,.34) 42%,
rgba(10,14,20,0) 72%);
/* מסנני תצלום */
--img-f-deep:blur(14px) saturate(1.15) brightness(.45);
--img-f-band:blur(6px) saturate(1.05) brightness(.50);
--img-f-mid:saturate(.98) contrast(1.04) brightness(.92);
--img-f-thumb:saturate(1.02) contrast(1.06);
/* מוצר */
--shadow-product:drop-shadow(0 12px 16px rgba(0,0,0,.60)) drop-shadow(0 2px 3px rgba(0,0,0,.50));
--halo-product:drop-shadow(0 0 1px rgba(255,255,255,.42));
--plate-product:radial-gradient(58% 56% at 50% 42%,
rgba(255,255,255,.090) 0%, rgba(255,255,255,.032) 46%,
rgba(255,255,255,0) 72%);
/* סולם גדלים. שישה. אין שביעי */
--img-1:24px; --img-2:34px; --img-3:48px;
--img-4:64px; --img-5:96px; --img-6:132px;
--kit-1:40px; --kit-2:64px; --kit-3:96px; --kit-4:132px;
/* יחסי תצוגה */
--ar-deep:16/10; --ar-band:308/96; --ar-tile:1;
--ar-video:16/9; --ar-kit:1; --ar-pitch:68/100;
/* מסגרות */
--photo-border:1px solid rgba(255,255,255,.08);
--photo-border-strong:2px solid rgba(255,255,255,.14);
--photo-plate:var(--bg-elev-2);
/* ==========================================================================
משימה 96 §2 (D-541) — שלושה סולמות חדשים. נוספים, לא מחליפים:
--sp-1..--sp-6 הישנים נשארים כפי שהם (91א D-494), כי 40 קובצי דף צורכים אותם.
========================================================================== */
/* סולם טיפוגרפי קבוע, שישה שלבים, בפיקסלים מוחלטים.
בכוונה px ולא rem: שורש המסמך הוא 19.25px (D-494), ולכן rem אינו "פיקסל".
גוף הטקסט נשאר 1rem = 19.25px, מעל מינימום 16px של §1; הסולם הזה משרת
תוויות, ראשי טבלה, תאים צפופים וכותרות — שם צריך שליטה מדויקת. */
--fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:20px; --fs-5:24px; --fs-6:32px;
--lh-tight:1.25; --lh-normal:1.5; --lh-loose:1.65;
/* גריד 4/8 — כל מרווח חדש הוא כפולה של 4. */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
/* שפת צבע לנתונים, ארבע מדרגות (D-541, סולם מקובל):
אדום (נמוך) ← כתום ← צהוב ← ירוק (גבוה).
ניגודיות הטקסט על --bg-elev (#1A2231), נוסחת WCAG 2.x:
d1 5.82:1 · d2 6.95:1 · d3 10.3:1 · d4 9.2:1 — כולן מעל 4.5:1.
**חוק §1: הצבע לעולם אינו לבדו.** רכיב `.dv96` למטה מחייב ערך מספרי
או מילה לצידו, ומצייר סולם ארבע-מקטעים שנקרא גם בלי צבע. */
--d-1:#F87171; --d-2:#FB923C; --d-3:#FACC15; --d-4:#4ADE80;
--d-1-bg:rgba(248,113,113,.14); --d-2-bg:rgba(251,146,60,.14);
--d-3-bg:rgba(250,204,21,.14); --d-4-bg:rgba(74,222,128,.14);
--d-1-bd:rgba(248,113,113,.34); --d-2-bd:rgba(251,146,60,.34);
--d-3-bd:rgba(250,204,21,.34); --d-4-bd:rgba(74,222,128,.34);
--d-0:#94A3B8; --d-0-bg:rgba(148,163,184,.12); --d-0-bd:rgba(148,163,184,.28);
/* צפיפות שורה בטבלת נתונים (§8 בדיקה 3) */
--row-h:32px; --row-h-touch:44px;
/* יעד מגע מינימלי (§1) */
--tap:44px;
}
*,*::before,*::after{box-sizing:border-box}
/* html מ-16 ל-17.5px — הגדלת הסולם הסופית שכבר מומשה ב-v2 (משימה 35, פידבק אור סעיף 3). מועתק, לא מוגדל שוב. */
html{scroll-behavior:smooth; font-size:19.25px} /* משימה 91א §3ד (D-494): הגדלה כללית ~10% בטוקנים — היה 17.5px */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
margin:0; background:var(--bg); color:var(--text);
font-family:'Heebo',system-ui,sans-serif; font-size:1rem; line-height:1.55;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:'Karantina','Heebo',sans-serif; font-weight:400; letter-spacing:.5px; margin:0}
/* unicode-bidi:isolate + direction:ltr: תוקן במפורש אחרי בדיקה ויזואלית חיה של _preview.html (משימה 36).
בלי זה, ביטוי כמו "14 / 20" בתוך פסקה RTL מוצג הפוך ("20 / 14") — כל מספר בודד הוא ריצה חזקה-LTR
מטבעה, אבל שתי ריצות LTR מופרדות בתו ניטרלי (/) בתוך פסקת-אב RTL מסודרות-מחדש כיחידות. isolate
הופך את כל הביטוי המספרי ליחידה עצמאית אחת שממוקמת נכון לפי מקומה המקורי במקור. חובה על כל דף מוצר
לעטוף כל ביטוי מספרי מורכב (יחס, טווח, "x / y") ב-class="num", לא רק מספר בודד. */
.num,.tabular{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* ---------- מצב הפחתת תנועה: מבטל כל אנימציה/מעברים, מציג מצב סופי (זהה ל-v2) ---------- */
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
/* ---------- מיכל תוכן כללי ---------- */
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--sp-2)}
@media (min-width:720px){ .wrap{padding-inline:var(--sp-4)} }
/* ---------- כרטיסים / זכוכית ---------- */
.card{
background:var(--bg-elev); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
box-shadow:var(--shadow-card);
}
.glass{
background:var(--glass-bg); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
border:1px solid var(--glass-border); border-radius:var(--radius);
}
/* וריאציות שימושיות, הרחבה שלי בהשראת אותה שפה (card/glass קיימים כמות שהם למעלה) */
.card-pad{padding:var(--sp-3)}
.card-interactive{transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor:pointer}
.card-interactive:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(0,0,0,.6)}
.card-interactive:focus-visible{transform:translateY(-2px)}
/* ---------- אייקונים (SVG בלבד, ר' Shell.icon ב-shell.js — בלי אימוג'י בשום מקום) ---------- */
.icon{width:20px; height:20px; flex:none}
.icon-sm{width:16px; height:16px}
.icon-lg{width:28px; height:28px}
/* ---------- תגיות מצב ---------- */
.tag-demo{
display:inline-flex; align-items:center; gap:4px; font-size:0.65625rem; font-weight:700;
color:#3b2600; background:linear-gradient(135deg,var(--gold),var(--gold-2));
padding:0.125rem 0.5rem; border-radius:var(--radius-chip); letter-spacing:.3px; vertical-align:middle;
}
.tag-live{
display:inline-flex; align-items:center; gap:4px; font-size:0.65625rem; font-weight:700;
color:#052e1a; background:linear-gradient(135deg,var(--success),#86efac);
padding:0.125rem 0.5rem; border-radius:var(--radius-chip); letter-spacing:.3px; vertical-align:middle;
}
/* .tag-building חדש: לא קיים ב-v2, נדרש במפורש במשימה 36 ("בבנייה"). באותה שפה חזותית של tag-demo/tag-live —
גרדיאנט אפור-כחלחל ניטרלי (v2 לא השתמש בטון הזה בשום תג קיים, כדי לא להתבלבל עם דמו/חי) + טקסט כהה לניגודיות.
גוון ראשוני (#64748B→#94A3B8) נבדק ותוקן: על הקצה הכהה של הגרדיאנט הניגודיות מול הטקסט הכהה יצאה כ-3.75:1,
מתחת ל-4.5:1 הנדרש. הוחלף לזוג בהיר יותר (slate-300/200) שנותן ~12:1 בכל הגרדיאנט, כמו tag-demo/tag-live. */
.tag-building{
display:inline-flex; align-items:center; gap:4px; font-size:0.65625rem; font-weight:700;
color:#0F172A; background:linear-gradient(135deg,#CBD5E1,#E2E8F0);
padding:0.125rem 0.5rem; border-radius:var(--radius-chip); letter-spacing:.3px; vertical-align:middle;
}
/* .tag-preview חדש (תיקון המתאם אחרי שלב 2): גבול-ברזל של משימה 36 מחייב שכל דף app2 יישא תג "תצוגה
מקדימה" גלוי - הוחמץ מהוראות סוכני הדפים, תוקן מרכזית כאן ומוזרק אוטומטית על ידי renderHeader() ב-shell.js
כדי שיחול על כל דף קיים ועתידי בלי תלות בזיכרון של כל סוכן דף בנפרד. גוון תכלת ניטרלי (--info), לא מתבלבל
עם דמו (זהב)/חי (ירוק)/בבנייה (אפור), ניגודיות ~8:1 (טקסט כהה על --info/--info בהיר). */
.tag-preview{
display:inline-flex; align-items:center; gap:4px; font-size:0.65625rem; font-weight:700;
color:#052e3d; background:linear-gradient(135deg,var(--info),#bae6fd);
padding:0.125rem 0.5rem; border-radius:var(--radius-chip); letter-spacing:.3px; vertical-align:middle;
}
/* ============================= כפתורים ============================= */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--radius-chip);
padding:0.875rem 1.625rem; font-size:0.9375rem; font-weight:700; min-height:44px; min-width:44px;
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-primary{background:linear-gradient(135deg,var(--primary),#B91C1C); color:#fff; box-shadow:0 8px 24px -8px rgba(220,38,38,.7)}
.btn-primary:hover{filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(220,38,38,.85)}
.btn-primary:active{transform:translateY(0px) scale(.98); filter:brightness(.95)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#F59E0B); color:#3b2600; box-shadow:0 8px 24px -8px rgba(251,191,36,.6)}
.btn-gold:hover{filter:brightness(1.08); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border:1.5px solid var(--glass-border)}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3)}
.btn-secondary{background:var(--bg-elev-2); color:var(--text); border:1px solid rgba(255,255,255,.08)}
.btn-secondary:hover{background:#1e2a3f}
/* btn-danger חדש: לא קיים ב-v2 (שם היה רק primary/gold/ghost/secondary), אבל "כפתור מסוכן" מבוקש במפורש
במשימה 36. משתמש ב-var(--danger) הקיים בטוקנים, לא צבע חדש. */
.btn-danger{background:linear-gradient(135deg,var(--danger),#B91C1C); color:#fff; box-shadow:0 8px 24px -8px rgba(239,68,68,.65)}
.btn-danger:hover{filter:brightness(1.1); transform:translateY(-2px)}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:none; transform:none; box-shadow:none}
.btn:focus-visible{box-shadow:var(--focus-ring)}
.btn-sm{padding:0.5rem 1rem; font-size:0.8125rem; min-height:36px}
/* ============================= צ'יפים ============================= */
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.08); color:var(--text-muted); font-size:0.78125rem; padding:0.375rem 0.875rem; border-radius:var(--radius-chip); min-height:32px}
.chip-clickable{cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.chip-clickable:hover{background:rgba(255,255,255,.1); color:var(--text)}
.pos-chip{display:inline-block; font-size:0.6875rem; font-weight:700; padding:0.1875rem 0.625rem; border-radius:var(--radius-chip)}
.pos-chip.gk{background:rgba(251,191,36,.16); color:var(--gold)}
.pos-chip.def{background:rgba(56,189,248,.16); color:var(--info)}
.pos-chip.mid{background:rgba(34,197,94,.16); color:var(--success)}
.pos-chip.att{background:rgba(220,38,38,.18); color:var(--primary-2)}
.pos-chip.unk{background:rgba(148,163,184,.14); color:var(--text-muted)}
.badge-dot{position:relative; display:inline-flex}
.badge-count{position:absolute; top:-6px; inset-inline-end:-6px; background:var(--primary); color:#fff; font-size:0.625rem; font-weight:800; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-elev)}
/* ============================= מתג (toggle) ============================= */
.toggle{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; min-height:44px}
.toggle input{position:absolute; opacity:0; width:44px; height:26px; margin:0; cursor:pointer}
.toggle-track{width:44px; height:26px; background:#1e2a3f; border-radius:99px; position:relative; transition:background var(--dur)}
.toggle-track::after{content:'';position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform var(--dur) var(--ease)}
.toggle input:checked + .toggle-track{background:var(--success)}
.toggle input:checked + .toggle-track::after{transform:translateX(18px)}
[dir="rtl"] .toggle input:checked + .toggle-track::after{transform:translateX(-18px)}
.toggle input:focus-visible + .toggle-track{box-shadow:var(--focus-ring)}
/* ============================= טולטיפ ============================= */
.tt{position:relative; display:inline-flex}
.tt .tt-bubble{
position:absolute; bottom:calc(100% + 8px); inset-inline-start:50%; transform:translateX(50%) translateY(4px);
background:var(--bg-elev-2); border:1px solid var(--glass-border); padding:0.375rem 0.75rem; border-radius:8px;
font-size:0.71875rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--dur), transform var(--dur); box-shadow:var(--shadow-card); z-index:var(--z-dropdown);
}
.tt:hover .tt-bubble, .tt:focus-within .tt-bubble{opacity:1; transform:translateX(50%) translateY(0)}
/* ============================= שלד טעינה (skeleton) ============================= */
.skel{background:linear-gradient(90deg,#1c2637 25%,#26334a 37%,#1c2637 63%); background-size:400% 100%; animation:skel-shimmer 1.4s ease-in-out infinite; border-radius:8px}
@keyframes skel-shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){ .skel{animation:none; opacity:.5} }
/* ============================= טוסט ============================= */
.toast-host{position:fixed; top:calc(var(--header-h) + 14px); inset-inline-start:50%; transform:translateX(50%); z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{
background:var(--bg-elev-2); border:1px solid rgba(34,197,94,.4); color:var(--text); padding:0.75rem 1.125rem; border-radius:12px;
box-shadow:var(--shadow-card); display:flex; align-items:center; gap:10px; font-size:0.84375rem;
opacity:0; transform:translateY(-12px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.toast-danger{border-color:rgba(239,68,68,.5)}
/* ============================= אקורדיון (חדש, בהשראת שפת v2 — לא היה קיים שם) =============================
טכניקת grid-template-rows 0fr/1fr במקום max-height קבוע (v2 השתמש ב-max-height:160px קשיח בפרטי הסגל,
ר' .roster-detail-inner במקור — כאן נמנעים מהמגבלה הזו במכוון, תוכן בכל גובה נפתח חלק). */
.accordion-item{border-bottom:1px solid rgba(255,255,255,.08)}
.accordion-item:last-child{border-bottom:none}
.accordion-trigger{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
background:transparent; border:none; color:var(--text); font-size:0.9375rem; font-weight:600;
padding:0.875rem 0.25rem; min-height:44px; text-align:start; transition:color var(--dur) var(--ease);
}
.accordion-trigger:hover{color:var(--gold)}
.accordion-chevron{transition:transform var(--dur) var(--ease); flex:none}
.accordion-trigger[aria-expanded="true"] .accordion-chevron{transform:rotate(180deg)}
.accordion-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease)}
.accordion-panel.open{grid-template-rows:1fr}
.accordion-panel-inner{overflow:hidden}
.accordion-body{padding:0 0.25rem 1rem; color:var(--text-muted); font-size:0.875rem}
/* ============================= לשוניות (tabs) ============================= */
.tabs-nav{display:flex; gap:4px; background:var(--bg-elev-2); padding:5px; border-radius:var(--radius-chip); width:fit-content; position:relative; margin-bottom:var(--sp-3)}
/* =====================================================================
משימה 49 §8ב פריט 3: **שש לשוניות בטקטיקה, ובטלפון הן לא נשברות.**
הכרעת אור הוסיפה למסך הטקטיקה שתי לשוניות (המרכז הרפואי ולוח
השקיפות) על ארבע קיימות. `.tabs-nav` הוא `flex` בלי גלישה וברוחב
`fit-content`, ולכן שש לשוניות היו דוחפות את הסרגל **מעבר לרוחב
המסך** בטלפון וגוררות את כל הדף לגלילה אופקית.
הפתרון: הסרגל עצמו נעשה מכל גלילה. הוא לעולם אינו רחב מהמסך, הלשוניות
אינן מתכווצות ואינן נחתכות, והדף עצמו אינו זז. סרגל של שלוש או ארבע
לשוניות אינו מושפע כלל, כי `fit-content` משאיר אותו צר כשהוא נכנס.
===================================================================== */
.tabs-nav{max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tabs-nav::-webkit-scrollbar{display:none}
.tabs-nav > .tab-btn{flex:0 0 auto; white-space:nowrap}
html[data-layout="phone"] .tab-btn{padding-inline:0.9rem}
/* min-height 44px (לא 40px כמו ב-v2): תוקן אחרי בדיקת נגישות ב-_preview.html — 40px נמדד בפועל כ-41px
גובה מציאותי, מתחת ליעד המגע המינימלי 44x44 שמחייב במפורש משימה 36. */
.tab-btn{position:relative; z-index:2; padding:0.6875rem 1.25rem; font-size:0.84375rem; font-weight:600; color:var(--text-muted); background:transparent; border:none; border-radius:var(--radius-chip); min-height:44px; transition:color var(--dur) var(--ease)}
.tab-btn.active{color:var(--bg)}
/* תיקון באג ידוע (משימה 35, roster/design-lab): positionIndicator() המקורי מיקם את .tab-indicator עם
inset-inline-start = offsetLeft, אבל offsetLeft הוא מדידה פיזית (משמאל) בעוד inset-inline-start ב-RTL
מתייחס לצד ימין — התוצאה: האינדיקטור לא מיושר בדיוק מתחת לכפתור הפעיל באפליקציה RTL.
כאן (ר' Shell.initTabs ב-shell.js) האינדיקטור ממוקם עם left הפיזי (תואם ל-offsetLeft), לא עם inset-inline-start. */
.tab-indicator{position:absolute; top:5px; bottom:5px; left:0; background:var(--gold); border-radius:var(--radius-chip); z-index:1; transition:left var(--dur) var(--ease), width var(--dur) var(--ease)}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* ============================= טבעת ציון (score ring) ============================= */
/* ציון עם ספרה במרכז העיגול — שונה במכוון מ-.ring-pct של v2 (שם התג יושב כתגית מתחת לתמונה, לא במרכז
הטבעת עצמה). כאן זו הגרסה הגנרית לספריית הרכיבים, לפי מפרט משימה 36 ("עיגול עם ציון מספרי במרכז"). */
.score-ring{position:relative; display:inline-flex; align-items:center; justify-content:center}
.score-ring svg{transform:rotate(-90deg)}
.score-ring-track{fill:none; stroke:rgba(255,255,255,.1); stroke-width:8}
/* stroke בכוונה לא מוגדר כאן (חוץ מברירת מחדל --gold): כל טבעת מקבלת gradient ייחודי דרך style="stroke:..." inline
שנוצר ב-Shell.scoreRing (shell.js) — style inline גובר על הכלל הזה, כדי שכמה טבעות באותו דף לא יתנגשו על id אחד. */
.score-ring-fill{fill:none; stroke:var(--gold); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease)}
.score-ring-value{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Karantina'; color:var(--gold); font-size:1.5rem}
.score-ring-sm .score-ring-value{font-size:1.0625rem}
.score-ring-lg .score-ring-value{font-size:2rem}
/* ============================= מיכל רדאר ============================= */
.radar-container{max-width:520px; margin-inline:auto; padding:var(--sp-2)}
.radar-container canvas{width:100%; height:auto}
.radar-legend{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; font-size:0.75rem; color:var(--text-muted)}
.radar-legend-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:5px; vertical-align:middle}
/* ============================= מדים ומדדים (מקור: תחנה 8 ב-v2, halfGauge/ringMini/bullet/momentum) ============================= */
.gauge-num{font-family:'Karantina'; font-size:1.875rem; margin-top:-38px}
.gauge-label{font-size:0.75rem; color:var(--text-muted); margin-top:6px}
.ring-mini{width:96px; text-align:center}
.bullet-row{margin-bottom:14px; text-align:start}
.bullet-label{font-size:0.75rem; color:var(--text-muted); display:flex; justify-content:space-between; margin-bottom:4px}
.bullet-track{height:16px; border-radius:6px; background:rgba(255,255,255,.06); position:relative; overflow:hidden}
.bullet-band{position:absolute; top:0; bottom:0; height:100%}
.bullet-bar{position:absolute; top:5px; bottom:5px; background:var(--gold); border-radius:4px; transition:width 1s var(--ease)}
.bullet-target{position:absolute; top:-2px; bottom:-2px; width:3px; background:#fff}
.momentum-track{height:14px; border-radius:99px; background:linear-gradient(90deg,var(--danger) 0%,var(--danger) 25%,var(--text-dim) 25%,var(--text-dim) 50%,var(--info) 50%,var(--info) 75%,var(--success) 75%,var(--success) 100%); position:relative; margin-top:22px}
.momentum-marker{position:absolute; top:-9px; width:3px; height:32px; background:#fff; border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,.7); transition:right 1s var(--ease)}
.momentum-zones{display:flex; justify-content:space-between; font-size:0.65625rem; color:var(--text-muted); margin-top:6px}
/* מד התקדמות פשוט, ליניארי — הרחבה שלי, אין ב-v2 (שם המונה היחיד היה bullet-track). API פשוט: div.meter-track > div.meter-fill */
.meter-track{height:8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden}
.meter-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--info),var(--success)); transition:width var(--dur) var(--ease)}
.meter-fill.warn{background:linear-gradient(90deg,var(--gold),#F59E0B)}
.meter-fill.danger{background:linear-gradient(90deg,var(--danger),#B91C1C)}
/* ============================= טבלאות ============================= */
/* גנרית, מקבילה ל-table.roster ב-v2 (תחנה 6), שם כללי כדי שכל דף מוצר ישתמש: table.data-table */
/* משימה 45 סעיף 0.2, מוקד סיכון 3: טבלאות רחבות בלאורך.
**גלילה אופקית בתוך מכל ייעודי, לא הקטנת גופן ולא הסתרת עמודות.**
overscroll-behavior-x:contain מונע מהגלילה האופקית לגרור את הדף עצמו
(ובאייפון, לגרור את מחוות האחורה של הדפדפן). */
.table-wrap{overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
html[data-layout="phone"] .table-wrap > table{min-width:max-content}
/* עמודת השם נשארת דבוקה בצד ימין. **inset-inline-start ולא left**: הדפוס
המתועד בספרות נכתב לשפות משמאל לימין, ואצלנו העמודה הראשונה היא בימין,
ולכן left:0 היה מדביק אותה לצד הלא נכון. */
html[data-layout="phone"] .table-wrap > table > thead > tr > th:first-child,
html[data-layout="phone"] .table-wrap > table > tbody > tr > td:first-child{
position:sticky; inset-inline-start:0; z-index:2;
background:var(--bg-elev); box-shadow:-10px 0 12px -10px rgba(0,0,0,.75);
}
html[data-layout="phone"] .table-wrap > table > thead > tr > th:first-child{z-index:3}
table.data-table{width:100%; border-collapse:collapse; min-width:480px}
table.data-table th{font-size:0.71875rem; color:var(--text-dim); text-align:start; padding:0.625rem 0.75rem; border-bottom:1px solid rgba(255,255,255,.08); font-weight:600}
table.data-table td{padding:0.625rem 0.75rem; border-bottom:1px solid rgba(255,255,255,.05); font-size:0.84375rem; vertical-align:middle}
table.data-table tr.row-clickable{cursor:pointer; transition:background var(--dur) var(--ease)}
table.data-table tr.row-clickable:hover{background:rgba(255,255,255,.04)}
table.data-table tr.row-clickable:focus-visible{background:rgba(255,255,255,.06)}
/* משימה 59 סעיף 2.5: הגדלים על סולם --img-1..6 (IMG-3 סעיף 1.8) */
.table-photo{width:var(--img-2); height:var(--img-2); border-radius:50%; object-fit:cover}
.table-photo-empty{width:var(--img-2); height:var(--img-2); border-radius:50%; background:linear-gradient(135deg,#1e2a3f,#0f1622); display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:var(--text-dim); border:1px solid rgba(255,255,255,.08)}
.table-crest{width:18px; height:18px; object-fit:contain; vertical-align:middle; margin-inline-start:6px}
.minibar{width:70px; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; display:inline-block; vertical-align:middle}
.minibar span{display:block; height:100%; background:linear-gradient(90deg,var(--info),var(--success))}
/* ============================= מצבי טקסט עזר ============================= */
.empty-note{color:var(--text-dim); font-size:0.75rem}
.err-inline{color:var(--danger-soft); font-size:0.8125rem; padding:var(--sp-2); background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); border-radius:var(--radius-sm)}
/* משימה 63 שלב ז, מחלקה ז4 (LAY-21): קוד הסיבה שמחליף את נתיב ה-API בהודעת
השגיאה. משני לטקסט, ומבודד ל-LTR כדי שקוד כמו MC-02 לא יישבר בשורה עברית. */
.err-code{display:inline-block; direction:ltr; unicode-bidi:isolate; font-size:0.75rem; opacity:.75; white-space:nowrap}
.loading-row{color:var(--text-dim); font-size:0.8125rem; padding:var(--sp-2)}
/* =====================================================================
השלד המשותף: כותרת עליונה, ניווט ראשי, נגן יוטיוב, מסך סיבוב.
===================================================================== */
/* ---------- כותרת עליונה דביקה (מבוססת #site-header של v2) ---------- */
#shell-header{
position:sticky; top:0; z-index:var(--z-header); min-height:var(--header-h);
display:flex; align-items:center; background:rgba(10,14,20,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
box-shadow:0 8px 24px -12px rgba(0,0,0,.6); border-bottom:1px solid var(--glass-border);
}
.shell-header-inner{width:100%; display:flex; align-items:center; gap:var(--sp-2)}
.shell-brand{display:flex; align-items:center; gap:8px; flex:none; font-family:'Karantina'; font-size:1.375rem; color:var(--text); white-space:nowrap}
.shell-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px 2px var(--primary)}
/* ---------- ניווט ראשי (12 דפי המפה) ---------- */
.shell-nav{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:4px; flex:1 1 auto; min-width:0}
.shell-nav::-webkit-scrollbar{display:none}
.shell-nav-link{
flex:none; font-size:0.78125rem; color:var(--text-muted); background:transparent; border:1px solid transparent;
padding:0.4375rem 0.75rem; border-radius:var(--radius-chip); white-space:nowrap; transition:all var(--dur) var(--ease);
min-height:44px; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.shell-nav-link:hover{color:var(--text); background:rgba(255,255,255,.06)}
.shell-nav-link.active{color:var(--bg); background:var(--gold); font-weight:700}
.shell-nav-link.is-building{color:var(--text-dim); cursor:default; pointer-events:none}
/* ---------- נגן יוטיוב גלובלי (סרגל עליון, inline-end = שמאל ב-RTL) ---------- */
.ytplayer{position:relative; flex:none; inset-inline-end:0}
.ytplayer-toggle{
width:44px; height:44px; border-radius:50%; background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.08);
color:var(--text); display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease);
}
.ytplayer-toggle:hover{background:#1e2a3f}
.ytplayer-toggle[aria-expanded="true"]{color:var(--gold); border-color:rgba(251,191,36,.4)}
.ytplayer-panel{
position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:min(320px,86vw); z-index:var(--z-dropdown);
background:var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow-card);
padding:var(--sp-2);
}
.ytplayer-panel[hidden]{display:none}
.ytplayer-frame{position:relative; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; background:#000; margin-bottom:var(--sp-1)}
.ytplayer-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ytplayer-controls{display:flex; align-items:center; gap:10px}
.ytplayer-controls button{width:36px; height:36px; border-radius:50%; background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.08); color:var(--text); display:flex; align-items:center; justify-content:center; flex:none}
.ytplayer-controls button:hover{background:#1e2a3f}
.ytplayer-volume{flex:1 1 auto; accent-color:var(--gold); min-height:44px}
.ytplayer-status{font-size:0.71875rem; color:var(--text-dim); margin-top:8px; text-align:center}
.ytplayer.fullscreen .ytplayer-panel{
position:fixed; inset:var(--sp-3); top:var(--sp-3); bottom:var(--sp-3); width:auto; max-width:none; z-index:var(--z-overlay);
display:flex; flex-direction:column; justify-content:center;
}
.ytplayer.fullscreen .ytplayer-frame{aspect-ratio:auto; flex:1 1 auto}
/* ---------- מסך סיבוב, טלפון לאורך (זהה ל-#rotate-screen של v2) ---------- */
#rotate-screen{
position:fixed; inset:0; z-index:var(--z-rotate); display:none;
flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2);
background:var(--bg); color:var(--text); text-align:center; padding:var(--sp-4);
}
html[data-layout="rotate"] #rotate-screen{display:flex}
html[data-layout="rotate"] #app-root{display:none}
.rotate-icon{width:4.5rem; height:4.5rem; color:var(--gold); animation:rotate-hint 1.8s ease-in-out infinite; margin-bottom:var(--sp-2)}
@keyframes rotate-hint{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(90deg)} }
.rotate-title{font-family:'Karantina'; font-size:clamp(1.75rem,6vw,2.5rem); color:var(--gold)}
.rotate-sub{color:var(--text-muted); font-size:0.9375rem; max-width:34ch; margin-top:4px}
/* =====================================================================
משימה 45, שלב 0. כל התוספות של הפריסה החדשה, השכבות והשדות.
אסור לשנות את שפת העיצוב: הצבעים, הגופנים, הרדיוסים, הרווחים והתנועה
נשארים בדיוק כפי שאושרו. משנים סידור, לא מראה.
===================================================================== */
/* ---------- 0.1ב: שם לחיץ (Shell.playerLink / Shell.managerLink) ----------
סימון חזותי עדין בלבד, בשפת העיצוב המאושרת. **בלי קו תחתון כחול.** */
.entity-link{
color:inherit; text-decoration:none; cursor:pointer;
border-bottom:1px dotted rgba(251,191,36,.45);
transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.entity-link:hover, .entity-link:focus-visible{ color:var(--gold); border-bottom-color:var(--gold); }
.entity-link:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:3px; }
/* שחקן בלי כרטיס: טקסט רגיל, לא קישור מת */
.entity-name{ color:inherit; }
/* ---------- 0.1: שדות PIN ----------
הסתרה חזותית ב--webkit-text-security, שעובדת רק על שדה שאינו type="password".
התמיכה אומתה: ספארי מ-3.1, כרום מ-4, אדג' מ-79, פיירפוקס מ-114.
כשהמחלקה מוסרת (כפתור העין) הספרות מוצגות. */
.pin-masked{ -webkit-text-security:disc; text-security:disc; }
/* כל שדה קלט לפחות 16px — מתחת לזה iOS מזנקת בזום בכל פוקוס.
17.5px * 0.9143 = 16px בדיוק. חל על שדות קלט בלבד, לא על שום טקסט אחר. */
input, textarea, select{ font-size:max(1rem, 16px); }
/* שטח נגיעה מוגדל: נגיעה אחת פותחת מקלדת בוודאות, בלי להסתמך על focus() */
input[data-pin-field]{ min-height:52px; letter-spacing:0.35em; text-align:center; }
.pin-eye{
width:44px; height:44px; border-radius:50%; background:var(--bg-elev-2);
border:1px solid rgba(255,255,255,.08); color:var(--text-muted);
display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.pin-eye:hover{ background:#1e2a3f; color:var(--text); }
.pin-eye[aria-pressed="true"]{ color:var(--gold); border-color:rgba(251,191,36,.4); }
.pin-field-row{ display:flex; align-items:center; gap:8px; }
.pin-field-row > input{ flex:1 1 auto; min-width:0; }
/* שדה סכום: אין חצים, יישור לשמאל כמו מספר */
input[data-amount-field]{ text-align:start; font-variant-numeric:tabular-nums; }
/* ---------- 0.1ד סעיף 8: השכבה. dialog אחד עם מחסנית פנימית ---------- */
.shell-layer{
border:none; padding:0; background:var(--bg); color:var(--text);
max-width:none; max-height:none; overflow:hidden;
}
.shell-layer::backdrop{ background:rgba(4,6,10,.72); backdrop-filter:blur(3px); }
.shell-layer-chrome{
display:flex; align-items:center; gap:var(--sp-2);
padding:var(--sp-2) var(--sp-3);
padding-top:max(var(--sp-2), env(safe-area-inset-top));
border-bottom:1px solid var(--glass-border);
background:rgba(10,14,20,.92); position:sticky; top:0;
}
.shell-layer-title{ flex:1 1 auto; font-family:'Karantina'; font-size:1.375rem; color:var(--text); min-width:0; }
.shell-layer-back, .shell-layer-close{
width:44px; height:44px; border-radius:50%; background:var(--bg-elev-2);
border:1px solid rgba(255,255,255,.08); color:var(--text);
display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.shell-layer-back:hover, .shell-layer-close:hover{ background:#1e2a3f; }
.shell-layer-back[hidden]{ display:none; }
/* גלילה מלאה בפנים, והגלילה לא "בורחת" לדף שמאחור */
.shell-layer-body{
overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
padding:var(--sp-3);
padding-bottom:max(var(--sp-3), env(safe-area-inset-bottom));
}
.shell-layer-body:focus{ outline:none; }
/* במחשב: חלון ממורכז. */
html[data-layout="desktop"] .shell-layer{
width:min(980px, 94vw); max-height:88dvh; border-radius:var(--radius);
box-shadow:var(--shadow-card); margin:auto;
}
html[data-layout="desktop"] .shell-layer-body{ max-height:calc(88dvh - 68px); }
/* בטלפון לאורך: מסך מלא מלמטה. */
html[data-layout="phone"] .shell-layer{
width:100vw; max-width:100vw; height:100dvh; margin:0;
border-radius:0; position:fixed; inset:0;
}
html[data-layout="phone"] .shell-layer-body{ height:calc(100dvh - 60px); }
/* ---------- 0.2: פס הרמז לסיבוב בזמן מצ'אף חי ----------
מסך סיבוב מלא לעולם אינו מכסה משחק פעיל: הוא היה גוזל מהמנהל את חלון
60 השניות לחילוף אחרי פציעה, והמשחק היה מוכרע על ידי באג ממשק. */
#rotate-hint-bar{
display:none; position:fixed; top:0; inset-inline:0; z-index:var(--z-toast);
padding:6px var(--sp-2); padding-top:max(6px, env(safe-area-inset-top));
background:rgba(251,191,36,.92); color:#1a1206;
font-size:0.78125rem; font-weight:700; text-align:center;
}
html[data-rotate-hint="true"] #rotate-hint-bar{ display:block; }
html[data-rotate-hint="true"] #shell-header{ top:28px; }
/* =====================================================================
0.2, היפוך כיוון התצוגה. בטלפון האפליקציה **לאורך**.
החדשות הטובות שהתאמתו בפועל: 390x844 (לאורך) פחות מגביל מ-844x390
(לרוחב). הבעיה הקשה בפריסה הקודמת הייתה גובה 390px בלבד. רוב הכללים
התפשטו ולא הסתבכו, ומה שהיה בטורים לרוחב הסתדר בערימה לאורך.
===================================================================== */
/* 100vh אסור: הוא קופץ עם סרגל הכתובת בספארי מובייל. dvh/svh נתמכים
בספארי מ-15.4, בכרום ובאדג' מ-108, ובפיירפוקס מ-101. */
html[data-layout="phone"] #app-root{ min-height:100svh; }
/* הסרגל: תשעה פריטים חייבים להיכנס לרוחב 390. אם לא נכנסים — **גלילה
אופקית**, ולא הקטנת גופן ולא הסתרת פריטים. */
html[data-layout="phone"] .shell-nav{
overflow-x:auto; flex-wrap:nowrap; scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
html[data-layout="phone"] .shell-nav-link{ scroll-snap-align:start; }
html[data-layout="phone"] .shell-header-inner{ flex-wrap:wrap; row-gap:4px; }
html[data-layout="phone"] .shell-brand{ font-size:1.1875rem; }
html[data-layout="phone"] .shell-brand-sub{ display:none; }
#shell-header{ padding-top:env(safe-area-inset-top); }
.shell-brand-sub{ color:var(--text-dim); font-size:0.75rem; font-weight:400; }
/* safe-area מתנהג אחרת בכל כיוון: לאורך רלוונטיים top ו-bottom, לרוחב
המגרעת עוברת לצד. יש דיווחים שהערכים חוזרים לפעמים כאפס, ולכן תמיד
עם ברירת מחדל דרך max(). */
html[data-layout="phone"] .wrap{
padding-inline:max(var(--sp-2), env(safe-area-inset-left), env(safe-area-inset-right));
padding-bottom:max(var(--sp-3), env(safe-area-inset-bottom));
}
/* ---------- טבלאות רחבות (0.2, מוקד סיכון 3) ----------
גלילה אופקית בתוך מכל ייעודי. **לא** הקטנת גופן ו**לא** הסתרת עמודות.
עמודת השם נשארת דבוקה בצד ימין — ולכן inset-inline-start ולא left:
הדפוס המתועד בספרות נכתב לשפות משמאל לימין, ואצלנו העמודה הראשונה
היא בצד ימין. */
.table-scroll{
overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
max-width:100%;
}
.table-scroll > table{ min-width:max-content; }
.table-scroll th.sticky-name, .table-scroll td.sticky-name{
position:sticky; inset-inline-start:0; z-index:2;
background:var(--bg-elev); box-shadow:-8px 0 12px -10px rgba(0,0,0,.7);
}
.table-scroll thead th.sticky-name{ z-index:3; }
/* סרגלים דבוקים מכבדים safe-area ואינם מכסים תוכן */
html[data-layout="phone"] .sticky-bottom-bar{
padding-bottom:max(var(--sp-2), env(safe-area-inset-bottom));
}
/* 48, ממצא 121: לשונית שהיא קישור לדף מלא ולא פאנל.
נראית כמו לשונית רגילה, ולעולם אינה מקבלת מצב .active — היא עוזבת את
הדף. initTabs אוסף .tab-btn, ולכן הקישור מקבל את אותו עיצוב בלי CSS
כפול, ומכיוון שאין לו data-tab הוא לעולם לא ייבחר כלשונית פעילה. */
.tab-btn-link{ text-decoration:none; display:inline-flex; align-items:center; }
/* =====================================================================
משימה 48, A-80: **כיבוי עיגון הגלילה במכל השכבה.**
Chrome מזיז `scrollTop` בעצמו כדי לשמור על מיקום ויזואלי כשתוכן נוסף
מעל נקודת הצפייה (scroll anchoring). זה נמדד בייצור: שחזור גלילה
ל-500 החזיר 1445, ושחזור ל-600 החזיר 1543 - **הפרש קבוע של כ-945**,
בדיוק גובה התוכן שמודול הדף מצייר אחרי השחזור. בלי הכיבוי הזה שחזור
מיקום הגלילה בשכבה אינו יכול לעבוד, כמה שלא ננסה לקבוע אותו בקוד.
===================================================================== */
.shell-layer-body{ overflow-anchor:none; }
/* =====================================================================
משימה 50: שבב המנהל, האישור האחיד, פס השמירה, וחיווי "נשמר".
כל מה שכאן הוא **חדש ואינו נוגע ב-`.tabs-nav`** — משימה 49 תיקנה את
גלילת הלשוניות, ושכבה שנייה על אותו כלל היא בדיוק מה ש-§13 אוסר.
===================================================================== */
/* --- §4.2 פריט 5: שבב המנהל המחובר. משימה 59 §8.6: נהיה קישור לחיץ
שפותח את כרטיס המנהל כשכבה (IA "כניסות ומוסתרים"). --- */
.shell-manager-chip{
display:flex; align-items:center; gap:8px; margin-inline-start:auto;
padding:5px 12px 5px 6px; border-radius:999px;
background:var(--bg-elev-2); border:1px solid var(--border);
font-size:0.8125rem; font-weight:600; color:var(--text-muted);
max-width:40vw; overflow:hidden;
text-decoration:none; cursor:pointer; min-height:36px;
transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shell-manager-chip:hover{border-color:rgba(255,255,255,.22); color:var(--text)}
.shell-manager-chip:focus-visible{outline:none; box-shadow:var(--focus-ring)}
/* DYN פרק 3 הנחיה 10: צ'יפ קטן מקבל אזור מגע מורחב בלי לגדול חזותית */
.shell-manager-chip{position:relative}
.shell-manager-chip::before{content:''; position:absolute; inset:-6px}
.shell-manager-chip-img{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.shell-manager-chip-dot{width:26px; height:26px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.shell-manager-chip-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html[data-layout="phone"] .shell-manager-chip-name{display:none}
html[data-layout="phone"] .shell-manager-chip{padding:4px; max-width:none}
/* --- §7.2: Shell.confirm. מודאל בתוך #app-root, לא דיאלוג דפדפן. --- */
/* משימה 71 §6.3: האישור הוא