/* ==========================================================================
   nut.css — קומפוננטת "כפתור-אום" (Nut Button) של שפת ארגז הכלים.
   שימוש (slot לכל אייקון — אימוג'י, SVG או טקסט):

     <button class="nut-btn" aria-label="יומן">
       <span class="nut-hex"><span class="nut-ico">📅</span></span>
       <span class="nut-label">יומן</span>   <!-- אופציונלי -->
     </button>

   מודיפיקטורים: .active (מצב נבחר) · .nut-btn--lg (גדול)
   צבעים/מידות — אך ורק מ-tokens.css. תקין ב-RTL (צורה סימטרית).
   ========================================================================== */

.nut-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  min-inline-size: var(--buksa-touch-min);
  min-block-size: var(--buksa-touch-min);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* המיכל המשושה — ה-filter על העטיפה כדי שהצל יעקוב אחרי צורת ה-clip.
   מסגרת פאזה: רקע המשושה החיצוני = צבע המסגרת; ::before פנימי (מוקטן
   ב---buksa-chamfer-w) נושא את מילוי ה-bevel. כתום מופיע רק ב-hover/active. */
.nut-btn .nut-hex {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--buksa-nut-size);
  block-size: calc(var(--buksa-nut-size) * 0.88);
  clip-path: var(--buksa-hex);
  background: var(--buksa-chamfer);
  transition: background 0.15s, transform 0.1s;
}
.nut-btn .nut-hex::before {
  content: '';
  position: absolute;
  inset: var(--buksa-chamfer-w);
  clip-path: var(--buksa-hex);
  background: var(--buksa-bevel-up);
  transition: background 0.15s;
}
.nut-btn { filter: var(--buksa-shadow-nut); }

.nut-btn .nut-ico {
  position: relative;   /* מעל ה-::before של המסגרת */
  display: grid;
  place-items: center;
  inline-size: calc(var(--buksa-nut-size) * 0.46);
  block-size: calc(var(--buksa-nut-size) * 0.46);
  color: var(--buksa-steel);
  transition: color 0.15s;
}
/* אייקוני SVG (Lucide) — stroke בלבד, יורשים צבע */
.nut-btn .nut-ico > svg {
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nut-btn .nut-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--buksa-steel);
  transition: color 0.15s;
}

/* --- hover: המסגרת נצבעת כתום; האייקון נשאר פלדה אחידה --- */
@media (hover: hover) {
  .nut-btn:hover:not(:disabled):not(.active) .nut-hex { background: var(--buksa-orange); }
  .nut-btn:hover:not(:disabled):not(.active) .nut-hex::before { background: var(--buksa-bevel-down); }
  .nut-btn:hover:not(:disabled) .nut-label { color: var(--buksa-steel-light); }
}

/* --- לחיצה --- */
.nut-btn:active:not(:disabled) { filter: var(--buksa-shadow-nut-pressed); }
.nut-btn:active:not(:disabled) .nut-hex { transform: translateY(1px); }

/* --- מצב נבחר/אקטיבי: מסגרת כתומה בוהקת + מילוי כתום --- */
.nut-btn.active .nut-hex { background: var(--buksa-orange-bright); }
.nut-btn.active .nut-hex::before { background: var(--buksa-bevel-active); }
.nut-btn.active .nut-ico { color: var(--buksa-graphite-deep); }
.nut-btn.active .nut-label { color: var(--buksa-orange); }

/* --- מנוטרל --- */
.nut-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- גדול --- */
.nut-btn--lg .nut-hex {
  inline-size: var(--buksa-nut-size-lg);
  block-size: calc(var(--buksa-nut-size-lg) * 0.88);
}
.nut-btn--lg .nut-ico {
  inline-size: calc(var(--buksa-nut-size-lg) * 0.46);
  block-size: calc(var(--buksa-nut-size-lg) * 0.46);
}

/* --- nut-chip: משושה סטטי קטן לאייקוני רשימות (לא כפתור) ---
   שימוש: <span class="nut-chip">${icon('wrench')}</span> */
.nut-chip {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 37px;
  flex-shrink: 0;
  clip-path: var(--buksa-hex);
  background: var(--buksa-chamfer);
  color: var(--buksa-steel);
}
.nut-chip::before {
  content: '';
  position: absolute;
  inset: var(--buksa-chamfer-w-chip);
  clip-path: var(--buksa-hex);
  background: var(--buksa-bevel-up);
}
.nut-chip > svg {
  position: relative;
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- פוקוס מקלדת (נגישות) ---
   drop-shadow על העטיפה עוקב אחר צורת ה-clip ולא נחתך על-ידה */
.nut-btn:focus-visible { outline: none; }
.nut-btn:focus-visible {
  filter: var(--buksa-shadow-nut)
          drop-shadow(0 0 1.5px var(--buksa-orange))
          drop-shadow(0 0 1.5px var(--buksa-orange))
          drop-shadow(0 0 2px var(--buksa-orange));
}