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

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

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

/* קישור הדילוג. הוא **בדף תמיד ונראה במיקוד** — לא ‎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;
  align-items: baseline;
  gap: .3rem;
  min-block-size: 2.75rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
}
.quick-add:hover  { border-color: var(--accent); color: var(--accent); }
.quick-add:active { background: var(--accent-wash); }

.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;
}

/* מגש הטוסטים. ‎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(--gold);
  border-inline-start-width: 3px;
}

/* התנועה של הטוסט. ‎@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(--gold);
  background: var(--surface);
}