/* ============================================================
   שלד האפליקציה וטאב התפריט
   נגזר מ-docs/design-2-dark-instrument.html.

   כללי צבע מחייבים מפרק 12:
   --text לתוכן ראשי · --muted לתוכן משני קריא
   --dim קישוט בלבד, אסור לטקסט שנועד להיקרא
   --teal מים ומידע מדיד משני: שעות, כמויות, מונים
   --brass פעולה, השלמה, "עובר" · --fail "נכשל" בלבד

   אין letter-spacing על טקסט עברי. מותר רק על מספרים
   ועל טקסט לטיני.
   ============================================================ */

/* ---------- reset ---------- */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-outer);
  color: var(--text);
  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- עמודת האפליקציה ---------- */

.app {
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  padding: 0 0 calc(64px + env(safe-area-inset-bottom));
  position: relative;
}

/* ---------- כותרת המסך ---------- */

.screen-head {
  padding: 22px var(--gutter) 0;
}

.eyebrow {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 5px;
}

.screen-head h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  margin: 0;
}

.subhead {
  font-size: 13px;
  color: var(--muted);
  margin: 5px 0 0;
  font-weight: 400;
}

.section-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin: 20px var(--gutter) 8px;
}

/* ---------- כרטיס בסיס ומצב ריק ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 var(--gutter) 8px;
  overflow: hidden;
}

.empty {
  padding: 26px 20px;
  text-align: center;
}

.empty-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.empty-note {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ---------- כפתורים ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  background: var(--brass);
  color: var(--on-brass);
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}

.btn:active {
  transform: scale(.985);
}

.btn:disabled {
  opacity: .5;
  cursor: default;
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}

/* ---------- טפסים ---------- */

.field {
  margin: 0 0 14px;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 7px;
}

.input {
  width: 100%;
  min-height: var(--tap-min);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  /* 16px מונע זום אוטומטי של iOS בפוקוס */
  font-size: 16px;
  transition: border-color .18s;
}

/* בלי outline:none. הכלל הזה גבר על :focus-visible והשאיר את
   כל שדות הטופס בלי סימון פוקוס נראה, בניגוד לדרישת AA בפרק 12 */
.input:focus {
  border-color: var(--brass-dim);
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap-min);
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--brass);
}

.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--muted);
  background: var(--surface-2);
}

.notice-error {
  border-color: var(--fail);
  color: var(--text);
}

/* ---------- הודעה חולפת ----------
   מרונדרת ב-layout.php מעל התוכן, ונעלמת מעצמה אחרי שש
   שניות. is-gone הוא מצב הדעיכה, ואחריו האלמנט מוסר
   מה-DOM כדי שקורא מסך לא ימשיך להכריז עליו. */

.is-flash {
  margin: 14px var(--gutter) 0;
  transition: opacity .35s ease, transform .35s ease;
}

.is-flash.is-gone {
  opacity: 0;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .is-flash {
    transition: none;
  }
}

/* ---------- מסך כניסה ---------- */

.login-wrap {
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom));
}

.login-head {
  margin: 0 0 26px;
}

.login-head h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0;
}

.login-foot {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- טאבים תחתונים ---------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--app-max);
  margin: 0 auto;
  /* נגזר מ---bg ולא מקודד. השורה הראשונה היא נפילה לאחור
     לדפדפן בלי color-mix: אטום במקום שקוף, קריא בכל מקרה. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  padding: 9px 0 max(9px, env(safe-area-inset-bottom));
  z-index: 10;
}

.tabbar a {
  flex: 1;
  min-height: var(--tap-min);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 0;
  transition: color .18s;
}

.tabbar a.active {
  color: var(--brass);
  font-weight: 700;
}

.tabbar .mark {
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: .45;
  transition: opacity .18s;
}

.tabbar a.active .mark {
  opacity: 1;
}

/* ============================================================
   טאב תפריט
   ============================================================ */

/* ---------- בקרה מפולחת ---------- */

.segmented {
  display: flex;
  gap: 3px;
  margin: 16px var(--gutter) 0;
  background: var(--bg-outer);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.segmented a {
  flex: 1;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: background .18s, color .18s;
}

.segmented a.active {
  background: var(--surface-2);
  color: var(--brass);
  font-weight: 700;
}

/* ---------- שבבי סינון ארוחה ---------- */

.chips-wrap {
  position: relative;
  margin-top: 14px;
}

/* דהייה בקצה השמאלי, כדי שיהיה ברור שהרשימה ממשיכה */
.chips-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  background: linear-gradient(to left, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg));
  pointer-events: none;
}

.chips {
  display: flex;
  gap: 7px;
  margin: 0;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar {
  display: none;
}

/* מרווח נגרר, כדי שהשבב האחרון לא ייצמד לקצה בזמן גלילה */
.chips::after {
  content: '';
  flex: 0 0 10px;
}

.chip {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}

.chip.active {
  border-color: var(--brass-dim);
  background: var(--surface-2);
  color: var(--brass);
  font-weight: 700;
}

/* ---------- כותרת הארוחה ---------- */

.slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 20px var(--gutter) 0;
}

.slot-name {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}

/* שעות הן מידע מדיד משני - teal לפי פרק 12 */
.slot-time {
  font-size: 13px;
  color: var(--teal);
  white-space: nowrap;
  font-weight: 500;
}

/* כיתוב עזר מתחת לכותרת, בטאב התפריט ובטבלאות העזר */
.slot-note {
  margin: 6px var(--gutter) 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

.slot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px var(--gutter) 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.slot-meta .measure {
  color: var(--teal);
  font-weight: 500;
}

/* ---------- קטגוריה ---------- */

.cat {
  margin: 14px var(--gutter) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.cat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.cat-flag {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.cat-note {
  margin: 0;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}

.cat-note-only {
  border-bottom: none;
}

/* ---------- אופציות ---------- */

.opts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.opt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px 9px 4px;
  border-bottom: 1px solid var(--hairline);
}

.opt > .opt-name {
  flex: 1;
}

/* ---------- כוכב מועדף ---------- */

.fav-form {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
}

.fav {
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: color .18s;
}

.fav[aria-pressed="true"] {
  color: var(--brass);
}

.opt.is-fav .opt-name {
  color: var(--brass);
}

.opt:last-child {
  border-bottom: none;
}

.opt-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.opt-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.tag {
  display: inline-block;
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin-inline-start: 6px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

/* מגבלה מדידה - teal לפי פרק 12 */
.tag-measure {
  color: var(--teal);
  border-color: var(--brass-dim);
  border-style: dashed;
}

/* ---------- טבלאות עזר ---------- */

.ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ref-list li {
  padding: 9px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--hairline);
}

.ref-list li:last-child {
  border-bottom: none;
}

/* ---------- מחשבון ---------- */

/* ריפוד הכרטיס האחיד בכל הטאבים */
.pad {
  padding: 14px 16px;
}

.calc-intro {
  margin: 0 0 15px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.calc-result {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-outer);
  padding: 18px 16px;
  text-align: center;
}

.calc-result.is-hidden {
  display: none;
}

.calc-verdict {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1;
}

.calc-verdict.is-pass {
  color: var(--brass);
}

.calc-verdict.is-fail {
  color: var(--fail);
}

.calc-detail {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* הסרת הכרום המקורי בלי חיווי הייתה גורמת לכל תפריט בחירה
   להיראות כשדה טקסט. החץ מצויר ב-SVG מוטבע, בלי קובץ חיצוני. */
/* ערך שנקבע בשרת ואין בו בחירה. נראה כמו שדה כדי לשמור על
   מקצב הטופס, אבל בלי מסגרת פעילה ובלי אזור נגיעה - אין מה
   לגעת בו. */
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 7px;
}

.fixed-value {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg-outer);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-start: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238296A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px 8px;
}

/* ============================================================
   טאב היום
   נגזר מקובץ העיצוב design-2-dark-instrument.html
   ============================================================ */

/* ---------- ניווט בין ימים ---------- */

.day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px var(--gutter) 0;
  font-size: 13px;
}

.day-nav a,
.day-nav span {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  color: var(--muted);
  font-weight: 500;
}

.day-nav .is-off {
  color: var(--line);
}

.day-nav-now {
  color: var(--text);
  font-weight: 700;
}

.day-nav .is-back {
  color: var(--brass);
}

.day-banner {
  margin: 8px var(--gutter) 0;
  padding: 9px 12px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- מד היום ---------- */

.meter {
  margin: 18px var(--gutter) 0;
}

.meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}

.meter-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.meter-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.meter-count b {
  color: var(--brass);
  font-weight: 700;
  font-size: 16px;
}

.segs {
  display: flex;
  gap: 3px;
  height: 7px;
}

.seg {
  flex: 1;
  background-color: var(--surface-2);
  border-radius: 2px;
  /* background-color מפורש ולא הקיצור background. הקיצור כולל
     תכונות שאינן ניתנות להנפשה, ומנועים מסוימים מוותרים על
     המעבר כולו בגללן. */
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1);
}

.seg.on {
  background-color: var(--brass);
}

/* ---------- כרטיס ארוחה ---------- */

.meal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 var(--gutter) 8px;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}

.meal.is-done {
  border-color: var(--brass-dim);
  background: var(--surface-2);
}

.meal.is-skipped {
  opacity: .72;
}

.meal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 0;
}

.meal-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.meal-time {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--teal);
  margin-inline-start: 4px;
}

.meal-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.meal.is-done .meal-status {
  color: var(--brass);
}

.meal-items {
  list-style: none;
  margin: 11px 0 0;
  padding: 0 14px;
}

.meal-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}

.meal-items li:last-child {
  border-bottom: none;
}

.meal-cat {
  color: var(--muted);
  font-size: 12.5px;
  flex-shrink: 0;
}

.meal-val {
  font-weight: 500;
  text-align: left;
}

/* הצעת המילוי מראש - עדיין לא תועדה */
.meal-val .is-proposed {
  color: var(--muted);
  font-weight: 400;
}

.meal-val .plus {
  color: var(--muted);
  margin: 0 4px;
}

.meal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px 12px;
}

.meal-actions .grow {
  flex: 1;
}

.meal-actions .btn-ghost {
  flex: 0 0 auto;
}

.meal.is-done .meal-actions .btn {
  background: transparent;
  border: 1px solid var(--brass-dim);
  color: var(--brass);
}

.meal-minor {
  display: flex;
  gap: 18px;
  padding: 0 14px 13px;
}

.link-btn {
  background: none;
  border: none;
  padding: 4px 0;
  min-height: var(--tap-min);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- עריכת ארוחה ---------- */

.meal-edit {
  padding: 6px 14px 0;
}

.edit-cat {
  border: none;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
  padding: 10px 0 12px;
}

.edit-cat:last-of-type {
  border-bottom: none;
}

.edit-cat-name {
  padding: 0;
  margin: 0 0 7px;
}

.edit-cat-name .check {
  min-height: var(--tap-min);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.edit-note {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.edit-half {
  margin-top: 8px;
}

.edit-half summary {
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

.edit-half .input {
  margin-top: 8px;
}

/* ---------- מים ---------- */

.water {
  margin: 0 var(--gutter) 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.water-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.water-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.water-read {
  font-size: 13px;
  color: var(--muted);
}

.water-read b {
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
  margin-inline-end: 2px;
}

.bottles {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}

.bottle {
  flex: 1;
  height: 34px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

/* המילוי מונפש ב-transform ולא ב-height.
   height באחוזים על אלמנט ממוקם מוחלט ועגון לתחתית הוא בדיוק
   המקרה שדפדפנים מתקשים לחשב בו ביניים, ו-Safari על iOS קופץ
   לערך הסופי. scaleY רץ על ה-compositor, מתנהג זהה בכל מנוע,
   ואינו דורש חישוב פריסה מחדש בכל פריים.
   האלמנט תופס את מלוא הגובה, ו-transform-origin בתחתית גורם
   לו לגדול כלפי מעלה. */
.bottle i {
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  background: var(--teal);
  opacity: .85;
  will-change: transform;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.water-btns {
  display: flex;
  gap: 8px;
}

.water-btns form {
  flex: 1;
}

.wbtn {
  width: 100%;
  min-height: var(--tap-min);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s;
}

.wbtn:active {
  background: var(--line);
}

.water-undo {
  margin-top: 8px;
  text-align: center;
}

/* ---------- תוספים ומנות ירק ---------- */

.row2 {
  display: flex;
  gap: 8px;
  margin: 0 var(--gutter) 8px;
  align-items: stretch;
}

.mini {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px;
}

.mini h3,
.mini-title {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}

.supp-form {
  margin: 0;
}

.supp {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap-min);
  background: none;
  border: none;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: start;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}

.supp.on .dot,
.toggle.on .dot {
  background: var(--brass);
  border-color: var(--brass);
}

.supp.on span {
  color: var(--muted);
  text-decoration: line-through;
}

.veg-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.veg-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--brass);
}

.veg-of {
  font-size: 14px;
  color: var(--muted);
}

.veg-cap {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.45;
}

/* ---------- מתגים, אירובי ---------- */

.toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: var(--tap-min);
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: start;
}

.cardio-goals {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 14px;
}

.cardio-goal-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 5px;
}

.cardio-goal-top .measure {
  color: var(--teal);
  font-weight: 500;
}

.bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.cardio-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.cardio-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}

.cardio-list li:last-child {
  border-bottom: none;
}

.cardio-list form {
  margin-inline-start: auto;
}

.cardio-note {
  color: var(--muted);
  font-size: 12.5px;
}

.cardio-row {
  display: flex;
  gap: 8px;
}

.cardio-row select {
  flex: 1.2;
}

.cardio-row input {
  flex: 1;
}

.cardio-row .btn {
  flex: 0 0 auto;
}

textarea.input {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   טאב התקדמות

   סולם אחיד לכל הטאב, נגזר מקובץ העיצוב ומפרק 12:
     טקסט     11 · 12 · 13 · 14 · 15
     תצוגה    19 · 30 · 44 (Frank Ruhl Libre)
     מרווחים  4 · 6 · 8 · 12 · 16 · 20
     ריפוד כרטיס 14px 16px · שוליים --gutter
   כל ערך מחוץ לסולם הזה הוא שריד של תיקון נקודתי.
   ============================================================ */

.notice-ok {
  border-color: var(--brass-dim);
  color: var(--text);
}

/* ---------- הודעה חולפת ----------
   מרונדרת מעל התוכן דרך flash_render, ונעלמת מעצמה אחרי חמש
   שניות. is-gone הוא מצב הדעיכה, ואחריו האלמנט מוסר מה-DOM
   כדי שקורא מסך לא ימשיך להכריז עליו. */

.is-flash {
  margin: 12px var(--gutter) 0;
  transition: opacity .35s ease, transform .35s ease;
}

.is-flash.is-gone {
  opacity: 0;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .is-flash {
    transition: none;
  }
}

/* ---------- שדות מספר ובורר התאריך ----------
   התאריך אינו input type=date. הפקד הנייטיבי גלש מעבר למכל
   בהקשר RTL, ובמצב הזה גם חסם את שליחת הטופס בלי להציג דבר.
   select מתנהג כמו כל שדה אחר ואינו דורש שכנוע.

   השדות המספריים נשארים LTR וממורכזים: הספרות נקראות משמאל
   לימין גם בתוך מסך עברי. */

.input.num {
  direction: ltr;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  max-width: 100%;
}

/* ערך שנקבע בשרת ואין בו בחירה. נראה כמו שדה כדי לשמור על
   מקצב הטופס, אבל בלי מסגרת פעילה ובלי אזור נגיעה - אין מה
   לגעת בו. */
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 7px;
}

.fixed-value {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg-outer);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

select.input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.field-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.form-lead {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- המדידה האחרונה ---------- */

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.latest-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.latest-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}

.latest-unit {
  font-size: 11px;
  color: var(--teal);
  font-weight: 500;
  margin-top: 2px;
}

.latest-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.latest-extra {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- ההערכה וחץ המגמה ---------- */

.estimate {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.estimate-label {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

.estimate-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

/* החץ גדול מהמספר בכוונה. פרק 8.2: המגמה גוברת על המספר
   הבודד, כי סנטימטר אחד בהיקף מזיז אותו בכ-0.7 נקודה. */
.trend {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
}

.trend-good { color: var(--brass); }
.trend-warn { color: var(--fail); }
.trend-flat { color: var(--teal); }

.estimate-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  direction: ltr;
}

.estimate-trend {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 12px 0 0;
}

.estimate-masses {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
}

.estimate-masses b {
  color: var(--text);
  font-weight: 700;
}

.estimate-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 12px 0 0;
}

/* ---------- הזנה מקופלת ---------- */

.add-block {
  margin: 0 var(--gutter) 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.add-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brass);
  cursor: pointer;
}

.add-block[open] .add-summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.add-plus {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

.add-block[open] .add-plus {
  transform: rotate(45deg);
}

.add-body {
  padding: 16px;
}

/* ---------- היסטוריה ----------
   grid ולא flex. ב-flex כל שורה חילקה את הרוחב לפי התוכן
   שלה, ולכן שתי שורות לא יצאו על אותם קווים. שלוש עמודות
   קבועות מיישרות את כולן בהגדרה. */

.hist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hist-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--hairline);
}

/* שקוף ולא none, כדי שגובה השורה האחרונה יהיה זהה לשאר */
.hist-row:last-child {
  border-bottom-color: transparent;
}

/* שורת הכותרת. מחזיקה את היחידות פעם אחת במקום בכל שורה,
   ולכן השורות עצמן הן מספרים בלבד. */
.hist-head {
  padding-top: 10px;
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
}

.hist-head .hist-nums {
  font-size: 11px;
}

.hist-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.hist-nums {
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-nums b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hist-nums .hist-bf {
  color: var(--brass);
}

.hist-unit {
  font-size: 11px;
  color: var(--muted);
  margin-inline-start: 2px;
}

.hist-sep {
  color: var(--line);
  margin: 0 4px;
}

/* שתי הפעולות ברוחב זהה ועם קו מפריד ביניהן, כדי שלא ייראו
   כמילה אחת ארוכה ושלא יהיה ספק היכן נגמרת אחת ומתחילה
   השנייה. הרוחב קבוע, ולכן כל השורות מסתיימות באותו קו. */
.hist-actions {
  display: flex;
  align-items: center;
}

.hist-actions .link-btn {
  width: 42px;
  padding: 11px 0;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.hist-actions form {
  border-inline-start: 1px solid var(--hairline);
}

.center-link {
  text-align: center;
  margin: 8px 0 0;
}

/* מיושר לקו ההתחלה של section-label, לא לקצה המכל */
.foot-link {
  margin: 16px var(--gutter) 0;
  opacity: .75;
}

.foot-link .link-btn {
  padding-inline: 0;
}

/* ---------- תמונות מקובצות ---------- */

.photo-row {
  padding: 14px 16px;
}

.photo-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.photo-row-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.photo-row-count {
  font-size: 12px;
  color: var(--muted);
}

.photo-row-count.is-full {
  color: var(--brass);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-tag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 4px;
  font-size: 11px;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

.thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  transition: border-color .18s, color .18s;
}

.thumb-empty:hover {
  border-color: var(--brass-dim);
  color: var(--text);
}

.thumb-plus {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

.thumb-empty .thumb-tag {
  background: none;
  color: var(--muted);
}

.photo-add {
  margin-top: 12px;
}

.photo-add summary {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.photo-add .photo-upload {
  padding-top: 8px;
}

.photo-row-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

/* ============================================================
   מסך הסיכום - טבעת, שלושת המספרים וגרפים. שלב 7.
   ============================================================ */

.summary-top {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: center;
}

/* מתחת ל-360px הטבעת ושלושת המספרים לא נכנסים זה לצד זה
   בלי שהמספרים יישברו באמצע. שם הם עוברים לשורות. */
@media (max-width: 359px) {
  .summary-top {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* ---------- הטבעת ---------- */

.ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ring-svg {
  width: 132px;
  height: 132px;
  display: block;
}

.ring-track {
  stroke: var(--surface-2);
}

.ring-fill {
  stroke: var(--brass);
  stroke-linecap: round;
  transition: stroke-dasharray .5s ease;
}

.ring-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 30px;
  font-weight: 700;
  fill: var(--text);
  direction: ltr;
}

.ring-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  max-width: 140px;
}

/* ---------- שלושת המספרים ---------- */

.headline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.headline-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0 5px;
}

.headline-label {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
}

.headline-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  direction: ltr;
}

.headline-num.tone-brass { color: var(--brass); }
.headline-num.tone-teal  { color: var(--teal); }
.headline-num.na         { color: var(--muted); }

.headline-unit {
  font-size: 12px;
  color: var(--muted);
}

.headline-note {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- משפט התחזית ---------- */
/* פרק 8.4: משפט עובדתי יחיד. בלי צבע אזהרה ובלי "מפגר". */

.forecast {
  margin: 12px var(--gutter) 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- הבוררים ---------- */

.seg-sub {
  margin-top: 14px;
}

/* ---------- כרטיס הגרף ---------- */

.chart-card {
  margin-top: 12px;
}

.chart-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.chart-range {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.chart-hold {
  /* מעבר הגרף מפרק 12. אנימציית כניסה ב-CSS ולא ב-JavaScript:
     הניווט הוא צד שרת ממילא, וכך המעבר עובד גם בלי סקריפט. */
  animation: tzuna-chart .28s ease-out both;
}

@keyframes tzuna-chart {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-sub {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* הכותרת של הגרף הראשון יושבת מתחת לכותרת הכרטיס ולא אחרי
   גרף, ולכן אינה צריכה את אותו מרווח. */
.chart-sub.is-first {
  margin-top: 0;
  margin-bottom: 4px;
}

.chart-stat {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
}

.chart-empty {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.chart-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- מקרא ---------- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.key {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.key-brass { background: var(--brass); }
.key-teal  { background: var(--teal); }
.key-off   { background: var(--dim); }

.key-band {
  height: 10px;
  background: color-mix(in srgb, var(--brass) 16%, transparent);
  border: 1px solid var(--brass-dim);
}

.key-goal {
  background: transparent;
  border-top: 2px dashed var(--brass-dim);
  height: 0;
}

/* ---------- פנים ה-SVG ----------
   התוויות בתוך הגרף הן מספרים ותאריכים קצרים בלבד. כל טקסט
   עברי יושב ב-HTML סביב, כדי שלא תהיה דו-כיווניות בתוך אלמנט
   שאין בו זרימת טקסט. */

/* direction: ltr חובה, לא קוסמטיקה. text-anchor="start" ו-"end"
   נגזרים מכיוון הטקסט, ולא מהמסך: תחת ה-RTL של העמוד הם
   מתהפכים, והתוויות יוצאות מהמסגרת ונחתכות. הכיוון מוחזר כאן
   ל-ltr כדי שהעוגן יתאר את מה שחישבנו - שמאל הוא שמאל.
   התוכן ממילא מספרים ותאריכים קצרים בלבד. */
.ch-axis {
  font-size: 12px;
  font-weight: 500;
  fill: var(--muted);
  direction: ltr;
  unicode-bidi: isolate;
}

.ch-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.ch-zero {
  stroke: var(--muted);
  stroke-width: 1;
}

.ch-goal {
  stroke: var(--brass-dim);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* fill-opacity ולא color-mix עם transparent. ב-SVG התוצאה של
   מיזוג עם שקוף נצבעת אפור אטום בחלק מהמנועים, והפס נראה
   כמו מלבן שנשפך על הגרף. */
.ch-band {
  fill: var(--brass);
  fill-opacity: .10;
  /* המילוי לבדו נקרא כמלבן אפור. הקו התוחם הוא מה שהופך אותו
     לטווח יעד ולא לכתם. */
  stroke: var(--brass-dim);
  stroke-width: 1;
}

.ch-line {
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

/* מרווח של יותר משבועיים. הקו מקווקו כדי שלא יטען רצף
   שלא נמדד. */
.ch-gap {
  stroke-dasharray: 4 4;
  opacity: .55;
}

.ch-line.ch-brass { stroke: var(--brass); }
.ch-line.ch-teal  { stroke: var(--teal); }

.ch-dot.ch-brass { fill: var(--brass); }
.ch-dot.ch-teal  { fill: var(--teal); }

.ch-bar.ch-brass { fill: var(--brass-dim); }
.ch-bar.ch-teal  { fill: color-mix(in srgb, var(--teal) 45%, var(--surface)); }

.ch-bar.ch-brass.is-full { fill: var(--brass); }
.ch-bar.ch-teal.is-full  { fill: var(--teal); }

/* דלי בלי נתון נספר - שבוע שכולו ימים מיוחדים. גדם ולא
   עמודה באפס: אפס פירושו "נמדד ונכשל". */
.ch-off {
  fill: var(--dim);
}

/* ---------- היקפים משניים ---------- */

.girth-rest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.girth-rest li {
  flex: 1 1 30%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
}

.girth-name {
  font-size: 11px;
  color: var(--muted);
}

.girth-delta {
  font-size: 12px;
  color: var(--muted);
  direction: ltr;
}

/* ============================================================
   מסך ההשוואה
   ============================================================ */

.compare-pick {
  margin-top: 14px;
}

/* שתי הבחירות בשורה והכפתור מתחתן. שלוש עמודות באותה שורה
   דחסו את התאריכים עד ש-"2 באוגוסט" נחתך ל-"2 באוגו". */
.compare-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.compare-pick-grid .btn {
  grid-column: 1 / -1;
}

.compare-pick-grid .field {
  margin-bottom: 0;
}

.cmp {
  display: block;
}

.cmp-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px 62px;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
}

.cmp-row:first-child {
  border-top: 0;
}

.cmp-head {
  padding-top: 12px;
  padding-bottom: 8px;
  font-size: 11px;
  color: var(--muted);
}

.cmp-head span {
  text-align: center;
}

.cmp-head span:first-child {
  text-align: start;
}

.cmp-label {
  font-size: 13px;
  color: var(--muted);
}

.cmp-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  direction: ltr;
}

.cmp-delta {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  direction: ltr;
}

.cmp-good { color: var(--brass); }
.cmp-flat { color: var(--muted); }

/* --fail הוא "נכשל" ואינו מתאים כאן: מסה רזה שעלתה בזמן
   שהיא אמורה להישמר אינה כישלון, היא כיוון הפוך. הטקסט
   הרגיל אומר את זה בלי צבע. */
.cmp-bad  { color: var(--text); }

.cmp-photos {
  margin-top: 12px;
  padding: 14px 16px;
}

.cmp-angle {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.cmp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cmp-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cmp-shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.cmp-missing {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
}

.cmp-shot-date {
  font-size: 11px;
  color: var(--muted);
  direction: ltr;
}

/* ============================================================
   אירועים, רצף וימים מיוחדים. שלב 8.
   ============================================================ */

/* ---------- הקצבת החריגה ---------- */

.event-lead {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.event-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.event-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

/* ההתנגשות מוצגת ואינה חוסמת. --fail הוא "נכשל" ואינו מתאים
   כאן: שני אירועים באותו יום אינם שגיאה, הם מצב שירין צריך
   לראות כדי להחליט. */
.event-clash {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.event-clash-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.event-clash ul {
  margin-top: 6px;
}

.event-clash li {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.event-clash-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.event-row {
  grid-template-columns: 76px 1fr auto;
}

.event-what {
  font-size: 13px;
  color: var(--muted);
}

.event-what b {
  color: var(--text);
  font-weight: 500;
}

.event-desc {
  display: block;
  font-size: 11px;
  color: var(--dim);
}

/* ---------- רצף ---------- */

.streak {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.streak-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--brass);
  direction: ltr;
}

.streak-label {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- מונה הפרי ---------- */

.fruit-count {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* חריגה מהמנה השבועית. אזהרה רכה ולא כישלון, לפי R5 -
   בחירה לא תקינה היא אזהרה ולעולם לא חסימה. */
.fruit-count.is-over {
  color: var(--text);
}

.account-note {
  margin-top: 12px;
}

/* ---------- מעברים ---------- */
/* הניווט הוא צד שרת, ולכן טעינת עמוד היא המעבר.
   עדין ותכליתי בלבד, לפי פרק 12. */

@keyframes tzuna-rise {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

main {
  animation: tzuna-rise .18s ease-out both;
}

/* ---------- נגישות ---------- */

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   מסך צפייה בתמונה
   ============================================================ */

.viewer {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter);
}

.viewer-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap-min);
  font-size: 14px;
  font-weight: 500;
  color: var(--brass);
}

.viewer-date {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-outer);
  border-block: 1px solid var(--line);
}

.viewer-stage img {
  display: block;
  max-width: 100%;
  /* גובה המסך פחות הכותרת, הזווית, הניווט והתחתית */
  max-height: calc(100dvh - 230px);
  object-fit: contain;
}

.viewer-angle {
  margin: 16px 0 0;
  text-align: center;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  font-weight: 700;
}

.viewer-nav {
  display: flex;
  gap: 3px;
  margin: 16px var(--gutter) 0;
  background: var(--bg-outer);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.viewer-tab {
  flex: 1;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: background .18s, color .18s;
}

.viewer-tab.active {
  background: var(--surface-2);
  color: var(--brass);
  font-weight: 700;
}

/* זווית בלי תמונה נשארת במקומה ומנוטרלת, כדי שיהיה ברור
   מה חסר במקום שהמשבצת פשוט תיעלם */
.viewer-tab.is-off {
  color: var(--dim);
}

.viewer-foot {
  margin: 16px var(--gutter) 0;
  text-align: center;
  opacity: .75;
}

/* ============================================================
   סוג האימון ומוני השבוע
   ============================================================ */

.mini-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 8px;
}

/* שלושה כפתורים שבהם לכל היותר אחד דלוק. לא בקרה מפולחת:
   שם אחת מהאפשרויות תמיד פעילה, וכאן "בלי אימון" הוא מצב
   לגיטימי שמיוצג בכך שאף כפתור אינו דלוק. */
.workout-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.workout-pick form {
  display: contents;
}

.pick {
  min-height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}

.pick.on {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--on-brass);
  font-weight: 700;
}

/* ---------- מוני השבוע ---------- */

.week-counts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.week-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.week-count-num {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  direction: ltr;
}

.week-count-goal {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.week-count-label {
  font-size: 12px;
  color: var(--muted);
}

.week-count.is-met {
  border-color: var(--brass-dim);
}

.week-count.is-met .week-count-num {
  color: var(--brass);
}