/* ============================================================================
   כפתור טקסט · "דרך הרקמה" (b8) · #338, 16.9.2026
   ============================================================================

   🔑 **הכרעת איתי, 16.9.2026**, אחרי חמישה סבבי דוגמאות: מתוך שש-עשרה
   הווריאציות של "משפחת הפעימה" נבחרה **b8 · דרך הרקמה**. זהו נמל של עיצוב
   שנבחר — לא עיצוב חדש. כל מספר כאן (הקצב, קני המידה, השקיפויות, הריפודים)
   מגיע מ-‎part-bold.html‎ כפי שאושר, ואין לשנותו בלי הכרעה חדשה.

   **מה זה עושה.** הלב מתוך הלוגו ‎s❤perfitgirls‎ יושב בקצה הקריאה של המילה
   (ימין, כי האתר עברית). הוא **פועם תמיד** — בקצב לב אמיתי (לאב-דאב: מכה
   חזקה, מכה קטנה אחריה, ומנוחה ארוכה) — במנוחה חיוור וקטן, ובריחוף או
   במיקוד מלא וגדול. באותם שני מצבים **עותק ורוד מדויק של המילה, באותו מקום
   בדיוק**, נדלק ונכבה באותו קצב — כך הצבע נושם בתוך האותיות **בלי שאף אות
   תזוז**. בלחיצה: משטח ורוד-בהיר שגדל מהמרכז, הלב מחשיך, ושכבת העותק
   מקבלת את הפעימה בעצמה.

   🔑 **הכרעת איתי, 17.9.2026, אחרי שפתח את הדף בטלפון.** שתי תיקונים,
   ושניהם נולדו מאותה מדידה: הפעימה הייתה מגודרת מאחורי ‎:hover‎
   ו-‎:focus-visible‎, ובלחיצה היא כובתה במפורש. לטלפון אין ריחוף — ולכן
   על המסך שלו **הלב לא זז מעולם**, והרגע היחיד שבו הוא נגע במילה היה
   הרגע היחיד שבו שום דבר לא הונפש.
     1. **הלב פועם תמיד**, בלי ריחוף ובלי מיקוד, בכל אחד מארבעת המשטחים.
     2. **לחיצה מריצה את הפעימה על הטקסט** במקום להקפיא אותו.
   ⚠ **המילה עצמה אינה פועמת במנוחה.** זה נשאר כפי שהיה: ארבע מילים
     שפועמות בלי הרף הן בלתי נסבלות. היא פועמת בריחוף, במיקוד ובלחיצה.

   ⚠ **מונפשים אך ורק ‎transform‎ ו-‎opacity‎.** אין ‎filter‎, אין צל מונפש, אין
     מאפיין פריסה מונפש. החלפות צבע בין מצבים הן מיידיות ולכן אינן הנפשה;
     צבע שמשתנה ברכות נעשה בהצלבת שקיפות של שתי שכבות זהות. הסמסונג של ליה
     הוא מכשיר צנוע, וזה מה שמחזיק אותו ב-60 פריימים.

   ⚠ **שום סימון אינו נכנס לתוך הגליף.** קריאוּת העברית היא השער שהפיל ארבעה
     סבבים קודמים. הלב יושב בשוליים שנשמרו לו מראש (‎padding-inline‎) ולא
     בתוך המילה, ושכבת העותק היא אותה מילה באותו מקום — ולכן אינה יכולה
     להיכנס לאות. נמדד מול בקרת טקסט רגיל ב-Chromium וב-WebKit (tissue-button.test.js).

   ⚠ **טיפוגרפיה — מה הובא ומה לא.** ‎part-bold.html‎ (מקור הווריאציה) אינו
     קובע גודל גופן ואינו קובע משקל; אלה היו של **מסגרת הדוגמה**, שנתנה לכל
     שש-עשרה הווריאציות אותו מפתח 800/13px כדי להשוות ביניהן. מה שאושר הוא
     ה**טיפול**, ולכן האתר שומר על הטיפוגרפיה שלו: ניווט 15px/500, תפריט
     נפתח 17px/500, לשוניות 15px/700, "יציאה" 14px/700.

   ⚠ **גובה אחד לשורה** (‎visual-height-parity‎): ‎--tb-row-h‎ הוא הגובה החזותי
     של המפתח, והוא **קטן** מיעד המגע. יעד המגע (44px) נשאר על האלמנט האמיתי
     — הקישור או הכפתור — ולכן שום דבר כאן אינו מגדיל שורה ואינו מזיז פריסה.

   ⚠ **מוחרג בהכרעת איתי:** הטקסט של הכפתור הצף (‎shared/floating-cta.js‎ —
     ‎.fc-label‎, ‎.fc-hint‎). באישור אפשרות E הוא אמר במפורש: "מחריג את הטקסט
     של הכפתור שיהיה היחיד שלא יחול עליו השינוי של אותיות הכפתור". אין להוסיף
     ‎.fc-label‎ או ‎.fc-hint‎ לרשימת הסלקטורים ב-‎shared/tissue-button.js‎.

   מלווה: shared/tissue-button.js · בדיקות: tissue-button.test.js
   ========================================================================= */

/* ── פלטת האתר וצורת הלב ── */
.tb-k {
  --tb-brand:#ff2d87; --tb-deep:#d0266f; --tb-dark:#b81f60;
  --tb-petal:#ffd6e8;
  --tb-muted:#6b5b62;
  --tb-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 3.95 13.4a5.15 5.15 0 0 1 0-7.3 5.15 5.15 0 0 1 7.3 0L12 6.85l.75-.75a5.15 5.15 0 0 1 7.3 0 5.15 5.15 0 0 1 0 7.3Z'/%3E%3C/svg%3E");

  /* ברירת מחדל; כל הקשר דורס אותה למטה */
  --tb-fs: 15px;
  --tb-row-h: 26px;

  /* ⚠ **‎--tb-hb‎ — קנה המידה של הלב במנוחה, וגם משרעת הפעימה.**
     הפעימה רצה **תמיד** (ראה למטה), ולכן היא חייבת לדעת סביב איזה גודל
     לפעום: במנוחה הלב קטן וחיוור, בריחוף ובמיקוד הוא מלא. תמונת המפתח
     ‎tb-beat‎ מכפילה את הערך הזה, ולכן יש **תמונת מפתח אחת** לשני המצבים
     במקום שתיים שיסטו זו מזו. נמדד בשני המנועים: שינוי הערך על האלמנט
     משנה הנפשה **שכבר רצה** (Chromium ו-WebKit, 17.9.2026). */
  --tb-hb: .68;

  /* ── גיאומטריה נגזרת מגודל הגופן, כך שאותו סימון עובד ב-14, ב-15 וב-17 ── */
  --tb-hs:  calc(var(--tb-fs) * .56);   /* קוטר הלב */
  --tb-pad: calc(var(--tb-fs) * .88);   /* השוליים שנשמרים ללב בצד הקריאה */
  --tb-end: calc(var(--tb-fs) * .2);    /* הקצה השני */
  --tb-hx:  calc(var(--tb-fs) * .14);   /* מרחק הלב מקצה התיבה */

  /* ⚠ הקשר ערימה על המילה עצמה. בלעדיו ‎z-index:-1‎ של משטח הלחיצה בורח אל
     מעבר לרקע הלבן של הכותרת, והמשטח נעלם לגמרי. */
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  height: var(--tb-row-h);
  padding-inline: var(--tb-pad) var(--tb-end);
  font-size: var(--tb-fs);
  line-height: 1;
  white-space: nowrap;
  transition: transform 150ms cubic-bezier(.2,.9,.25,1);
}

/* ── הלב ──
   נמצא תמיד, גם במנוחה, בשקיפות נמוכה ובקנה מידה קטן. במכשיר מגע אין ריחוף,
   ולכן שם הוא נוכח יותר — אחרת המילה נראית כטקסט בלבד. */
.tb-k::before {
  content: ""; position: absolute; inset-inline-start: var(--tb-hx); top: 50%;
  width: var(--tb-hs); height: var(--tb-hs); background: var(--tb-brand);
  -webkit-mask: var(--tb-heart) center/contain no-repeat;
          mask: var(--tb-heart) center/contain no-repeat;
  pointer-events: none; opacity: .42;
  transform: translateY(-50%) scale(var(--tb-hb));
  animation: tb-beat var(--beat) var(--beat-ease) infinite;
  transition: opacity 120ms linear, transform 200ms cubic-bezier(.2,1.5,.4,1);
}
@media (hover: none) {
  .tb-k { --tb-hb: .78; }
  .tb-k::before { opacity: .58; }
}

/* ── שכבת העותק — אותה מילה, באותו מקום בדיוק ──
   🔴 **המילה אינה טקסט אמיתי כאן, והיא לא יכולה להיות.**
   ‎shared/header-compact.js‎ בונה את רוחות הקיפול מ-‎links[i].textContent‎.
   צומת טקסט שני בתוך הקישור היה מכפיל שם כל מילת ניווט ("מחיריםמחירים")
   בכל הנפשת קיפול ופתיחת תפריט. לכן המילה יושבת בתכונה ‎data-tb-w‎ ומצוירת
   ב-‎content:attr()‎: ‎textContent‎ של הקישור נשאר **בדיוק** מה שהיה, ואף
   קורא אחר בפרויקט אינו מושפע. בקרה שלילית לזה — ב-tissue-button.test.js.
   ⚠ ‎aria-hidden‎ על ה-‎<u>‎ מוציא גם את התוכן של הפסבדו מעץ הנגישות, ולכן
     קורא מסך מקריא את המילה **פעם אחת**. */
.tb-k > u.tb-w {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: inherit; padding: inherit; text-decoration: none;
  color: var(--tb-brand); pointer-events: none; opacity: 0;
  transition: opacity 120ms linear;
}
.tb-k > u.tb-w::before { content: attr(data-tb-w); }

/* ── משטח הלחיצה — גדל מהמרכז, כמו פעימה שמילאה ── */
.tb-k::after {
  content: ""; position: absolute; inset: calc(var(--tb-fs) * -.1) 0; z-index: -1;
  border-radius: 99px; background: var(--tb-petal); pointer-events: none;
  opacity: 0; transform-origin: 50% 50%; transform: scale(.55);
  transition: opacity 80ms linear, transform 130ms cubic-bezier(.2,1.2,.35,1);
}

/* ── מגע ──
   ⚠ **‎@media (hover:hover)‎ ולא בלעדיו.** באנדרואיד ‎:hover‎ **נדבק** אחרי
     הקשה: לשונית ניהול שנלחצה הייתה ממשיכה לפעום בלי הרף על המסך של ליה —
     בדיוק מה שהעיצוב הזה אוסר ("ארבע מילים שפועמות בלי הרף הן בלתי נסבלות").
     במכשיר מגע נשארים מצב המנוחה (לב נוכח יותר), הלחיצה, והמיקוד.
   ⚠ **ההדלקה מגיעה מהאלמנט האמיתי (‎.tb‎) ולא מהמפתח (‎.tb-k‎).** במסגרת
     הדוגמה המפתח מילא את כל שטח הנגיעה; באתר הקישור גבוה ממנו (44px מול 26),
     ולחיצה על השוליים שלו הייתה מחזירה **שום תגובה חזותית** — כפתור שנראה
     מת. המראה זהה לחלוטין למאושר; רק אזור הפעלה גדל, ואינו יכול להקטין. */
@media (hover: hover) {
  .tb:hover .tb-k { color: var(--tb-deep); --tb-hb: 1; }
  .tb:hover .tb-k::before { opacity: 1; animation: tb-beat var(--beat) var(--beat-ease) infinite; }
  .tb:hover .tb-k > u.tb-w { animation: tb-tissue var(--beat) var(--beat-ease) infinite; }
}
/* מיקוד מקלדת — בכל מכשיר. טבעת המיקוד עצמה נשארת של style.css. */
.tb:focus-visible .tb-k { color: var(--tb-deep); --tb-hb: 1; }
.tb:focus-visible .tb-k::before { opacity: 1; animation: tb-beat var(--beat) var(--beat-ease) infinite; }
.tb:focus-visible .tb-k > u.tb-w { animation: tb-tissue var(--beat) var(--beat-ease) infinite; }
/* ‎.is-hover‎ — כפייה ידנית, לצילומים ולבדיקות. אינה תלויה במדיה. */
.tb-k.is-hover { color: var(--tb-deep); --tb-hb: 1; }
.tb-k.is-hover::before { opacity: 1; animation: tb-beat var(--beat) var(--beat-ease) infinite; }
.tb-k.is-hover > u.tb-w { animation: tb-tissue var(--beat) var(--beat-ease) infinite; }

/* ── לחוץ ──
   ‎.admin-tab.is-active‎ — הלשונית הנוכחית **נקראת כמוחזקת לחוצה**. זו הכרעת
   איתי ב-#338, והיא גם מה שמחליף את הגלולה הוורודה המלאה שהייתה כאן.

   🔑 **הכרעת איתי, 17.9.2026:** *הלחיצה על המילה מריצה את הפעימה על הטקסט
   עצמו במקום להקפיא אותו.* עד כאן הלחיצה כיבתה את שתי ההנפשות
   (‎animation: none‎) — כלומר הרגע היחיד שבו האצבע נוגעת היה הרגע היחיד
   שבו שום דבר לא זז.

   ⚠ **ומה שומר על "נקרא כלחוץ":** המשטח הוורוד שגדל מהמרכז (‎::after‎,
     80ms לאטימות ו-130ms לקנה המידה) והצבע הכהה של הלב ושל המילה. שניהם
     **מיידיים ולא מונפשים**, ולכן יש שינוי חד וברור ברגע המגע; הפעימה
     מתווספת עליו ואינה מחליפה אותו. הפעולה עצמה עדיין מתרחשת אחרי השהייה
     (‎shared/header-compact.js‎), כדי שיהיה מה לראות.

   🔴 **הלחיצה אינה מגדילה את בסיס הלב — וזו מדידה, לא טעם.** קודם הוא
     היה ‎scale(1.22)‎ **סטטי**; פעימה סביב 1.22 הייתה מגיעה ל-1.62, והלב
     היה נוגע בגליף הראשון של המילה (נמדד: 0.09px מרווח ב-15px, מול 1.31px
     בשיא הריחוף). לכן הלחיצה משאירה ‎--tb-hb: 1‎ — אותה משרעת שכבר עברה
     את שער הקריאוּת — ומסמנת את עצמה בצבע, במשטח ובתנועה.

   ⚠ **הלשונית הפעילה אינה "לחיצה" אלא מצב.** המילה שלה **אינה פועמת**:
     ארבע מילים שפועמות בלי הרף על מסך הניהול הן בדיוק מה שנפסל ב-#338.
     הלב שלה כן פועם, כמו בכל מקום אחר. */
.tb:active .tb-k::after, .tb-k.is-pressed::after, .admin-tab.is-active .tb-k::after {
  opacity: 1; transform: scale(1);
}
.tb:active .tb-k, .tb-k.is-pressed, .admin-tab.is-active .tb-k { --tb-hb: 1; }
.tb:active .tb-k::before, .tb-k.is-pressed::before, .admin-tab.is-active .tb-k::before {
  opacity: 1; background: var(--tb-dark);
}
/* הפעימה על הטקסט עצמו — רק בלחיצה בפועל, לא במצב "לשונית נוכחית" */
.tb:active .tb-k > u.tb-w, .tb-k.is-pressed > u.tb-w {
  opacity: 1; color: var(--tb-dark);
  animation: tb-tissue var(--beat) var(--beat-ease) infinite;
}
.admin-tab.is-active .tb-k > u.tb-w {
  animation: none; opacity: 1; color: var(--tb-dark);
}

/* ── לא זמין — הלב כבה, שום דבר לא זז ──
   ⚠ מנוטרל **גם מול ריחוף ומיקוד**: ‎:hover‎ מתקיים על כפתור מושבת ברוב
     המנועים, ובלעדי הביטול המפורש כאן כפתור מת היה פועם. */
.tb:disabled .tb-k, .tb[aria-disabled="true"] .tb-k, .tb-k.is-disabled {
  color: var(--tb-muted); cursor: default; transform: none;
}
.tb:disabled .tb-k, .tb[aria-disabled="true"] .tb-k, .tb-k.is-disabled { --tb-hb: .68; }
.tb:disabled .tb-k::before, .tb[aria-disabled="true"] .tb-k::before, .tb-k.is-disabled::before {
  background: var(--tb-muted); opacity: .2; animation: none;
  transform: translateY(-50%) scale(.68);
}
.tb:disabled .tb-k::after, .tb[aria-disabled="true"] .tb-k::after, .tb-k.is-disabled::after {
  opacity: 0; transform: scale(.55);
}
.tb:disabled .tb-k > u.tb-w, .tb[aria-disabled="true"] .tb-k > u.tb-w, .tb-k.is-disabled > u.tb-w {
  animation: none; opacity: 0;
}

/* ── הקצב: לב במנוחה. ‎--beat‎ (1500ms), שני קולות ומנוחה ארוכה ──
   ⚠ **המספר עצמו אינו כאן.** ‎--beat‎ ו-‎--beat-ease‎ יושבים ב-‎:root‎ של
     ‎shared/motion.css‎, ומשם מגיעים גם ללב שבלוגו וגם לנשימת המלבנים.
     קצב שנכתב פעמיים סוטה מעצמו תוך שבוע. ⚠ ולכן כל דף שטוען את הקובץ
     הזה חייב לטעון גם את ‎shared/motion.css‎ — נאכף ב-tissue-button.test.js.
   ⚠ היחסים (1.33 ו-1.15) מוכפלים ב-‎--tb-hb‎, ולכן אותה תמונת מפתח
     משרתת מנוחה, ריחוף ולחיצה. */
@keyframes tb-beat {
  0%,52%,100% { transform: translateY(-50%) scale(var(--tb-hb)); }
  7%          { transform: translateY(-50%) scale(calc(var(--tb-hb) * 1.33)); }
  18%         { transform: translateY(-50%) scale(var(--tb-hb)); }
  26%         { transform: translateY(-50%) scale(calc(var(--tb-hb) * 1.15)); }
}
@keyframes tb-tissue {
  0%   { opacity: 0; }
  9%   { opacity: 1; }
  22%  { opacity: .12; }
  29%  { opacity: .78; }
  52%,100% { opacity: 0; }
}

/* ── תנועה מופחתת ──
   אין פעימה ואין מעבר. במנוחה הלב חיוור, במגע הוא נדלק מלא ומיידית, ובלחיצה
   הוא כהה והמילה מקבלת את המשטח שלה — בלי שום מעבר. עדיין נקרא ככפתור. */
@media (prefers-reduced-motion: reduce) {
  .tb-k, .tb-k::before, .tb-k::after, .tb-k > u.tb-w {
    animation: none !important; transition: none !important;
  }
  .tb:hover .tb-k::before, .tb:focus-visible .tb-k::before, .tb-k.is-hover::before {
    opacity: 1; transform: translateY(-50%) scale(1);
  }
  .tb:hover .tb-k > u.tb-w, .tb:focus-visible .tb-k > u.tb-w, .tb-k.is-hover > u.tb-w { opacity: 1; }
  .tb:active .tb-k::after, .tb-k.is-pressed::after, .admin-tab.is-active .tb-k::after {
    transform: scale(1) !important;
  }
}

/* ═══ ההקשרים שבהם המפתח מופיע ════════════════════════════════════════════
   ⚠ **הגודל נשאר כפי שהוא באתר היום.** ‎--tb-fs‎ כאן חייב להיות זהה לגודל
     הגופן שהאלמנט קיבל ב-‎style.css‎ / ‎admin.css‎, אחרת הלב והמילה יסטו זה
     מזה. ‎--tb-row-h‎ הוא פי ~1.75 מהגודל — היחס שנמדד באישור. */

/* ניווט דף הבית (‎.nav-link‎ = 15px) */
.nav-link .tb-k { --tb-fs: 15px; --tb-row-h: 26px; }
/* שורות התפריט הנפתח (‎.site-header.is-compact .nav-link‎ = 17px) */
.site-header.is-compact .nav-link .tb-k { --tb-fs: 17px; --tb-row-h: 30px; }
/* לשוניות הניהול (15px) */
.admin-tab .tb-k { --tb-fs: 15px; --tb-row-h: 26px; }
/* "יציאה" בכותרת הניהול ובכותרת האזור האישי (14px) */
#logout-btn .tb-k { --tb-fs: 14px; --tb-row-h: 24px; }

/* ── האלמנט המארח ──
   שומר על הסמנטיקה, על המקלדת ועל יעד המגע; מוותר רק על הרקע שלו. */
.tb { -webkit-tap-highlight-color: transparent; }

/* הלשוניות היו גלולות: רקע לבן, ‎border-radius‎, וריפוד 10/22. הריפוד עובר
   למפתח (‎--tb-pad‎ / ‎--tb-end‎), והגלולה הוורודה של הלשונית הפעילה מוחלפת
   במשטח הלחיצה. ‎min-height:44px‎ נשאר — הוא יעד המגע ולא המראה. */
.admin-tab.tb {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 2px; background: none; border: 0; border-radius: 0;
}
.admin-tab.tb, .admin-tab.tb.is-active { background: none; color: #1a1a1a; }

/* "יציאה" — אותו סיפור: הייתה גלולת רפאים עם מסגרת ורודה. */
#logout-btn.tb {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 2px; background: none; border: 0; border-radius: 0;
  color: #1a1a1a;
}