/* =====================================================
   DaNia app — app.css
   RTL · Mobile-first · CSS לוגי בלבד (חריג: בין סימוני media-ltr)
   ===================================================== */

/* ===== גופן: Heebo מתארח באפליקציה ===== */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== טוקנים ===== */
/* בהגדלת טקסט (עד 200%) הגופן והמידות ביחס אליו גדלים, אבל רווחים, ריפודים ואריחים לא: כל מידה כזאת כתובה
   min(N rem, N*16px), כך שבגודל רגיל היא זהה ל־N rem, ובטקסט גדול היא נשארת כמו בגודל רגיל, והרוחב נשאר לטקסט.
   גודל טקסט, גובה מינימלי של יעד מגע ותמונות לא נכללים בזה. */
:root {
  --c-primary: #4A7C6F;        /* רק לכפתור מלא עם טקסט לבן */
  --c-primary-dk: #2C5F56;
  --c-primary-tint: #E4EEEA;
  --c-accent: #C4775E;         /* קישוט בלבד, לא טקסט ולא פוקוס */
  --c-accent-dk: #8F4D38;
  --c-accent-tint: #F4E3DC;
  --c-earth-dk: #5E4A30;
  --c-earth-tint: #EFE6D8;
  --c-rose: #E8B9A6;           /* קישוט על רקע כהה */
  --c-bg: #F7F3EE;
  --c-bg-alt: #EDE7DF;
  --c-card: #FDFAF7;
  --c-text: #2D2D2D;
  --c-text-2: #4F4740;
  --c-muted: #6B6259;
  --c-placeholder: #6B6259;
  --c-line: #E2DAD0;           /* מפרידים דקורטיביים בלבד */
  --c-control: #8C8379;        /* גבולות שדות, צ׳יפים ומתגים */
  --c-link: #2C5F56;
  --focus-light: #2C5F56;
  --focus-dark: #FFFFFF;

  --radius: 1rem;
  --radius-lg: 1.25rem;
  --radius-sm: .5rem;
  --pill: 999px;
  --shadow-sm: 0 2px 12px rgba(44, 95, 86, .08);
  --shadow-md: 0 6px 28px rgba(44, 95, 86, .13);
  --gap-target: min(.5rem, 8px);

  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: min(1.25rem, 20px);
  --col: 30rem;
}

/* ===== ריסט ובסיס ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin-block: 0; line-height: 1.2; }
h1 { font-size: 1.75rem; font-weight: 900; }
h2 { font-size: 1.1875rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p, ul, ol, figure { margin-block: 0; }
ul, ol { padding-inline-start: 1.25rem; }
img { max-inline-size: 100%; display: block; }
a { color: var(--c-link); }
a:hover { color: #1F4740; }
button { font-family: inherit; font-size: 1rem; }
[hidden] { display: none !important; }
[dir="rtl"] .mirror { transform: scaleX(-1); }
.noscript { padding: min(1.25rem, 20px); text-align: center; }
bdi { unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ===== נגישות ===== */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: 0; inset-inline-start: -999px; z-index: 300;
  padding: min(.75rem, 12px) min(1.25rem, 20px); background: var(--c-text); color: #fff;
  border-end-start-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
  font-weight: 500;
}
.skip-link:focus { inset-inline-start: 0; }
:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 3px; }
[data-surface="dark"] :focus-visible,
[data-surface="image"] :focus-visible { outline-color: var(--focus-dark); }
#view:focus, h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
::placeholder { color: var(--c-placeholder); opacity: 1; }

/* ===== פריסה: עמודה אחת ===== */
/* הסרגל התחתון הוא האחרון בזרימה ונצמד לתחתית החלון (sticky), כך שהמקום שהוא תופס נמדד לבד ולא מנוחש:
   בהגדלת טקסט הוא גבוה יותר, והתוכן לעולם לא נחבא מאחוריו בסוף העמוד */
html { scroll-padding-block: 4rem 8rem; }
.app { min-block-size: 100dvh; display: flex; flex-direction: column; }
.view {
  flex: 1 0 auto; inline-size: 100%;
  max-inline-size: var(--col);
  margin-inline: auto;
  padding: min(1.75rem, 28px) var(--gutter);
  display: flex; flex-direction: column; gap: min(1.5rem, 24px);
}

/* ===== סרגל תחתון ===== */
/* הלשוניות חולקות שורה לפי רוחב התווית הארוכה ביותר. בהגדלת טקסט הן עוברות לשורה שנייה, ולא נחתכות או נערמות */
.tabbar {
  position: sticky; inset-block-end: 0; z-index: 100; flex: 0 0 auto;
  container-type: inline-size;
  background: var(--c-card);
  border-block-start: 1px solid var(--c-bg-alt);
}
.tabbar__inner {
  max-inline-size: var(--col); margin-inline: auto;
  padding: min(.5rem, 8px) min(.75rem, 12px);
  padding-block-end: max(.875rem, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: var(--gap-target);
}
@container (max-inline-size: 15rem) { .tab .icon { display: none; } }   /* טקסט גדול מאוד: רק תוויות, כדי שהסרגל לא יכסה חצי מסך */
.tab {
  flex: 1 1 0; min-inline-size: min-content; padding-inline: min(.25rem, 4px);
  min-block-size: min(3.25rem, 52px); padding-block: .25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
  border-radius: .875rem; text-decoration: none;
  color: var(--c-muted); font-size: .8125rem; font-weight: 500; line-height: 1.2;
}
.tab:hover { color: var(--c-primary-dk); }
.tab[aria-current="page"] { background: var(--c-primary-tint); color: var(--c-primary-dk); font-weight: 700; }
[data-surface="dark"] .tabbar { background: #234F47; border-color: rgba(255, 255, 255, .12); }
[data-surface="dark"] .tab { color: rgba(255, 255, 255, .88); }
[data-surface="dark"] .tab:hover { color: #fff; }
[data-surface="dark"] .tab[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; }

/* ===== באנרים ===== */
#banners { position: sticky; inset-block-start: 0; z-index: 90; }
.banner {
  padding: min(.5rem, 8px) var(--gutter); text-align: center;
  font-size: .875rem; font-weight: 500;
  background: var(--c-earth-tint); color: var(--c-earth-dk);
}

/* ===== אייקונים ===== */
.icon { flex: 0 0 auto; display: block; }

/* ===== כפתורים ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: min(.5rem, 8px);
  min-block-size: 3rem; padding: min(.5rem, 8px) min(1.5rem, 24px);
  border: 2px solid var(--c-primary); border-radius: var(--pill);
  background: var(--c-primary); color: #fff;
  font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--c-primary-dk); border-color: var(--c-primary-dk); color: #fff; }
.btn--outline { background: transparent; color: var(--c-link); border-color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary-tint); color: var(--c-primary-dk); }
.btn--text { background: transparent; border-color: transparent; color: var(--c-link); padding-inline: min(.75rem, 12px); }
.btn--text:hover { background: var(--c-primary-tint); border-color: transparent; color: var(--c-primary-dk); }
.btn--light { background: #fff; border-color: #fff; color: var(--c-primary-dk); }
.btn--light:hover { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-primary-dk); }
.btn--ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; font-weight: 500; }
.btn--ghost:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }
.btn--lg { min-block-size: 3.375rem; font-size: 1.0625rem; }
.btn--block { inline-size: 100%; }
.btn__sub { display: block; font-size: .875rem; font-weight: 400; opacity: .92; }
.btn--stack { flex-direction: column; gap: 0; padding-block: .5rem; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: default; }
.btn--outline[aria-pressed="true"] { background: var(--c-primary-tint); color: var(--c-primary-dk); }
.btn--ghost[aria-pressed="true"] { background: rgba(255, 255, 255, .28); border-color: #fff; }

/* ===== צ׳יפים ===== */
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-target); }
.chip {
  min-block-size: 2.75rem; padding: 0 min(1.125rem, 18px);
  border: 1.5px solid var(--c-control); border-radius: var(--pill);
  background: var(--c-card); color: var(--c-text);
  font-size: .9375rem; font-weight: 500; cursor: pointer;
}
.chip[aria-pressed="true"],
.chip-radio input:checked + span { background: var(--c-primary-dk); border-color: var(--c-primary-dk); color: #fff; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio span {
  display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0 min(1.125rem, 18px);
  border: 1.5px solid var(--c-control); border-radius: var(--pill);
  background: var(--c-card); font-size: .9375rem; font-weight: 500;
}
.chip-radio input:focus-visible + span { outline: 3px solid var(--focus-light); outline-offset: 3px; }
fieldset.radio-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: min(.875rem, 14px); }
fieldset.radio-group legend { padding: 0; margin-block-end: .875rem; font-size: 1.1875rem; font-weight: 700; }

/* ===== כרטיסים ושורות ===== */
.card {
  display: flex; align-items: center; gap: min(.875rem, 14px); padding: min(.875rem, 14px);
  border-radius: 1.125rem; background: var(--c-card); border: 1px solid var(--c-bg-alt);
  color: var(--c-text); text-decoration: none;
}
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-target); }
.row { margin: 0; }
.row__link {
  display: flex; align-items: center; gap: min(.875rem, 14px); padding: min(.75rem, 12px); min-block-size: 3.5rem;
  border-radius: var(--radius); background: var(--c-card); border: 1px solid var(--c-bg-alt);
  color: var(--c-text); text-decoration: none;
}
.row__link:hover { border-color: var(--c-control); color: var(--c-text); }
.row__tile {
  flex: 0 0 auto; inline-size: min(3.25rem, 52px); block-size: min(3.25rem, 52px); border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-tint); color: var(--c-primary-dk);
}
.row__tile--video { background: var(--c-accent-tint); color: var(--c-accent-dk); }
.row__tile--text { background: var(--c-earth-tint); color: var(--c-earth-dk); }
.row__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: .0625rem; }
.row__title { font-size: 1rem; font-weight: 700; }
.row__meta { font-size: .875rem; color: var(--c-muted); }
.row__end { flex: 0 0 auto; color: var(--c-muted); display: flex; align-items: center; }
.row__titleline { display: flex; align-items: center; flex-wrap: wrap; gap: min(.25rem, 4px) min(.5rem, 8px); }
/* כותרות עד 60 תווים מוצגות במלואן (G5, N2: בלי חיתוך ב־200%). חיתוך אחרי שתי שורות היה חותך כותרת תקינה ב־320px עם טקסט גדול (F-02);
   כותרת מעל 60 תווים נפסלת בבדיקת התוכן ובניקוי בדפדפן, ולכן אין מקרה שהחיתוך נועד לו */
.row__title, .card__title, .path-card__title { overflow-wrap: anywhere; }
.row__body .badge { align-self: flex-start; margin-block-start: .25rem; }
.row__done { color: var(--c-primary-dk); display: flex; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: min(.25rem, 4px); padding: min(.25rem, 4px) min(.625rem, 10px);
  border-radius: var(--pill); background: var(--c-earth-tint); color: var(--c-earth-dk);
  font-size: .8125rem; font-weight: 700;
}
.badge--new { background: var(--c-accent-tint); color: var(--c-accent-dk); }

.card:hover { border-color: var(--c-control); color: var(--c-text); }
.card__tile {
  flex: 0 0 auto; inline-size: min(3rem, 48px); block-size: min(3rem, 48px); border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-tint); color: var(--c-primary-dk);
}
.card__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: .0625rem; }
.card__label { font-size: .8125rem; color: var(--c-muted); }
.card__title { font-size: 1rem; font-weight: 700; }
.card__meta { font-size: .875rem; color: var(--c-muted); }
.card__end { flex: 0 0 auto; color: var(--c-muted); display: flex; align-items: center; }
.date-tile {
  flex: 0 0 auto; min-inline-size: min(3.625rem, 58px); min-block-size: 4rem; padding-block: .25rem; padding-inline: min(.25rem, 4px); border-radius: .875rem;
  background: var(--c-accent-tint); color: var(--c-accent-dk);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.date-tile__wd, .date-tile__month { font-size: .8125rem; font-weight: 500; }
.date-tile__day { font-size: 1.375rem; font-weight: 900; }

/* ===== כרטיס תמונה (hero) ===== */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-block-size: min(15.5rem, 248px); overflow: hidden;
  border-radius: 1.375rem; background: var(--c-primary-dk); color: #fff; text-decoration: none;
}
.hero:hover { color: #fff; }
.hero__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 40% 35%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28, 52, 47, .15) 0%, rgba(28, 52, 47, .8) 55%, rgba(28, 52, 47, .92) 100%); }
.hero__tag {
  position: relative; align-self: flex-start; margin-inline: min(1rem, 16px); margin-block: min(1rem, 16px) auto;
  padding: min(.3125rem, 5px) min(.75rem, 12px); border-radius: var(--pill);
  background: rgba(247, 243, 238, .94); color: var(--c-primary-dk); font-size: .8125rem; font-weight: 700;
}
.hero__text {
  position: relative; padding: min(1rem, 16px) min(1.125rem, 18px) min(1.125rem, 18px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: min(.75rem, 12px);
  /* שכבה נוספת מתחת לטקסט עצמו: בטקסט גדול הכרטיס גבוה והטקסט מתחיל גבוה יותר, שם השכבה הכללית חלשה (נמדד: 2.8:1) */
  background: linear-gradient(to bottom, rgba(28, 52, 47, 0) 0, rgba(28, 52, 47, .85) min(1rem, 16px));
}
.hero__title { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.hero__meta { display: block; font-size: .9375rem; }
.hero__play {
  flex: 0 0 auto; inline-size: min(3.5rem, 56px); block-size: min(3.5rem, 56px); border-radius: 50%;
  background: #fff; color: var(--c-primary-dk); display: flex; align-items: center; justify-content: center;
}

/* ===== מצבים: ריק, נעול, דיאלוג ===== */
.empty { padding-block: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: min(.875rem, 14px); }
.empty p { color: var(--c-text-2); overflow-wrap: anywhere; }      /* מייל ארוך ("את כבר מחוברת כ־…") לא גולש בטקסט גדול */
.lock-note {
  padding: min(1.125rem, 18px); border-radius: var(--radius-lg);
  background: var(--c-earth-tint); color: var(--c-earth-dk);
  display: flex; flex-direction: column; align-items: flex-start; gap: min(.75rem, 12px);
}
.lock-note p { font-size: 1rem; overflow-wrap: anywhere; }   /* מייל ארוך בלי רווחים ("את מחוברת כ־…") */
.dialog {
  max-inline-size: calc(var(--col) - 2.5rem); inline-size: calc(100% - 2.5rem);
  padding: min(1.5rem, 24px); border: 0; border-radius: var(--radius-lg);
  background: var(--c-card); color: var(--c-text); box-shadow: var(--shadow-md);
}
.dialog::backdrop { background: rgba(28, 28, 28, .55); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--gap-target); margin-block-start: 1.25rem; }

/* ===== כותרת מסך וכפתור חזרה ===== */
.back {
  flex: 0 0 auto; inline-size: min(2.75rem, 44px); block-size: min(2.75rem, 44px); border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-primary-dk);
  display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.back:hover { background: var(--c-primary-tint); color: var(--c-primary-dk); }
.placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: min(.75rem, 12px); }
.placeholder p { color: var(--c-text-2); }
.screen-head { display: flex; align-items: center; gap: min(.75rem, 12px); }
.screen-head__label { flex: 1 1 auto; text-align: center; font-size: .9375rem; font-weight: 500; }

/* ===== בית ===== */
.home, .library, .pathview, .events, .me { display: flex; flex-direction: column; gap: min(1.5rem, 24px); }
.home__head { display: flex; align-items: flex-start; justify-content: space-between; gap: min(.75rem, 12px); }
.bell {
  flex: 0 0 auto; inline-size: min(2.75rem, 44px); block-size: min(2.75rem, 44px); border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-primary-dk);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.bell:hover { background: var(--c-primary-tint); color: var(--c-primary-dk); }
.section { display: flex; flex-direction: column; gap: min(.875rem, 14px); }
.home__pick:empty { display: none; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: min(.75rem, 12px); }
.section__head a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: .9375rem; font-weight: 500; }
.community {
  padding: min(1.25rem, 20px); border-radius: var(--radius-lg); background: var(--c-bg-alt);
  display: flex; flex-direction: column; align-items: flex-start; gap: min(.625rem, 10px);
}
.community h2 { font-size: 1.125rem; }
.community p { font-size: .9375rem; line-height: 1.6; color: var(--c-text-2); }

/* ===== התכנית שלי (S2.5): כרטיס כהה, פס התקדמות, ושלד טעינה ניטרלי ===== */
.program-card {
  padding: min(1.125rem, 18px); border-radius: var(--radius-lg); background: var(--c-primary-dk); color: #fff;
  display: flex; flex-direction: column; gap: min(.75rem, 12px);
}
.program-card :focus-visible { outline-color: var(--focus-dark); }
.program-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: min(.5rem, 8px); flex-wrap: wrap; }
.program-card__title { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.program-card__count { font-size: .875rem; color: rgba(255, 255, 255, .92); }
.progress { block-size: .375rem; border-radius: var(--pill); background: rgba(255, 255, 255, .22); overflow: hidden; }
.progress__bar { display: block; block-size: 100%; inline-size: var(--pct, 0%); border-radius: var(--pill); background: var(--c-rose); }
.program-card__foot { display: flex; align-items: center; justify-content: space-between; gap: min(.75rem, 12px); flex-wrap: wrap; }
.program-card__next { font-size: .9375rem; color: rgba(255, 255, 255, .95); overflow-wrap: anywhere; min-inline-size: 0; flex: 1 1 8rem; }
.program-card--skeleton { background: var(--c-bg-alt); min-block-size: 8.25rem; gap: min(.875rem, 14px); }
.skeleton__line { display: block; block-size: .875rem; border-radius: var(--pill); background: var(--c-line); }
.skeleton__line--title { inline-size: 55%; block-size: 1.125rem; }
.skeleton__line--short { inline-size: 35%; }

/* ===== תרגולים ===== */
.section__count { font-size: .875rem; color: var(--c-muted); }
.strip {
  list-style: none; margin: 0; padding: 0;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  display: flex; gap: min(.75rem, 12px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-block: 8px; margin-block: -8px;      /* מקום לטבעת הפוקוס, שהגלילה האופקית חותכת */
}
.strip::-webkit-scrollbar { display: none; }
.strip__item { flex: 0 0 min(14.75rem, 236px); scroll-snap-align: start; margin: 0; }
.path-card {
  display: flex; flex-direction: column; block-size: 100%; overflow: hidden;
  border-radius: 1.25rem; background: var(--c-card); border: 1px solid var(--c-bg-alt);
  color: var(--c-text); text-decoration: none;
}
.path-card:hover { border-color: var(--c-control); color: var(--c-text); }
.path-card__img { display: block; inline-size: 100%; block-size: min(8.125rem, 130px); object-fit: cover; object-position: 50% 45%; background: var(--c-primary-tint); }
.path-card__body { padding: min(.75rem, 12px) min(.875rem, 14px) min(.875rem, 14px); display: flex; flex-direction: column; gap: .125rem; }
.path-card__title { font-size: 1rem; font-weight: 700; }
.path-card__meta { font-size: .875rem; color: var(--c-muted); }
.path-card .badge { align-self: flex-start; margin-block-start: .375rem; }

.pathview__progress {
  padding: min(.875rem, 14px) min(1rem, 16px); border-radius: var(--radius-lg); background: var(--c-primary-tint);
  display: flex; align-items: center; justify-content: space-between; gap: min(.75rem, 12px); flex-wrap: wrap;
}
.pathview__progress p { font-size: 1.0625rem; font-weight: 700; color: var(--c-primary-dk); }
.row__end-lock { color: var(--c-muted); display: flex; align-items: center; }

/* ===== מפגשים ===== */
.events__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: min(.875rem, 14px); }
.events__item { margin: 0; }
.event {
  display: flex; align-items: flex-start; gap: min(.875rem, 14px); padding: min(.875rem, 14px);
  border-radius: var(--radius); background: var(--c-card); border: 1px solid var(--c-bg-alt);
}
.event__body, .event__main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: min(.25rem, 4px); }
.event__title { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.event__meta { font-size: .875rem; color: var(--c-muted); }
.event__price { font-size: 1rem; font-weight: 700; color: var(--c-primary-dk); }
.event__desc { font-size: .9375rem; color: var(--c-text-2); }
.event__note { font-size: .875rem; color: var(--c-muted); }
.event__body .btn { align-self: flex-start; margin-block-start: .5rem; }
.event--large { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 1.375rem; }
.event__media { position: relative; block-size: min(11.875rem, 190px); background: var(--c-primary-dk); }
.event__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.event__tag {
  position: absolute; inset-block-start: .875rem; inset-inline-start: min(.875rem, 14px);
  padding: min(.3125rem, 5px) min(.75rem, 12px); border-radius: var(--pill);
  background: rgba(247, 243, 238, .94); color: var(--c-accent-dk); font-size: .8125rem; font-weight: 700;
}
.event__main { padding: min(1rem, 16px) min(1.125rem, 18px) min(1.125rem, 18px); gap: min(.5rem, 8px); }
.event--large .event__title { font-size: 1.3125rem; font-weight: 900; }
.event__line { display: flex; align-items: flex-start; gap: min(.5rem, 8px); font-size: .9375rem; color: var(--c-text-2); }
.event__line .icon { margin-block-start: .1875rem; }
.event__foot { margin-block-start: .375rem; display: flex; align-items: center; justify-content: space-between; gap: min(.75rem, 12px); flex-wrap: wrap; }
.events__reassure { text-align: center; color: var(--c-text-2); }

/* ===== המרחב שלי ===== */
/* שלושה מספרים בשורה; בגודל טקסט גדול (200%) או ברוחב צר הם נערמים, כדי שהתוויות לא יחפפו */
.stats-wrap { container-type: inline-size; }
.stats {
  margin: 0; padding: min(1.125rem, 18px) min(.5rem, 8px); border-radius: 1.25rem;
  background: var(--c-card); border: 1px solid var(--c-bg-alt);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: min(1rem, 16px); text-align: center;
}
.stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .125rem; padding-inline: min(.25rem, 4px); overflow-wrap: anywhere; }
@container (min-inline-size: 15rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: min(.25rem, 4px); }
  .stats__item + .stats__item { border-inline-start: 1px solid var(--c-bg-alt); }
}
.stats dd { margin: 0; font-size: 1.75rem; font-weight: 900; line-height: 1.1; color: var(--c-primary-dk); font-variant-numeric: tabular-nums; }
.stats dt { font-size: .875rem; line-height: 1.3; color: var(--c-muted); }
.me__note { font-size: .875rem; color: var(--c-muted); text-align: center; }
.section > .me__note { margin-block-start: -.375rem; }
.me__empty {
  padding: min(1rem, 16px) min(1.125rem, 18px); border-radius: var(--radius); font-size: .9375rem;
  background: var(--c-card); border: 1px solid var(--c-bg-alt); color: var(--c-text-2);
}
.row__thumb {
  flex: 0 0 auto; inline-size: min(3.25rem, 52px); block-size: min(3.25rem, 52px); border-radius: .875rem;
  object-fit: cover; background: var(--c-primary-tint);
}
.menu {
  list-style: none; margin: 0; padding: min(.5rem, 8px); border-radius: 1.125rem;
  background: var(--c-card); border: 1px solid var(--c-bg-alt);
  display: flex; flex-direction: column; gap: var(--gap-target);
}
.menu__item {
  display: flex; align-items: center; gap: min(.75rem, 12px); min-block-size: 3.5rem; padding: min(.5rem, 8px) min(.75rem, 12px);
  border-radius: .875rem; color: var(--c-text); text-decoration: none;
}
.menu__item:hover { background: var(--c-primary-tint); color: var(--c-text); }
button.menu__item { inline-size: 100%; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.menu__item--static, .menu__item--static:hover { background: transparent; }
.menu__icon { flex: 0 0 auto; display: flex; color: var(--c-primary-dk); }
.menu__avatar { flex: 0 0 auto; inline-size: min(1.625rem, 26px); block-size: min(1.625rem, 26px); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.menu__label { flex: 1 1 auto; min-inline-size: 0; font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.menu__end { flex: 0 0 auto; display: flex; color: var(--c-muted); }
.me__foot { font-size: .875rem; color: var(--c-muted); text-align: center; }

/* ===== עמודי טקסט והדרכה: התקנה, פרטיות, נגישות ===== */
.doc { display: flex; flex-direction: column; gap: min(1.25rem, 20px); }
.doc__lead { color: var(--c-text-2); }
.callout {
  display: flex; align-items: flex-start; gap: min(.625rem, 10px); padding: min(1rem, 16px) min(1.125rem, 18px);
  border-radius: var(--radius-lg); background: var(--c-earth-tint); color: var(--c-earth-dk); font-weight: 500;
}
.callout .icon { margin-block-start: .125rem; }
.callout--done { background: var(--c-primary-tint); color: var(--c-primary-dk); }
.callout:focus { outline: none; }
.doc__section { display: flex; flex-direction: column; gap: min(.625rem, 10px); }
.doc__section h2 { margin-block-end: .125rem; }
.doc__list { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: min(.375rem, 6px); }
.doc__list li::marker { color: var(--c-primary-dk); }
.doc__meta { font-size: .9375rem; color: var(--c-text-2); }
.doc__contact { font-style: normal; padding: min(.875rem, 14px) min(1rem, 16px); border-radius: var(--radius); background: var(--c-card); border: 1px solid var(--c-bg-alt); display: flex; flex-direction: column; gap: var(--gap-target); }
.doc a { overflow-wrap: anywhere; }
.doc__contact p { display: flex; flex-wrap: wrap; align-items: center; column-gap: min(.25rem, 4px); }
.doc__contact a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.install { display: flex; flex-direction: column; align-items: flex-start; gap: min(1.25rem, 20px); }
.install > .callout { align-self: stretch; }
.install__steps { margin: 0; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: min(1.5rem, 24px); align-self: stretch; }
.install__steps li { padding-inline-start: .25rem; font-weight: 500; }
.install__steps li > img { margin-block-start: .75rem; }
.install__steps li::marker { font-weight: 700; color: var(--c-primary-dk); }
.install__img { inline-size: min(100%, 15rem); block-size: auto; border-radius: var(--radius); border: 1px solid var(--c-bg-alt); }
.install__note { font-size: .875rem; color: var(--c-muted); }

/* ===== הזמנה עדינה (התקנה, התחברות) ===== */
.nudge {
  padding: min(1rem, 16px) min(1.125rem, 18px); border-radius: var(--radius-lg);
  background: var(--c-primary-tint); color: var(--c-text);
  display: flex; flex-direction: column; gap: min(.75rem, 12px);
}
.nudge__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-target); }
.end .nudge { background: var(--c-card); }
.nudge--dark, [data-surface="dark"] .end .nudge { background: rgba(255, 255, 255, .12); color: #fff; }

/* ===== כניסה עם מייל (S9.1): שדות, שגיאה, שליחה חוזרת ===== */
.signin, .signin__area, .signin__form { display: flex; flex-direction: column; gap: min(1.25rem, 20px); }
.signin__lead, .signin__notice, .signin__merge, .signin__sent { color: var(--c-text-2); }
.signin__notice, .signin__merge { font-size: .9375rem; }
.signin__sent { font-weight: 500; color: var(--c-text); }
.signin__sent, .signin__notice, .signin__merge { overflow-wrap: anywhere; }      /* מייל ארוך לא גולש ב־320px */
.signin__more { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.field { display: flex; flex-direction: column; gap: min(.375rem, 6px); }
.field label { font-weight: 700; }
.input {
  inline-size: 100%; min-block-size: 3rem; padding: min(.5rem, 8px) min(.875rem, 14px);
  font: inherit; font-size: 1rem; color: var(--c-text); background: var(--c-card);
  border: 1.5px solid var(--c-control); border-radius: var(--radius);
}
.input[aria-invalid="true"] { border-color: var(--c-accent-dk); }
.input--code { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: .4em; text-align: center; }
.signin__error {
  padding: min(.75rem, 12px) min(1rem, 16px); border-radius: var(--radius);
  background: var(--c-accent-tint); color: var(--c-accent-dk); font-weight: 500;
  display: flex; flex-direction: column; align-items: flex-start; gap: min(.625rem, 10px);
}
.signin__resend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-target); }
.signin__wait { font-size: .875rem; color: var(--c-muted); }

/* ===== תזכורת יומית (S11): סטטוס, הודעת איסוף, שגיאה, פעולות ===== */
.reminder__body { display: flex; flex-direction: column; align-items: flex-start; gap: min(1.25rem, 20px); }
.reminder__body > .field { align-self: stretch; }
.reminder__status { font-weight: 500; overflow-wrap: anywhere; }
.reminder__status:focus { outline: none; }
.reminder__notice, .reminder__device { color: var(--c-text-2); font-size: .9375rem; }
.reminder__error {
  align-self: stretch; padding: min(.75rem, 12px) min(1rem, 16px); border-radius: var(--radius);
  background: var(--c-accent-tint); color: var(--c-accent-dk); font-weight: 500;
}
.reminder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-target); }

/* ===== פתיחה ===== */
[data-surface="image"] { background: var(--c-primary-dk); }
.welcome { color: #fff; position: fixed; inset: 0; overflow-y: auto; scroll-padding-block: 1rem; }
.welcome__img { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 38% 35%; }
.welcome__inner {
  position: relative; min-block-size: 100dvh; max-inline-size: var(--col); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.welcome__body {
  padding: min(5rem, 80px) min(1.75rem, 28px) min(2rem, 32px);
  padding-block-end: max(2rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: min(1.125rem, 18px);
  background: linear-gradient(to bottom, rgba(28, 52, 47, 0) 0%, rgba(28, 52, 47, .82) min(4rem, 64px), rgba(28, 52, 47, .93) 100%);
}
.welcome__kicker { font-size: .8125rem; font-weight: 500; letter-spacing: .14em; opacity: .95; }
.welcome h1 { font-size: 2.25rem; line-height: 1.2; }
.welcome__lead { font-size: 1.0625rem; line-height: 1.6; opacity: .96; }
.welcome__actions { display: flex; flex-direction: column; gap: min(.75rem, 12px); margin-block-start: .625rem; }
.welcome__note { text-align: center; font-size: .875rem; opacity: .92; }
.welcome__links { display: flex; justify-content: center; flex-wrap: wrap; gap: min(.25rem, 4px) min(1rem, 16px); }
.welcome a:not(.btn) { color: #fff; font-size: .875rem; display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; }
.welcome a:not(.btn):hover { color: var(--c-bg); }

/* ===== דף תרגול (בהיר): וידאו וכתיבה ===== */
.practice { display: flex; flex-direction: column; gap: min(1.25rem, 20px); }
.practice__head { display: flex; align-items: center; justify-content: space-between; gap: min(.75rem, 12px); }
.practice__title { display: flex; flex-direction: column; gap: min(.25rem, 4px); }
.practice__meta { color: var(--c-muted); font-size: .9375rem; }
.practice__intro { color: var(--c-text-2); }
.practice__cover { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.save {
  flex: 0 0 auto; inline-size: min(2.75rem, 44px); block-size: min(2.75rem, 44px); border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-primary-dk);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.save[aria-pressed="true"] { background: var(--c-accent-tint); color: var(--c-accent-dk); border-color: var(--c-accent-tint); }
.video { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-primary-dk); }
.video__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.video__shade { position: absolute; inset: 0; background: rgba(28, 52, 47, .35); }
.video__play {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-primary-dk);
}
.video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 3px var(--c-primary-dk); }   /* פנימית: .video חותך טבעת חיצונית */
.video__play .video__btn { inline-size: min(4.5rem, 72px); block-size: min(4.5rem, 72px); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.video__note, .practice__note { font-size: .875rem; color: var(--c-muted); }
.practice > a:not(.btn) { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.steps { margin: 0; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: min(.75rem, 12px); }
.steps li { padding-inline-start: .25rem; }
.steps li::marker { font-weight: 700; color: var(--c-primary-dk); }

/* ===== פאנל סיום ===== */
.end {
  padding: min(1.25rem, 20px); border-radius: var(--radius-lg);
  background: var(--c-primary-tint); color: var(--c-text);
  display: flex; flex-direction: column; gap: min(1rem, 16px);
}
.end h2 { font-size: 1.25rem; font-weight: 900; }
.end__msg p { color: var(--c-text-2); }
.end__actions { display: flex; flex-wrap: wrap; gap: var(--gap-target); }
[data-surface="dark"] .end { background: rgba(255, 255, 255, .1); color: #fff; }
[data-surface="dark"] .end__msg p { color: rgba(255, 255, 255, .92); }

/* ===== דף תרגול אודיו (נגן, משטח כהה) ===== */
[data-surface="dark"] { background: var(--c-primary-dk); color: #fff; }
[data-surface="dark"] a:not(.btn) { color: #fff; }
[data-surface="dark"] a:not(.btn):hover { color: var(--c-bg); }
.player { display: flex; flex-direction: column; gap: min(1.25rem, 20px); }
.player .screen-head .back,
.player .save { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.player .save[aria-pressed="true"] { color: var(--c-rose); }
.player .back:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.pl-cover { inline-size: 100%; block-size: min(20rem, 36dvh); object-fit: cover; object-position: 35% 40%; border-radius: 1.5rem; }
.pl-info { display: flex; flex-direction: column; gap: min(.25rem, 4px); }
.pl-info h1 { font-size: 1.75rem; }
.pl-meta { font-size: 1rem; opacity: .94; }
.pl-intro { font-size: .9375rem; opacity: .92; margin-block-start: .375rem; }
.pl-state { min-block-size: 1.5rem; font-size: .9375rem; text-align: center; }
.pl-resume { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-target); }
.pl-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--gap-target); }
.pl-tile {
  min-block-size: 4rem; border-radius: var(--radius); border: 0;
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: .8125rem; font-weight: 500; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(.25rem, 4px);
}
.pl-tile:hover { background: rgba(255, 255, 255, .18); }
.pl-hint { font-size: .875rem; opacity: .92; text-align: center; }
.transcript { border-radius: var(--radius); background: rgba(255, 255, 255, .08); }
.transcript summary { min-block-size: 3rem; padding: min(.75rem, 12px) min(1rem, 16px); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.transcript__body { padding: 0 min(1rem, 16px) min(1rem, 16px); display: flex; flex-direction: column; gap: min(.875rem, 14px); font-size: 1rem; line-height: 1.7; }

/* media-ltr:start */
.media-ltr { direction: ltr; }
.pl-seek { display: flex; flex-direction: column; gap: min(.25rem, 4px); }
.seek { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: min(2.75rem, 44px); margin: 0; background: transparent; cursor: pointer; }
.seek::-webkit-slider-runnable-track { block-size: 4px; border-radius: var(--pill); background: linear-gradient(to right, #fff var(--pct, 0%), rgba(255, 255, 255, .55) var(--pct, 0%)); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; inline-size: min(1.25rem, 20px); block-size: min(1.25rem, 20px); margin-block-start: -8px; border-radius: 50%; background: #fff; border: 0; }
.seek::-moz-range-track { block-size: 4px; border-radius: var(--pill); background: rgba(255, 255, 255, .55); }
.seek::-moz-range-progress { block-size: 4px; border-radius: var(--pill); background: #fff; }
.seek::-moz-range-thumb { inline-size: min(1.25rem, 20px); block-size: min(1.25rem, 20px); border-radius: 50%; background: #fff; border: 0; }
.seek:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 2px; border-radius: var(--radius-sm); }
.pl-times { display: flex; justify-content: space-between; font-size: .8125rem; font-variant-numeric: tabular-nums; opacity: .92; }
.pl-controls { display: flex; align-items: center; justify-content: center; gap: min(2.5rem, 40px); }
.pl-skip { inline-size: min(3.25rem, 52px); block-size: min(3.25rem, 52px); border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-skip:hover { background: rgba(255, 255, 255, .12); }
.pl-play { inline-size: min(5rem, 80px); block-size: min(5rem, 80px); border: 0; border-radius: 50%; background: #fff; color: var(--c-primary-dk); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-play:hover { background: var(--c-bg); }
/* media-ltr:end */

/* ===== תנועה מופחתת ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}