/* ==========================================================================
   AdminModeToggle — Tickchak Live
   Figma: "AdminModeToggle" (UO0nhgcl5YIqYS16vYOXAE) node 3547:24967
          └ on=false 3547:24966 · on=true 3547:24965
          כל מצב = instance "Toggle" (64×28, הטוגל של ה-DS) + fe:edit (24×24), בתוך גלולה.
   Required: tokens.css

   ── מדוד מהנתון הגולמי (23/07, אחרי שאסף החליף לטוגל-DS בפיגמה) ──────────
     גלולה   112×44 · radius מלא · רקע #ffffff @20% (= --tl-color-bg-surface)
     ריפוד-צדדי 8 · רווח 8   →  8 + 64 + 8 + 24 + 8 = 112 ✓
     מסילה   64×28 · כבוי #ffffff@20% (bg/fill/primary) · דלוק #8eedff (TA/brand/main)
     כפתור   20×20 · **לבן תמיד** (color/Solids/white) · כבוי x=4 · דלוק x=calc(100%−24)
     תוויות  «כבוי»/«פעיל» בתוך המסילה, crossfade (כמו toggle.css)
     עיפרון  24×24 · קו לבן, בשני המצבים

   ✅ 23/07: אסף שם בפיגמה את הטוגל של ה-DS (64×28, כפתור-לבן 20×20) במקום הרכיב הישן.
      הדמו נבנה מחדש לפי אותו מפרט — זהה ל-`toggle.css` (.toggle.live). המסילה-הדלוקה
      `--ta-color-brand-main` (#8eedff) והכפתור `--color-solids-white`, שניהם קשורים לפיגמה.
      → gap.admin_mode_toggle.knob_color_off_palette (סגור) · gap.admin_mode_toggle.not_ds_toggle (בוטל)

   Usage:
     <button class="admin-mode-toggle" type="button" aria-pressed="false">
       <span class="admin-mode-toggle__track" aria-hidden="true">
         <span class="admin-mode-toggle__knob"></span>
         <span class="admin-mode-toggle__label admin-mode-toggle__label--off">כבוי</span>
         <span class="admin-mode-toggle__label admin-mode-toggle__label--on">פעיל</span>
       </span>
       <svg class="admin-mode-toggle__icon" …>…</svg>
     </button>
   ========================================================================== */

.admin-mode-toggle{
  display:inline-flex;align-items:center;
  gap:var(--space-sm);                          /* 8 */
  height:var(--dim-11,44px);                    /* 44 */
  padding:0 var(--space-sm);                    /* 8 */
  border-radius:var(--border-radius-full);
  background:var(--tl-color-bg-surface);        /* #fff @20% */
  border:none;cursor:pointer;
  direction:ltr;                                /* סדר-הילדים כמו בפיגמה, גם ב-RTL */
  color:var(--tl-color-icon-default);           /* לבן — לעיפרון */
  transition:background .2s;
}
.admin-mode-toggle:hover{background:var(--tl-color-bg-surface-hover);}
.admin-mode-toggle:focus-visible{outline:2px solid var(--tl-color-border-default);outline-offset:2px;}

/* המסילה — טוגל ה-DS (64×28) */
.admin-mode-toggle__track{
  position:relative;flex:none;
  width:var(--dim-16,64px);                     /* 64 — dimension/dimension-16 */
  height:var(--dim-7,28px);                     /* 28 — dimension/dimension-7 */
  border-radius:var(--border-radius-full);
  background:var(--tl-color-bg-surface);        /* כבוי — #fff@20% */
  transition:background .4s cubic-bezier(.4,0,.2,1);
}
.admin-mode-toggle[aria-pressed="true"] .admin-mode-toggle__track{
  background:var(--ta-color-brand-main);        /* #8eedff — TA/color/brand/main */
}

/* הכפתור — לבן תמיד, 20×20 (color/Solids/white) */
.admin-mode-toggle__knob{
  position:absolute;top:50%;left:4px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--color-solids-white,#fff);   /* לבן — color/Solids/white */
  box-shadow:0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
  transform:translateY(-50%);
  transition:left .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.admin-mode-toggle[aria-pressed="true"] .admin-mode-toggle__knob{
  left:calc(100% - 24px);                       /* 64 − 20 − 4 */
}
.admin-mode-toggle:active .admin-mode-toggle__knob{
  box-shadow:0 3px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.15);
}

/* התוויות — crossfade כבוי/פעיל (כמו toggle.css .live) */
.admin-mode-toggle__label{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--font-family-live);font-size:12px;font-weight:400;
  line-height:16px;white-space:nowrap;pointer-events:none;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.admin-mode-toggle__label--off{
  right:8px;opacity:1;color:var(--tl-color-text-subtle);
  transform:translateY(-50%) translateX(0);
}
.admin-mode-toggle__label--on{
  left:8px;opacity:0;color:var(--color-turquoise-700);
  transform:translateY(-50%) translateX(-4px);
}
.admin-mode-toggle[aria-pressed="true"] .admin-mode-toggle__label--off{
  opacity:0;transform:translateY(-50%) translateX(4px);
}
.admin-mode-toggle[aria-pressed="true"] .admin-mode-toggle__label--on{
  opacity:0.6;transform:translateY(-50%) translateX(0);
}

/* העיפרון — אותו fe:edit של AdminIcon */
.admin-mode-toggle__icon{
  width:var(--dim-6,24px);height:var(--dim-6,24px);
  display:block;flex:none;
}
.admin-mode-toggle__icon [stroke="black"]{stroke:currentColor;}
.admin-mode-toggle__icon [fill="black"]{fill:currentColor;}

@media (prefers-reduced-motion:reduce){
  .admin-mode-toggle__track,
  .admin-mode-toggle__knob,
  .admin-mode-toggle__label{transition:none;}
}