/* ══════════════════════════════════════════════════════════════════════
   ממלכת הזוהר — שכבת הכפתורים האחת   (מנה "ממשק: כפתורים", 25.8.2026)
   ══════════════════════════════════════════════════════════════════════
   עיקרון: "לוחית על גבי קלף" — כפתור הוא לוחית מוגבהת מעט מעל הנייר,
   לא מלבן שטוח. הקובץ נטען **לפני** ה-<style> הפנימי של כל דף, ולכן כל
   כלל קיים בדף גובר עליו בשוויון-ספציפיות. הוא מוסיף תחושה, לא צבע:
   רקע, מסגרת וגופן נשארים של הדף, מלבד במחלקה `.btn` החדשה.

   שלוש שכבות:
   · שכבה א  — התחושה. חלה על כל מה שלחיץ (סמן, מגע, מצב מושבת).
   · שכבה ב  — הלוחית. חלה רק על מה ש-`zohar-btn.js` סימן `.zb-plate`,
                כלומר כפתור שכבר יש לו רקע או מסגרת. כפתור שקוף
                (פריט-תפריט, ‏× של סגירה) מקבל `.zb-flat` ונשאר שטוח.
   · שכבה ג  — מחלקת `.btn` המלאה, לכפתורים חדשים.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* הצבעים אינם חדשים — הם נשאבים מן הפלטה של הדף שבו הקובץ נטען:
     ‏`--g-*` בשער-הכניסה, ‏`--paper/--ink/--gold/--line` בדפי-התוכן.
     ערכי-הייחוס שבסוף השרשרת משמשים רק בדף שאין בו פלטה כלל. */
  --לוחית: var(--g-surf2, var(--card, #fffdf4));
  --נייר: var(--g-surf, var(--paper, #faf7ec));
  --דיו: var(--g-ink, var(--ink, #6b5320));
  --זהב: var(--g-gold, var(--gold, #a8842f));
  --זהב-עדין: var(--g-line2, var(--line2, #e0d2ab));
  --קו: var(--g-line, var(--line, #ddcfa8));

  --צל: 0 1px 2px rgba(107, 83, 32, .10), 0 2px 6px rgba(107, 83, 32, .06);
  --צל-ריחוף: 0 2px 4px rgba(107, 83, 32, .14), 0 6px 14px rgba(107, 83, 32, .10);
  --צל-שקוע: inset 0 1px 3px rgba(107, 83, 32, .15);
  --קו-אור: inset 0 1px 0 rgba(255, 255, 255, .9);
  --קו-אור-ריחוף: inset 0 1px 0 #fff;

  --מעבר: 140ms cubic-bezier(.2, .7, .3, 1);
  --רדיוס-כפתור: 4px;
  --ריפוד-כפתור: 0 18px;
  --גובה-כפתור: 44px;
  --לוחית-ראשית: linear-gradient(to bottom, #fffef8, #fbf6e6);
  --הדגשת-מגע: rgba(154, 118, 32, .14);
}

/* מצב כהה: הקו-אור הלבן והצל החום נעלמים על נייר כהה, ולכן הם מוחלפים.
   שני המסלולים — העדפת-מערכת ובורר-הנושא של האתר — מטופלים. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --צל: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .28);
    --צל-ריחוף: 0 2px 5px rgba(0, 0, 0, .48), 0 8px 18px rgba(0, 0, 0, .34);
    --צל-שקוע: inset 0 1px 3px rgba(0, 0, 0, .45);
    --קו-אור: inset 0 1px 0 rgba(255, 244, 214, .08);
    --קו-אור-ריחוף: inset 0 1px 0 rgba(255, 244, 214, .14);
    --לוחית-ראשית: linear-gradient(to bottom, rgba(255, 238, 203, .10), rgba(255, 238, 203, .04));
    --הדגשת-מגע: rgba(226, 194, 116, .16);
  }
}
:root[data-theme="dark"] {
  --צל: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .28);
  --צל-ריחוף: 0 2px 5px rgba(0, 0, 0, .48), 0 8px 18px rgba(0, 0, 0, .34);
  --צל-שקוע: inset 0 1px 3px rgba(0, 0, 0, .45);
  --קו-אור: inset 0 1px 0 rgba(255, 244, 214, .08);
  --קו-אור-ריחוף: inset 0 1px 0 rgba(255, 244, 214, .14);
  --לוחית-ראשית: linear-gradient(to bottom, rgba(255, 238, 203, .10), rgba(255, 238, 203, .04));
  --הדגשת-מגע: rgba(226, 194, 116, .16);
}

/* ══ שכבה א — התחושה ══════════════════════════════════════════════════
   ‏`touch-action: manipulation` מבטל את השהיית ה-300ms של הדפדפן במגע,
   ולכן `:active` נצבע מיד באצבע. */
button,
summary,
[role="button"],
.btn {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--הדגשת-מגע);
}

button:disabled,
button[aria-disabled="true"],
[role="button"][aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.3) opacity(.6);
  transform: none !important;
  box-shadow: none !important;
}
button:disabled::after,
.btn:disabled::after,
.btn[aria-disabled="true"]::after { transform: scaleX(0) !important; }

/* ══ שכבה ב — הלוחית ══════════════════════════════════════════════════
   ‏`.zb` נוסף בידי `zohar-btn.js` לכל כפתור בדף; ‏`.zb-plate` רק לכפתור
   שכבר נושא רקע או מסגרת, ו-`.zb-flat` לשקוף. כך פריט-תפריט או ‏× של
   סגירה אינם הופכים ללוחית מרחפת. */
.zb {
  position: relative;
  transition: transform var(--מעבר), box-shadow var(--מעבר),
              background-color var(--מעבר), border-color var(--מעבר), color var(--מעבר);
}
.zb-plate { box-shadow: var(--צל), var(--קו-אור); }

@media (hover: hover) {
  .zb-plate:hover { transform: translateY(-1px); box-shadow: var(--צל-ריחוף), var(--קו-אור-ריחוף); }
  .zb-flat:hover { background-color: var(--הדגשת-מגע); }
}

/* השקיעה היא התחושה העיקרית, והיא היחידה שעובדת גם באצבע.
   נכתבת אחרי הריחוף כדי לגבור עליו בשוויון-ספציפיות. */
.zb:active { transform: translateY(1px); }
.zb-plate:active { box-shadow: var(--צל-שקוע); }
.zb-flat:active { background-color: var(--הדגשת-מגע); }

.zb:focus-visible,
.btn:focus-visible { outline: 2px solid var(--זהב); outline-offset: 2px; }

/* קו הזהב — נמתח בבסיס הכפתור מימין לשמאל בריחוף ובפוקוס.
   נבדק שאין באתר שום כלל-CSS על ‎::after של כפתור, ולכן אינו דורס דבר. */
.zb-plate::after {
  content: ''; position: absolute; inset-inline: 8px; bottom: 5px; height: 1px;
  background: var(--זהב); opacity: .85; pointer-events: none;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--מעבר);
}
.zb-plate:hover::after,
.zb-plate:focus-visible::after { transform: scaleX(1); }

/* משוב מגע — עיגול-אור קל ממקום הנגיעה */
.zb-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .18; transform: scale(0);
  animation: zb-ripple 300ms cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes zb-ripple { to { transform: scale(1); opacity: 0; } }

/* ══ שכבה ג — מחלקת `.btn` ════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; box-sizing: border-box;
  min-height: var(--גובה-כפתור); padding: var(--ריפוד-כפתור);
  border: 1px solid var(--קו); border-radius: var(--רדיוס-כפתור);
  background: var(--לוחית); color: var(--דיו);
  font: inherit; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; text-align: center;
  box-shadow: var(--צל), var(--קו-אור);
}
.btn--primary { background: var(--לוחית-ראשית); border-color: var(--זהב-עדין); }
.btn--secondary {
  background: transparent; border-color: var(--זהב-עדין);
  box-shadow: none; font-weight: 500;
}
@media (hover: hover) {
  .btn--secondary:hover { background: var(--לוחית); box-shadow: var(--צל), var(--קו-אור); }
}
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn--icon {
  width: var(--גובה-כפתור); min-width: var(--גובה-כפתור); padding: 0;
}
.btn--icon::after { inset-inline: 6px; }

/* מצב טעינה: הרוחב נעול (הטקסט נשאר במקומו ורק נעלם), ספינר במרכז */
.btn--loading { color: transparent !important; pointer-events: none; }
.btn--loading::before {
  content: ''; position: absolute; inset-block: 0; margin: auto;
  inset-inline-start: calc(50% - 8px); width: 16px; height: 16px;
  border: 2px solid var(--זהב); border-top-color: transparent; border-radius: 50%;
  animation: zb-spin .7s linear infinite;
}
@keyframes zb-spin { to { transform: rotate(360deg); } }

/* ══ העדפת תנועה מופחתת ══ */
@media (prefers-reduced-motion: reduce) {
  .zb, .btn, .zb-plate::after { transition: none !important; }
  .zb:active, .zb-plate:hover, .btn:hover { transform: none !important; }
  .zb-ripple { display: none !important; }
  .btn--loading::before { animation: none; }
}