/* ============================================================
   identity.css — הזדהות משותפת · מכון גש"ר לגמרא
   ------------------------------------------------------------
   קובץ עצמאי. נטען אחרי כל גיליון אחר ואינו משנה אף כלל קיים.
   קידומת המשפחה: gl-id-   (לפי חוזה ההפרדה)
   ============================================================ */

:root{
  --gl-id-primary:#1c3552;
  --gl-id-gold:#cba05f;
  --gl-id-green:#2c6b2f;
  --gl-id-amber:#9b630c;
  --gl-id-grey:#616c6d;
  --gl-id-line:#dfe4e5;
}

/* ---------- האייקון הצף ----------
   אותה שפה כמו האייקונים שבכלי מערך השיעור: מלבן מעוגל, מסגרת
   דקה אחת, רקע לבן וקו-מתאר. לא עיגול כבד עם צל — האייקון הזה
   יושב על דף שיווקי ואינו אמור למשוך אליו את העין. */
.gl-id-btn{
  /* ממורכז לגובה שורת התפריט: (80 - 44) / 2 = 18 */
  position:fixed; top:18px; left:20px;
  width:48px; height:44px; border-radius:12px;
  background:#fff; border:1px solid #c8d0d3;
  cursor:pointer; z-index:1100; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:background .2s, border-color .2s, top .3s ease-in-out;
}
.gl-id-btn svg{
  width:22px; height:22px; fill:none;
  stroke:var(--gl-id-primary); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.gl-id-btn:hover{ background:#eef2f4; }

/* מזוהה — ירוק רך. פג — ענבר רך. שניהם עדינים בכוונה: זו הודעת
   מצב, לא אזהרה. */
.gl-id-btn.gl-on{ background:#f3f9f3; border-color:#bcd9bd; }
.gl-id-btn.gl-on svg{ stroke:var(--gl-id-green); }
.gl-id-btn.gl-expired{ background:#fdf6ec; border-color:#e3cfa6; }
.gl-id-btn.gl-expired svg{ stroke:var(--gl-id-amber); }

/* ---------- האות בתוך האייקון ----------
   כשמזוהים, הדמות הגנרית מתחלפת באות הראשונה של שם המנוי. זה
   ההבדל שהעין קולטת מיד בין אנונימי למזוהה, ובאותו שטח בדיוק. */
.gl-id-letter{
  font-family:'Assistant',Arial,sans-serif;
  font-size:1.15rem; font-weight:700; line-height:1;
  color:var(--gl-id-green); user-select:none;
}
.gl-id-letter[hidden]{ display:none; }
.gl-id-btn.gl-on svg{ display:none; }

.gl-id-dot{
  position:absolute; top:5px; left:5px; width:8px; height:8px;
  border-radius:50%; background:var(--gl-id-green); border:1.5px solid #fff;
}
.gl-id-btn.gl-expired .gl-id-dot{ background:var(--gl-id-amber); }
.gl-id-dot[hidden]{ display:none; }

/* בתוך כלי שיושב במסגרת אין שורת ניווט — האייקון עולה למעלה */
.gl-id-btn.gl-inframe{ top:15px; left:15px; width:40px; height:36px; }
.gl-id-btn.gl-inframe svg{ width:19px; height:19px; }
.gl-id-btn.gl-inframe .gl-id-letter{ font-size:1rem; }

/* ---------- כפתור המתנה — צמוד מתחת לאייקון ----------
   ספציפיות גבוהה בכוונה (body ...), כי identity.css נטען לפני גיליון
   העיצוב הפנימי של הדף. כשהמבצע יסתיים והכפתור יוסר — הכלל פשוט
   לא ימצא אותו.
   המרכזים מיושרים: האייקון 48 רוחב מ-20 (מרכז 44), המתנה 60 מ-14. */
body .gift-toggle-btn{
  top:calc(var(--nav-height, 80px) + 15px); left:14px;
  transition:transform .3s ease, box-shadow .3s ease, top .3s ease-in-out;
}

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

   מזיזים בעיצוב בלבד. הסימון ב-HTML לא נגע, ולכן הכפתור נשאר בן של
   .floating-buttons-right — וכלל הקיוסק שמכבה את השורה הזאת ממשיך
   לחול עליו. בחירה מכוונת: הזזה ב-HTML הייתה מנתקת אותו מהכלל הזה.

   המרכזים מיושרים: האייקון 40 רוחב מ-15 (מרכז 35), המתנה 42 מ-14. */
#giftBtn{
  position:fixed; top:63px; left:14px; right:auto; z-index:1100;
}

/* בנייד שלושת הכפתורים השמאליים (דוחות · לוח אלופים · קובץ) מקובעים
   ל-15/15 — בדיוק מתחת לאייקון ההזדהות. מורידים אותם אל מתחת לשני
   האייקונים. בדסקטופ הם יושבים בתוך המסגרת הלבנה ואין התנגשות. */
@media (max-width:768px){
  #giftBtn{ top:63px; left:13px; }                /* בנייד הכפתור 45 רוחב */
  .floating-buttons-left{ top:120px !important; }
}

/* ---------- נייד ----------
   בפס התפריט של הנייד יושב כפתור הטלפון בפינה השמאלית העליונה,
   ולכן כאן האייקון אינו עולה על הפס. במקום זה — כשהפס נעלם בגלילה,
   שני האייקונים עולים ותופסים את מקומו, ויורדים חזרה כשהוא חוזר. */
@media (max-width:900px){
  .gl-id-btn{ top:calc(var(--nav-height, 80px) + 8px); left:15px;
              width:44px; height:40px; }
  body .gift-toggle-btn{ top:calc(var(--nav-height, 80px) + 60px); left:14px; }

  body:has(header.nav-up) .gl-id-btn{ top:10px; }
  body:has(header.nav-up) .gift-toggle-btn{ top:62px; }
}

/* אייקון ההזדהות נעלם כשחלון צף פתוח — לכלי יש אייקון משלו */
body:has(.game-modal.active) .gl-id-btn,
body:has(.builder-modal.active) .gl-id-btn{ display:none !important; }

/* ---------- החלונית — במרכז המסך ---------- */
.gl-id-ov{
  position:fixed; inset:0; z-index:10050;
  background:rgba(28,53,82,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  direction:rtl;
}
.gl-id-ov[hidden]{ display:none; }
/* כשחלונית ההזדהות פתוחה — הדף שמאחוריה לא נגלל */
html:has(.gl-id-ov:not([hidden])){ overflow:hidden; }

.gl-id-box{
  background:#fff; border-radius:14px; width:100%; max-width:390px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
  font-family:'Assistant',Arial,sans-serif; text-align:right;
}
.gl-id-head{
  background:var(--gl-id-primary); color:#fff;
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
}
.gl-id-head h3{ margin:0; font-size:1.05rem; font-weight:700; }
.gl-id-x{
  background:none; border:none; color:#fff; font-size:1.2rem;
  cursor:pointer; line-height:1; padding:4px 6px; border-radius:6px;
}
.gl-id-x:hover{ background:rgba(255,255,255,.15); }

.gl-id-body{ padding:18px; }
/* הודעת המצב ממורכזת: היא שורה אחת עד שתיים, והיא נקראת כהכרזה
   ולא כפסקה. תוויות השדות שמתחתיה נשארות בימין — הן שייכות לשדה
   שמתחתן, לא לבלוק הזה. */
.gl-id-msg{ font-size:.95rem; color:var(--gl-id-primary); line-height:1.55;
            margin:0 0 14px; text-align:center; }
.gl-id-msg b{ font-weight:700; }
.gl-id-sub{ font-size:.85rem; color:var(--gl-id-grey); }

.gl-id-field{ margin-bottom:11px; }
.gl-id-field label{
  display:block; font-size:.8rem; font-weight:700;
  color:var(--gl-id-grey); margin-bottom:5px;
}
.gl-id-field input{
  font-family:inherit; font-size:1rem; width:100%; box-sizing:border-box;
  padding:9px 11px; border:1px solid #c8d0d3; border-radius:8px;
  color:var(--gl-id-primary);
}
/* המייל נקרא משמאל לימין, אבל ממורכז בתיבה — כמו שדה הקוד.
   שני שדות באותה חלונית שנצמדים לקצוות שונים נראים כתקלת יישור. */
.gl-id-mail input{ direction:ltr; text-align:center; letter-spacing:0; }
.gl-id-field:not(.gl-id-mail) input{ letter-spacing:.08em; text-align:center; }
.gl-id-field input:focus{
  outline:none; border-color:var(--gl-id-gold);
  box-shadow:0 0 0 2px rgba(203,160,95,.25);
}

/* ---------- הקוד מוסתר, עם עין לגילוי ----------
   שדה מוסתר הוא גם הגנה אמיתית — מורה מקליד קוד מול כיתה מוקרנת —
   וגם שפה. שדה גלוי נראה כמו טופס; שדה מוסתר עם עין נראה כמו מערכת.
   העין יושבת בקצה השמאלי, המקום המקובל בממשקים בעברית. */
.gl-id-wrap{ position:relative; }
.gl-id-wrap input{ padding-left:42px; }   /* מפנה מקום לעין */

.gl-id-eye{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:31px; height:31px; padding:0; border:none; background:none;
  border-radius:7px; cursor:pointer; color:var(--gl-id-grey);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.gl-id-eye:hover{ background:#eef2f4; color:var(--gl-id-primary); }
.gl-id-eye:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(203,160,95,.45);
}
.gl-id-eye svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.gl-id-eye svg[hidden]{ display:none; }

/* נקודות ההסתרה צפופות מדי עם הריווח של הקוד — מרווחים אותן,
   כדי שייקרא כקוד ולא ככתם. */
.gl-id-wrap input[type="password"]{ letter-spacing:.32em; }

.gl-id-act{ display:flex; gap:9px; margin-top:14px; }
.gl-id-go, .gl-id-out{
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  padding:9px 18px; border-radius:8px; border:2px solid transparent; flex:1;
}
.gl-id-go{ background:var(--gl-id-primary); color:#fff; }
.gl-id-go:hover{ background:#14273d; }
.gl-id-go[disabled]{ opacity:.55; cursor:default; }
.gl-id-out{ background:#fff; color:var(--gl-id-grey); border-color:var(--gl-id-line); }
.gl-id-out:hover{ background:#f4f6f5; }

/* ממורכזת כמו הודעת המצב שמעליה — שורת סטטוס, לא פסקה.
   (אותו כלל גם ב-.mh-idnote בדפי הלמידה.) */
.gl-id-note{ font-size:.85rem; margin:12px 0 0; min-height:1.1em; text-align:center; }
.gl-id-note.err{ color:#a04000; font-weight:700; }
.gl-id-note.ok{ color:var(--gl-id-green); font-weight:700; }

/* שורת המתנה — מוצגת רק לאורח */
.gl-id-gift{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--gl-id-line);
  text-align:center;
}
.gl-id-gift button{
  font-family:inherit; font-size:.92rem; font-weight:700; cursor:pointer;
  background:var(--gl-id-gold); color:var(--gl-id-primary);
  border:2px solid var(--gl-id-primary); border-radius:8px; padding:9px 20px;
  display:inline-flex; align-items:center; gap:8px;
}
.gl-id-gift button:hover{ background:#b98f4d; }

/* ============================================================
   מורה או מנהל במוסד — תוספת בלבד, אף כלל קיים לא שונה.
   ------------------------------------------------------------
   מסגרת זהב וראשי תיבות. המסגרת היא ההבדל שהעין קולטת: כפתור
   רחב יותר לא נכנס לפינה, ולכן הכפתור נשאר באותו גודל בדיוק.
   ============================================================ */
.gl-id-btn.gl-org{
  background:#fffaf1; border:2px solid var(--gl-id-gold);
  box-shadow:0 4px 14px rgba(203,160,95,.28);
}
.gl-id-btn.gl-org:hover{ background:#fbf1dd; }
.gl-id-btn.gl-org .gl-id-letter{
  color:var(--gl-id-primary); font-size:1rem; letter-spacing:.02em;
  direction:rtl;
}
.gl-id-btn.gl-inframe.gl-org .gl-id-letter{ font-size:.9rem; }

/* נקודת זהב = "נוסף משהו מאז הביקור האחרון" */
.gl-id-btn.gl-new .gl-id-dot{
  background:var(--gl-id-gold); border-color:#fff;
  width:10px; height:10px; top:-4px; left:-4px;
  box-shadow:0 0 0 1.5px var(--gl-id-primary);
}

/* כוכב — עד הביקור הראשון בתמונת המצב */
.gl-id-star{
  position:absolute; top:-8px; left:-8px;
  width:18px; height:18px; border-radius:50%;
  background:var(--gl-id-primary); color:var(--gl-id-gold);
  font-size:11px; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px #fff;
  animation:gl-id-twinkle 2.4s ease-in-out 3;
}
.gl-id-star[hidden]{ display:none; }
@keyframes gl-id-twinkle{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.22); }
}
@media (prefers-reduced-motion:reduce){ .gl-id-star{ animation:none; } }

/* תווית ריחוף — משמאל לימין של המסך: האייקון יושב בקצה השמאלי,
   ולכן התווית נפתחת פנימה, ימינה ממנו. במגע אין ריחוף, והתווית
   לא מוצגת — שם הכיתוב יושב בתוך החלונית. */
.gl-id-tip{
  position:absolute; top:50%; left:calc(100% + 9px);
  transform:translateY(-50%) translateX(-4px);
  background:var(--gl-id-primary); color:#fff; white-space:nowrap;
  font-family:'Assistant',Arial,sans-serif; font-size:.85rem; font-weight:700;
  padding:5px 11px; border-radius:7px; direction:rtl;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.gl-id-tip[hidden]{ display:none; }
@media (hover:hover){
  .gl-id-btn:hover .gl-id-tip,
  .gl-id-btn:focus-visible .gl-id-tip{ opacity:1; transform:translateY(-50%) translateX(0); }
}

/* ---------- השורה בתוך החלונית ---------- */
.gl-id-org{
  border:1px solid #ead9b8; background:#fffaf1; border-radius:10px;
  padding:12px 12px 13px; margin:0 0 12px; text-align:center;
}
.gl-id-org[hidden]{ display:none; }
.gl-id-org-head{ font-size:.82rem; font-weight:700; color:var(--gl-id-grey); }
.gl-id-org-cls{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:8px; }
.gl-id-chip{
  font-size:.8rem; font-weight:700; color:var(--gl-id-primary);
  background:#fff; border:1px solid #e0cda6; border-radius:999px; padding:2px 10px;
}
.gl-id-snap{
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  margin-top:11px; width:100%; padding:9px 14px; border-radius:8px;
  background:var(--gl-id-primary); color:#fff; border:2px solid var(--gl-id-gold);
}
.gl-id-snap:hover{ background:#14273d; }
.gl-id-new{
  display:inline-block; font-size:.72rem; font-weight:700; line-height:1;
  background:var(--gl-id-gold); color:var(--gl-id-primary);
  border-radius:999px; padding:3px 7px; margin-right:4px; vertical-align:1px;
}

/* השורה השנייה בברכה שאחרי ההזדהות */
.gl-id-hint{
  display:block; margin-top:5px; font-weight:400; color:var(--gl-id-primary);
}