/* ────────────────────────────────────────────────────────────────
   רכיבים חוזרים שאינם utilities.

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

   אין ‎box-shadow, ‎filter: blur, ‎backdrop-filter או glow בקובץ הזה
   ובאף קובץ אחר בפרויקט. יש טסט. עומק בא מקצה נייר ומקו.
   ──────────────────────────────────────────────────────────────── */

/* ── כרטיס ה-hero ───────────────────────────────────────────────
   צבע מלא במקום כרטיס לבן. העומק: מעבר עדין בין שני גווני hero
   וקו תחתון עמוק — אפס צל. linear-gradient אינו צל ואינו glow. */
.hero {
  border-radius: 20px;
  padding: 1.5rem 1.4rem 1.1rem;
  background: linear-gradient(160deg, var(--hero) 0%, var(--hero-deep) 100%);
  border-block-end: 3px solid var(--hero-deep);
  color: var(--on-hero);
}

.hero__streak {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--energy);
  color: var(--energy);
  font-weight: 600;
  font-size: .8rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.1rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid color-mix(in srgb, var(--on-hero) 18%, transparent);
}

/* ה-CTA של היומן — ליים על hero. ‎--energy-ink על ‎--energy: 5.79. */
.hero__cta {
  padding: .45rem .95rem;
  border-radius: 10px;
  background: var(--energy);
  color: var(--energy-ink);
  font-weight: 700;
  font-size: .875rem;
}
.hero__cta:hover { opacity: .9; }

/* קישור הדילוג. הוא **בדף תמיד ונראה במיקוד** — לא ‎display:none
   שמתגלה ב-JS. מחוץ למסך דרך מיקום ולא דרך opacity, כדי שקורא מסך
   ימצא אותו. */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: .5rem;
  z-index: 50;
  background: var(--accent);
  color: var(--on-accent);
  padding: .5rem .9rem;
  border-radius: 8px;
}
.skip-link:focus { inset-inline-start: .5rem; }

.navlink {
  padding: .35rem .6rem;
  border-radius: 8px;
  font-size: .875rem;
  color: var(--ink-soft);
}
.navlink:hover { background: var(--surface-sunk); color: var(--ink); }
.navlink--on   { background: var(--accent-wash); color: var(--accent); font-weight: 500; }

.theme-toggle {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  background: var(--surface);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }

/* כפתור הוספה מהירה. ‎min-block-size 44px — יעד מגע תקני, וזו
   האפליקציה שנלחצת בה עשרות פעמים ביום בזמן שהמשתמש מתנשם. */
.quick-add {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  min-block-size: 2.75rem;
  padding: .35rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
}

/* שורת הקלוריות בכפתור. הערך מחושב בשרת באותו מנוע שירשום אותו —
   ראה selectors.quick_steps_for. */
.quick-add__kcal {
  font-size: .68rem;
  font-weight: 400;
  color: var(--ink-faint);
}
.quick-add:hover .quick-add__kcal { color: var(--accent); }
.quick-add:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.quick-add:hover .quick-add__kcal { color: var(--on-accent); }
.quick-add:active { background: var(--accent-soft); border-color: var(--accent-soft); }

.timer-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 2.25rem;
  padding: .3rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .85rem;
}
.timer-btn:hover { color: var(--accent); border-color: var(--accent); }

/* "עצירה ורישום" נושא את המבטא: זו הפעולה שהמשתמש מחפש בעין כשהוא
   מסיים סט, ולא זו שהוא בוחר בין שוות. */
.timer-btn--stop {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.timer-btn--stop:hover { background: var(--accent-soft); color: var(--on-accent); }

.timer-readout {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-inline-size: 3.2rem;
}

/* תג ה-MET בכרטיס תרגיל — עוצמה כתג, לא כהערת שוליים. */
.met-chip {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* מגש הטוסטים. ‎position: fixed בתחתית — לא צף מעל התוכן שנקרא, וקרוב
   לאגודל במובייל. */
.toast-tray {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  max-inline-size: min(28rem, 100%);
  padding: .55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
}

/* הישג — מתאר זהב. הזהב הוא **קו**, והטקסט נשאר בצבע הדיו: 4.21 על
   נייר עובר 3:1 לרכיב ונכשל 4.5 לטקסט. */
.toast--win {
  border-color: var(--accent);
  border-inline-start: 3px solid var(--energy);
}

/* התנועה של הטוסט. ‎@keyframes בלבד, ומאחורי שער — הטוסט **נשלח
   גלוי** מהשרת, והאנימציה רק מובילה אליו את העין. בלי CSS animations,
   בלי JS ועם prefers-reduced-motion הוא פשוט נמצא שם. */
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 220ms ease-out; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* מיקוד גלוי אחיד. ‎:focus-visible ולא ‎:focus — טבעת על כל לחיצת
   עכבר היא רעש שגורם לאנשים לכבות את הטבעת לגמרי. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* עמודת גרף בעמוד הסטטיסטיקות. הגובה מגיע כ-‎inline style מהשרת
   (האחוז מחושב בפייתון), ולכן אין כאן JS שממלא גבהים. */
.bar {
  inline-size: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-block-size: 2px;
}
.bar--met { background: var(--state-in); }
.bar--empty { background: var(--surface-sunk); }

.badge {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .75rem;
  background: var(--surface);
}
.badge--on {
  border-color: var(--accent-soft);
  background: var(--surface);
}

/* כפתור כמות בזמן טיימר — רמז "לחץ לסיום". קישוט של Alpine בלבד:
   בלי JS אין את המחלקה הזו, ויש כפתור רגיל שעובד. */
.quick-add--finish {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-wash);
}

/* ── היומן ──────────────────────────────────────────────────────
   עומק מקצה נייר ומקו, אפס צל. הקבוצה המפוצלת (−15/+15) היא מסגרת
   אחת עם קו מפריד — שני כפתורים שקוראים כפעולה אחת עם שני כיוונים. */

/* פס ההתקדמות בכותרת יום. גובה 4px — נוכח בלי לצעוק. */
.goalbar {
  block-size: 4px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
}
.goalbar__fill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--accent);
}
/* ירוק רק כשהיעד הושג — מצב, לא קישוט (חוק הפלטה). */
.goalbar__fill--met { background: var(--state-in); }

/* קבוצת הכוונון: שני טפסים בתוך מסגרת אחת. */
.jadjust {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.jadjust form + form { border-inline-start: 1px solid var(--line); }
.jadjust button {
  min-block-size: 2.25rem;
  padding: .3rem .6rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.jadjust button:hover { background: var(--accent-wash); color: var(--accent); }

/* מחיקה: אייקון בלבד, בצבע מצב "בשימוש" — אדמדם שמור לפעולות
   שמורידות דבר-מה. הרקע מופיע רק במעבר עכבר. */
.jdelete {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-faint);
  background: var(--surface);
}
.jdelete:hover {
  color: var(--state-used);
  border-color: var(--state-used);
  background: var(--state-used-wash);
}

/* תגית מקור המשך. ניטרלית — מידע, לא מצב. "עודכן ידנית" מקבלת קו
   זהב: זהב הוא קו שיער בלבד, לעולם לא טקסט (4.21 על נייר). */
.jpill {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  font-size: .68rem;
  color: var(--ink-soft);
}
.jpill--adjusted {
  background: var(--surface);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
}