/* =========================================================================
   12 רגעים — עיצוב המרחב הדיגיטלי
   מובייל-פירסט, נגיש, פלטת הצבעים הייעודית לפרויקט בת המצווה.
   ========================================================================= */

:root {
  /* פלטת "12 רגעים" — נפרדת במכוון מפלטת המותג-על */
  --color-cream:      #fbf4ea;
  --color-pink:        #fad3e3;
  --color-lilac:        #ead6e9;
  --color-mint:          #d4ebdb;
  --color-ink:              #2b2b2c;   /* טקסט עיקרי — מוכהה מ-#000 לקונטרסט נוח יותר */
  --color-ink-soft:      #525254;   /* טקסט משני */
  --color-white:        #ffffff;

  /* גוונים כהים יותר של הפסטל, לשימוש בטקסט/מסגרות על פסטל (ניגודיות AA) */
  --color-pink-deep:    #a24d6d;
  --color-lilac-deep:  #7c5c85;
  --color-mint-deep:  #3f7a5c;
  /* גוון ביניים — בהיר מ-lilac-deep, כהה מספיק כדי להישאר קריא על קרם
     (~3.7:1, מספיק לטקסט גדול/מודגש לפי WCAG, לא לטקסט רגיל). ניסיוני
     בשביל השוואה בלבד, לא (עדיין) חלק קבוע מהפלטה. הפסטל הטהור (#ead6e9)
     נבדק ונפסל: הניגודיות שלו על קרם קרובה ל-1:1, כמעט בלתי קריא. */
  --color-lilac-mid:  #96729f;

  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-blob: 42% 58% 63% 37% / 47% 42% 58% 53%;

  --shadow-card: 0 6px 20px rgba(43, 43, 44, 0.08);
  --shadow-card-hover: 0 10px 28px rgba(43, 43, 44, 0.14);

  --font-body: 'IBM Plex Sans Hebrew', 'Segoe UI', Arial, sans-serif;

  --focus-ring: 3px solid #2b6cb0;
  --focus-ring-offset: 2px;

  --bottom-nav-height: 4.75rem;
  --header-height: 3.5rem;

  --transition-fast: 160ms ease;
  --transition-med: 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition-med: 0ms; }
}

/* ---------- איפוס בסיסי ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
  font-size: 1rem;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }

/* מכבד prefers-reduced-motion בכל האתר */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.hidden { display: none !important; }

/* תיקון קריטי: כל אלמנט עם התכונה hidden (למשל אקורדיונים שנסגרים ע"י JS)
   חייב להיעלם, גם אם יש לו כלל display משלו (כמו display:grid) שאחרת "מנצח"
   את ברירת המחדל של הדפדפן ל-hidden. בלי זה, אקורדיונים לא נסגרים בפועל. */
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  right: 1rem; top: -3rem;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 1000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ---------- מצב פוקוס גלוי בכל האתר ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

/* ---------- כתמים אורגניים (בלובים) — רקע דקורטיבי ---------- */
.blob {
  position: absolute;
  border-radius: var(--radius-blob);
  filter: blur(0.5px);
  z-index: 0;
}

/* =========================================================================
   מסך 0: כניסה
   ========================================================================= */
.entry-screen {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
  overflow: hidden;
  background: var(--color-cream);
}

.entry-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 12%, var(--color-pink) 0%, transparent 70%),
    radial-gradient(ellipse 55% 38% at 88% 20%, var(--color-lilac) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 20% 92%, var(--color-mint) 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 90% 88%, var(--color-pink) 0%, transparent 70%);
  opacity: 0.65;
}

.entry-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  text-align: center;
}

/* קובץ הלוגו המקורי (cards_logo_with_title.jpg) צויר עם רקע קרם מלא —
   מלבן קשיח שנראה "בהיר מדי"/מנותק מהרקע המדורג-צבעוני (.entry-bg) מסביבו.
   cards_logo_with_title_transparent.png היא גרסה מעובדת (הרקע האחיד הוסר
   אוטומטית לפי מרחק צבע מהקרם, עם דעיכה רכה בקצוות כדי לא ליצור קו קשיח) —
   הקובץ המקורי נשמר בלי שינוי, זה קובץ נגזר נוסף. עכשיו האיור "צף" ישירות
   מעל כתמי הרקע, ועטוף בכרטיס קרם (.entry-panel) שנראה בדיוק כמו הבלוק
   התחתון, במקום מלבן-תמונה נפרד עם רקע משלו. */
.entry-panel {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.entry-logo-panel {
  padding: 1.5rem 1.25rem 0.75rem;
  margin: 0 0 1.5rem;
}
.entry-logo {
  width: 100%;
  display: block;
}

/* גרסת-תמונה של הטקסט "ערכה חוויתית לחיבור אמא ובת בשנת המצווה" (title.jpg,
   928×232 — יחס רחב, שתי שורות מוכנות, טיפוגרפיה עם קונטור תואמת למותג),
   באותו רוחב בדיוק כמו .entry-logo במקום גרסת טקסט חי — גדולה וברורה יותר
   בלי לנחש גודל/צבע, ומגיעה כבר מפוצלת לשתי שורות. עטופה עכשיו באותו כרטיס
   .entry-panel כמו הלוגו למעלה והטופס למטה — גם כאן הרקע של קובץ התמונה
   עצמו הוא קרם מלא, אז הוא מתמזג בלי תפר עם רקע הכרטיס, ורק הפינות
   המעוגלות+הצל של הכרטיס מוסיפים את המסגרת שביקשת. */
.entry-tagline-panel {
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.entry-tagline {
  width: 100%;
  display: block;
}

/* רקע/פינות/צל עברו ל-.entry-panel המשותף (אותו טיפול בדיוק כמו .entry-logo-panel
   עכשיו) — היה rgba לבן-שקוף שונה במעט מהקרם, ועם ה-blur מעל כתמי הרקע
   הצבעוניים יצא אפילו כהה/עכור יותר מקרם נקי. */
.entry-form {
  padding: 1.5rem;
  text-align: right;
}

.entry-lede {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0 0 1.1rem;
}

/* אותו לקח כמו קישורי-עזר אחרים באתר (.dedication-photo-label וכו') —
   .btn-text בסיסי לא נראה לחיץ בלי צבע/קו תחתון מפורש. */
.forgot-password-link {
  display: block;
  color: var(--color-mint-deep);
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.85rem;
  margin: -0.3rem 0 0.8rem;
  padding: 0;
  min-height: auto;
}
.forgot-password-link:hover, .forgot-password-link:focus-visible { color: var(--color-pink-deep); }

/* =========================================================================
   מבנה כללי של האפליקציה
   ========================================================================= */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  background: var(--color-cream);
  border-bottom: 1px solid rgba(43,43,44,0.08);
}
.app-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: 50%; flex-shrink: 0; }
.app-header-text { flex: 1; min-width: 0; }
.app-title-main { font-weight: 700; font-size: 1.05rem; margin: 0; line-height: 1.2; }
.app-title-sub {
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "יצירת קשר" ו"יציאה" זו לצד זו במקום זו-מתחת-זו נראו "באלכסון" (מורן,
   23.8.2026) — עכשיו עמודה קטנה, ממורכזת, בקצה הבאנר. */
.app-header-actions { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; }
/* .btn-text הבסיסי נותן padding:0.4rem + min-height:44px (יעד-מגע נגיש) —
   זו הסיבה שהיה "רווח" גם עם gap:0 (השטח הפנוי היה *בתוך* כל כפתור, לא
   בין הכפתורים). מבטלים את זה במפורש כאן, כי אלה שני קישורי-עזר קטנים
   ומשניים בבאנר, לא כפתורי פעולה עיקריים — מקבלים עדיפות לצפיפות חזותית
   על פני יעד-מגע גדול, בכוונה, רק כאן. **חייב .btn-text בסלקטור עצמו**
   (לא רק .app-logout/.app-contact-link לבד) — אחרת יש לו בדיוק אותה
   ספציפיות (0,0,1,0) כמו .btn-text, וכיוון ש-.btn-text מוגדר אחר-כך
   בקובץ (שורה 378), הוא ניצח בשקט על אף שהכלל הזה הופיע קודם. */
.btn-text.app-logout, .btn-text.app-contact-link {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  text-decoration: underline;
  white-space: nowrap;
  padding: 0;
  min-height: auto;
  line-height: 1.4;
}
.app-contact-link:hover, .app-contact-link:focus-visible { color: var(--color-mint-deep); }

.app-main {
  flex: 1;
  padding: 1.25rem 1rem calc(var(--bottom-nav-height) + 2rem);
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

.screen-title { font-size: 1.35rem; margin-bottom: 0.4rem; }
.screen-lede { color: var(--color-ink-soft); margin-bottom: 1.5rem; }

/* ---------- ניווט תחתון קבוע — כפתורי טקסט ורודים, פינות מעוגלות ---------- */
.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 0.3rem;
  justify-content: space-between;
  background: var(--color-cream);
  border-top: 1px solid rgba(43,43,44,0.08);
  padding: 0.4rem 0.35rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
}

.nav-btn {
  flex: 1 1 0;
  min-width: 2.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pink);
  border: 2px solid transparent;
  color: var(--color-ink);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 0.4rem 0.3rem;
  border-radius: 0.9rem;
  cursor: pointer;
  text-align: center;
}
.nav-btn[aria-current="page"] {
  font-weight: 800;
  border-color: var(--color-ink);
}
.nav-btn:hover { filter: brightness(0.97); }

/* =========================================================================
   טפסים
   ========================================================================= */
.field { margin-bottom: 1.1rem; text-align: right; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
fieldset.field { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; }
.field legend { display: block; width: 100%; padding: 0; font-weight: 600; margin-bottom: 0.35rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid rgba(43,43,44,0.25);
  border-radius: 0.7rem;
  background: var(--color-white);
  color: var(--color-ink);
}
textarea { min-height: 6rem; resize: vertical; }

/* צבע ברירת המחדל של checkbox מסומן בדפדפן הוא כחול מערכת — לא מצבעי
   המותג. כלל גלובלי אחד פותר את זה בכל תיבות הסימון באתר (ערכים, משימות,
   תזכורות מייל) בלי לחזור על עצמו בכל מקום בנפרד. */
input[type="checkbox"] { accent-color: var(--color-lilac-deep); }

input:invalid[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: #b3453a;
}

.field-hint { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: 0.35rem; }
/* שורה קבועה בתחתית כרטיס הכניסה, בשורה נפרדת: מפנה מי שעדיין לא רכשה לדף הרכישה (בלי לחשוף אילו מיילים רשומים) */
.entry-buy-line { margin: 1.1rem 0 0; font-size: 0.9rem; text-align: center; }
.entry-buy-line a { color: var(--color-mint-deep); font-weight: 700; text-decoration: underline; }
.entry-buy-line a:hover, .entry-buy-line a:focus-visible { color: var(--color-pink-deep); }
/* קישורי תקנון/פרטיות/נגישות: שורה קטנה ושקטה, במסך הכניסה ובמסך יצירת קשר */
.legal-links { margin: 1rem 0 0; font-size: 0.78rem; color: var(--color-ink-soft); text-align: center; }
.legal-links a { color: var(--color-ink-soft); text-decoration: underline; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--color-mint-deep); }
.field-error {
  font-size: 0.85rem;
  color: #b3453a;
  margin-top: 0.35rem;
  font-weight: 600;
}

.field-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.field-toggle input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary {
  background: var(--color-ink);
  color: var(--color-cream);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-block { width: 100%; }
.btn-text {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  min-height: 44px;
}

/* ---------- כפתור "נוזלי": ריק כברירת מחדל, מתמלא בירוק מנטה של המותג
   בהובר/לחיצה/מגע. משתמש בפסאדו-אלמנט אליפסה גדולה שמוסתרת מתחת לכפתור
   (overflow:hidden) ועולה פנימה — הקצה המעוגל שלה נותן קו "גל" בזמן העלייה.
   מונפש דרך bottom, לא transform — כדי לא לחזור על באג הטשטוש שתוקן במקומות
   אחרים באתר (transition:transform קבוע יכול לטשטש טקסט). :active מכסה
   מגע/מובייל (אין הובר), :hover/:focus-visible מכסים עכבר/מקלדת. */
.btn-liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-cream);
  color: var(--color-mint-deep);
  border: 2px solid var(--color-mint-deep);
}
.btn-liquid::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -25%;
  left: -25%;
  bottom: -100%;
  height: 220%;
  border-radius: 45%;
  background: var(--color-mint);
}
/* המעבר ההדרגתי (transition) עצמו קיים רק כשיש עכבר אמיתי — מורן ביקשה
   שבמגע/מובייל, שאין בו הובר בכלל, לא תהיה "עלייה" איטית. בלי ה-media
   query הזה, ::before עדיין מקבל transition כלשהו, אז :active במגע היה
   מציג את אותה אנימציה איטית גם שם. כש-transition לא מוגדר (מחוץ ל-media
   query), :active עדיין משנה את bottom, רק בלי אנימציה — קפיצה מיידית,
   שנותנת משוב-לחיצה בסיסי בלי "המילוי ההדרגתי" שלא נדרש שם. */
@media (hover: hover) and (pointer: fine) {
  .btn-liquid::before { transition: bottom 480ms cubic-bezier(0.5, 1.6, 0.4, 1); }
}
/* רק הרקע (::before) זז בהובר/פוקוס/לחיצה — צבע הטקסט נשאר קבוע (מורן
   דייקה: לא רצתה שהטקסט "יתחלף", רק שהרקע יתמלא מתחתיו בסגול/מנטה
   הפסטלי). --color-*-deep כבר מיועד מלכתחילה לשמש כטקסט על גבי הפסטל
   התואם שלו (ראו הערה ב-:root על ניגודיות AA), אז זה קריא היטב גם אחרי
   שהרקע מתמלא, בלי צורך להחליף לצבע אחר. */
.btn-liquid:hover::before,
.btn-liquid:focus-visible::before,
.btn-liquid:active::before { bottom: -40%; }
@media (prefers-reduced-motion: reduce) {
  .btn-liquid::before { transition: none; }
}

/* גרסת סגול פסטל — כרגע רק לכפתור הכניסה למרחב (#screen-entry), שאר
   הכפתורים הנוזליים באתר נשארים במנטה. אותו מנגנון בדיוק, רק צבעים אחרים. */
.btn-liquid-lilac {
  color: var(--color-lilac-deep);
  border-color: var(--color-lilac-deep);
}
.btn-liquid-lilac::before { background: var(--color-lilac); }

/* ---------- אזור 1: כרטיס "כאן מתחילות" — כתמים אורגניים ברקע (אותה
   שפה חזותית כמו .entry-bg/.blob במסך הכניסה), כדי שהמעבר מהכניסה למסך
   הזה ירגיש רציף ולא כמו טופס גנרי. ---------- */
.onboarding-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.onboarding-blob { position: absolute; border-radius: var(--radius-blob); opacity: 0.55; z-index: 0; }
.onboarding-blob-a { width: 8.5rem; height: 8.5rem; background: var(--color-pink); top: -3.5rem; inset-inline-start: -3rem; }
.onboarding-blob-b {
  width: 6rem; height: 6rem;
  border-radius: 63% 37% 42% 58% / 53% 47% 42% 58%;
  background: var(--color-mint);
  bottom: -2.25rem; inset-inline-end: -2rem;
}
.onboarding-intro { position: relative; z-index: 1; text-align: center; margin-bottom: 1.5rem; }
.onboarding-star { font-size: 1.5rem; color: var(--color-pink-deep); margin-bottom: 0.3rem; }
.onboarding-intro .screen-title { margin-bottom: 0.35rem; }
.onboarding-intro .screen-lede { margin-bottom: 0; }

#onboarding-form { position: relative; z-index: 1; }

/* נקודת צבע פסטלית ליד כל שדה — מבדילה בין השדות במבט חטוף. מילוי פסטל
   (לא הגוון הכהה) עם טבעת דקה בגוון הכהה רק לצורך הבחנה על רקע לבן. */
.field-dot {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
}
.field-dot-mom { background: var(--color-pink); border: 1.5px solid var(--color-pink-deep); }
.field-dot-daughter { background: var(--color-mint); border: 1.5px solid var(--color-mint-deep); }
.field-dot-month { background: var(--color-lilac); border: 1.5px solid var(--color-lilac-deep); }

/* ---------- פאנל "נעול" באזור 1 (בתוך .onboarding-card, לא כרטיס נפרד) ---------- */
.locked-panel { position: relative; z-index: 1; text-align: center; }
.locked-names { font-size: 1.3rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.6rem; }
.locked-sep { color: var(--color-pink-deep); }
.locked-month-pill {
  display: inline-block;
  background: var(--color-mint);
  color: var(--color-mint-deep);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}
.locked-caption { font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: 1rem; }
/* אותו לקח כמו .dedication-photo-label — .btn-text בסיסי לא נראה לחיץ,
   וזו הפעולה החשובה היחידה בפאנל הנעול (חוץ מה"יציאה" שבבאנר). שתי
   אפשרויות (גוגל ישירות / הורדת .ics לכל יומן אחר) כי אין דרך לדעת
   מראש איזה יומן פתוח כברירת מחדל אצל מי שנכנסת. */
.calendar-reminder-actions { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.calendar-reminder-btn { color: var(--color-mint-deep); font-weight: 700; text-decoration: underline; font-size: 0.9rem; }
.calendar-reminder-btn:hover, .calendar-reminder-btn:focus-visible { color: var(--color-pink-deep); }

.correction-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(43,43,44,0.15); }
.correction-block strong { color: var(--color-ink); }

/* =========================================================================
   אזור 2: מילה ממני — המסך הראשון, כולל ה"הירו" (הבאנר הקבוע מוסתר כאן
   בלבד — ראו .app-header[hidden] דרך JS ב-routeToScreen)
   ========================================================================= */
.welcome-hero {
  text-align: center;
  padding-top: 1.5rem;
  margin-bottom: 1.75rem;
}
/* פונט הבית הקיים (IBM Plex Sans Hebrew) בגודל/משקל דרמטיים, לא פונט חדש —
   שומר על האתר בלי תלות חיצונית נוספת. */
.welcome-hero-title {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 0.75rem;
  color: var(--color-lilac-mid);
}
.welcome-hero-hearts {
  width: min(55%, 10rem);
  aspect-ratio: 48 / 40.15; /* יחס הממדים של heartslinestroke.json */
  margin: 0 auto;
}
.welcome-hero-hearts svg { display: block; }
.welcome-intro-line {
  text-align: right;
  color: var(--color-ink);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.prose p { margin-bottom: 1.1rem; }
.prose p:first-child { font-weight: 700; font-size: 1.1rem; }
.signature { width: 8rem; margin-top: 0.5rem; }

/* =========================================================================
   אזור 3: איך זה עובד — טקסט מלא מתוך "words from me to the mom.docx"
   (לא תקציר), עם קצת ירוק (--color-mint) כפי שמורן ביקשה.
   ========================================================================= */
.howitworks-steps {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.howitworks-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  border-inline-start: 3px solid var(--color-mint);
}
.step-num {
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-mint-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.step-icon { width: 1.7rem; height: 1.7rem; object-fit: contain; }
/* הלב (שלב 1) והידיים-עם-לב (שלב 2) קצת יותר עדינים/מפורטים מהשאר —
   הגדלה נקודתית בתוך אותו עיגול כדי שיישארו ברורים גם בטלפון. */
.howitworks-steps .howitworks-step:nth-child(1) .step-icon,
.howitworks-steps .howitworks-step:nth-child(2) .step-icon {
  width: 2.05rem; height: 2.05rem;
}
.howitworks-step h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.howitworks-step p { margin: 0; color: var(--color-ink-soft); font-size: 0.92rem; }
.howitworks-step strong, .howitworks-bonus strong { color: var(--color-mint-deep); }

/* בלוק "4 גלויות מיוחדות" — רקע מנטה עדין, מובחן ויזואלית מרשימת הצעדים */
.howitworks-bonus {
  background: var(--color-mint);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.1rem;
  margin-top: 0.4rem;
}
.howitworks-bonus-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.65rem; margin-bottom: 0.4rem; }
.howitworks-bonus-title { font-size: 1.1rem; margin-bottom: 0; color: var(--color-mint-deep); }
.bonus-spark { width: 1.9rem; height: 1.9rem; flex-shrink: 0; object-fit: contain; }
.howitworks-bonus-intro { color: var(--color-ink-soft); margin-bottom: 1rem; }
.howitworks-bonus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.howitworks-bonus-list li { border-top: 1px dashed rgba(43,43,44,0.18); padding-top: 0.85rem; }
.howitworks-bonus-list li:first-child { border-top: none; padding-top: 0; }
.howitworks-bonus-item-title { font-weight: 700; margin: 0 0 0.2rem; }
.howitworks-bonus-list li p:last-child { margin: 0; font-size: 0.92rem; color: var(--color-ink-soft); }

/* =========================================================================
   אזור 4: הרגעים שלנו — טאב מאוחד עם toggle בין שתי תצוגות פנימיות
   ========================================================================= */
/* ---------- ה-toggle עצמו ---------- */
.trail-toggle {
  display: flex;
  gap: 0.3rem;
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.3rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}
.trail-toggle-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 999px;
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.trail-toggle-btn.is-active { background: var(--color-lilac); color: var(--color-ink); }

/* ---------- מעבר עדין בין שתי התצוגות (fade + slide קל) ----------
   שתי התצוגות אף פעם לא גלויות בו-זמנית (hidden רגיל) — קודם היוצאת
   "דוהה" (is-view-leaving), ורק אז מוסתרת בפועל והחדשה "נכנסת"
   (is-view-entering) — כדי לא לגרום לקפיצת גובה. ~260ms סה"כ, לא איטי.
   transition/transform רק דרך קלאס זמני (is-view-transitioning) שה-JS
   מוסיף/מסיר בפועל האנימציה — לא כמצב קבוע על .trail-view. זה בדיוק אותו
   באג כמו הטשטוש שתוקן בהיפוך הגלויות: transition:transform קבוע (גם
   כשה-transform עצמו הוא רק translateY(0)) מקבע את האלמנט לצמיתות בשכבת
   GPU נפרדת, וזה מטשטש את כל הטקסט בפנים — גם במנוחה, לא רק תוך כדי מעבר. */
.trail-view-stage { position: relative; }
.trail-view { opacity: 1; }
.trail-view.is-view-transitioning { transition: opacity 140ms ease, transform 140ms ease; }
.trail-view.is-view-leaving { opacity: 0; transform: translateY(5px); }
.trail-view.is-view-entering { opacity: 0; transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .trail-view.is-view-transitioning { transition: none; }
}

/* ---------- "ציר הזמן" — ציר קו אנכי ממש (לא כרטיסים/מלבנים): כוכב אחד
   לכל חודש, מחוברים בקו רציף, שם החודש קטן לצידו והמסר (אם נבחר) מתחתיו
   בקטן עוד יותר — נראה גם כ-title (טולטיפ טבעי בהובר לעכבר, בנוסף לטקסט
   הקבוע, לא במקומו — כי במובייל אין הובר בכלל). כוכבים מלאים = חודש עם
   מסר נבחר, כוכבים דהויים = עדיין לא. "עברנו" את החודש (לפי לוח שנה אמיתי,
   is-past) מקבל קטע קו בהיר יותר מ"עתידי", כדי שההתקדמות תיראה במבט אחד. */
.starline {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.15rem 1.1rem 0.75rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 55% at 20% 15%, rgba(234, 214, 233, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(212, 235, 219, 0.4) 0%, transparent 70%),
    var(--color-cream);
}
.star-station {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.1rem;
}
/* קטע הקו בין הכוכב של התחנה הזו לכוכב של הבאה — ממורכז בדיוק על .star-dot
   (1.9rem קוטר, אז המרכז ב-0.95rem), עובר "מאחורי" הכוכבים (z-index).
   מפוצל לשני חצאים (::before = מלמעלה עד המרכז, ::after = מהמרכז ולמטה)
   שכל אחד מהם באורך 50% מגובה התחנה *של עצמה* בלבד — כך שהחיבור בין שתי
   תחנות תמיד יוצא מדויק (חצי-תחתון של האחת + חצי-עליון של הבאה) גם כשגובה
   התחנות שונה בין תחנה לתחנה (מסרים ארוכים שנשברים לכמה שורות, ללא קיצוץ
   בטקסט — ראו .star-message למטה). בגישה הקודמת (קטע אחד ארוך 100% מהתחנה
   הנוכחית) ההנחה הייתה שכל התחנות באותו גובה בדיוק; ברגע שהטקסט משתנה
   באורך זה כבר לא נכון, והקו היה נשבר/חופף. */
.star-station::before,
.star-station::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  transform: translateX(1px);
  width: 2px;
  height: 50%;
  background: rgba(124, 92, 133, 0.22);
  z-index: 0;
}
.star-station::before { top: 0; }
.star-station::after { top: 50%; }
.star-station:first-child::before { display: none; }
.star-station:last-child::after { display: none; }

/* הצביעה הבהירה ("שביל שכבר עברנו") נשארת מקושרת לחצי היוצא (::after) של
   התחנה עצמה, ומועברת אל החצי הנכנס (::before) של התחנה הבאה דרך selector
   של אח-שכן (אין ב-CSS "בחירת אח קודם" ישירה) — כך שהצבע ממשיך ברצף. */
.star-station.is-past::after,
.star-station.is-current::after { background: rgba(124, 92, 133, 0.5); }
.star-station.is-past + .star-station::before,
.star-station.is-current + .star-station::before { background: rgba(124, 92, 133, 0.5); }

/* .star-content (דוט+תווית יחד) מתנדנד קלות שמאלה במחזור של 4 — לא ציר
   ישר ומלאכותי אלא שביל עדין ולא-סימטרי, בהשראת מסע בכוכבים. תמיד שמאלה
   (לא ימינה, physical translateX ולא margin לוגי — כדי שזה יזוז שמאלה גם
   בעמוד RTL) כדי לא להתקרב לשולי הריפוד מימין — בטוח גם במסכים צרים.
   בכוונה בלי transition כאן: זה ערך קבוע (נקבע פעם אחת בזמן הבנייה, לא
   משתנה בזמן ריצה) — בדיוק כמו transform:rotate() הקבוע על .journal-card,
   לא כמו is-view-transitioning הזמני שתוקן למעלה. */
.star-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.star-station:nth-child(4n+2) .star-content { transform: translateX(-0.55rem); }
.star-station:nth-child(4n+3) .star-content { transform: translateX(-1.05rem); }
.star-station:nth-child(4n) .star-content { transform: translateX(-0.4rem); }

.star-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border: 2px solid rgba(124, 92, 133, 0.35);
  color: rgba(124, 92, 133, 0.45);
  font-size: 1rem;
  line-height: 1;
  /* בכוונה בלי transform ב-transition (רק צבעים) — הרשימה נבנית מחדש בכל
     רינדור (לא משתנה "בחיים"), אז זה ממילא לא מנפיש שום דבר בפועל, ואין
     טעם לקחת את הסיכון של transition:transform קבוע על אלמנט שעטוף טקסט. */
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.star-station.is-collected .star-dot {
  background: var(--color-lilac);
  border-color: var(--color-lilac-deep);
  color: var(--color-lilac-deep);
}
.star-station.is-current .star-dot {
  border-color: var(--color-pink-deep);
  box-shadow: 0 0 0 4px rgba(162, 77, 109, 0.15);
  transform: scale(1.1);
}

/* המסר (אם נבחר) יושב ממש מתחת לשם החודש, לא לצידו — עמודה, לא שורה */
.star-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.45rem 0;
}
.star-month { font-weight: 700; font-size: 0.85rem; }
.star-message {
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  min-width: 0;
  max-width: 14rem;
  overflow-wrap: break-word;
}
/* אותו גודל פונט כמו .star-message (התבקש במפורש), אבל צבע+משקל שונים כדי
   שלא "יבלע" בתוך המסר שמעליו — עדיפה על תוספת "*" גנרית: כוכבית קטנה
   (✦) לפני הערך, מאותה שפה חזותית כמו כוכבי התחנות עצמם בציר הזמן הזה. */
.star-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-lilac-deep);
  min-width: 0;
  max-width: 14rem;
  overflow-wrap: break-word;
}
.star-value::before { content: "✦ "; }

/* =========================================================================
   אזור 5: הגלויות
   ========================================================================= */
/* במובייל: טור אחד — רואים גלויה אחת בכל פעם (כמו בקונספט ההשראה), בגודל
   נאה. מ-640px ומעלה עוברים ל-3 (ראו מדיה-קוארי בהמשך הקובץ). */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
/* .card-tile הוא זה שנוטה בתלת-ממד (לא .card-face-btn), ובלי overflow:hidden
   עליו — כדי שהתג הצף (translateZ) לא ייחתך. חיתוך הפינות המעוגלות של
   התמונה עצמה עבר ל-.card-face-btn. */
.card-tile {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--color-cream);
  transform-style: preserve-3d;
  /* backface-visibility:hidden כאן הוא מה שמונע מהתמונה להיראות מטושטשת
     תוך כדי ההטיה התלת-ממדית (בעיה קלאסית של דפדפנים ברינדור שכבות מוטות) */
  backface-visibility: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}
.card-tile.is-tilting { box-shadow: var(--shadow-card-hover); }

.card-face-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--color-cream);
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* יחס הממדים האמיתי של איורי הגלויות (301×443) — כדי לא לחתוך את האיור */
.card-face-btn img { width: 100%; aspect-ratio: 301 / 443; object-fit: contain; }

/* מובייל: הכרטיס הסגור מוקטן קצת ביחס לרוחב המסך המלא (היה נדבק לגמרי
   לרוחב), כדי שהגלויה הראשונה תיראה בשלמותה עם פחות גלילה. הרקע מסביב
   כבר קרם (כמו שאר האתר) כך שזה לא "נראה חסר" כשהכרטיס לא תופס הכל. */
@media (max-width: 639.98px) {
  .card-tile { max-width: 80%; margin-inline: auto; }
}

/* =========================================================================
   תצוגת גלויה מורחבת (יחידה) — מחליפה את כל הגריד כשגלויה פתוחה,
   כדי שלא יראו את שאר הגלויות מסביב
   ========================================================================= */
.card-expanded {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.85rem;
  margin: 0 auto 1.5rem;
  /* נשארת ברוחב "גלויה" מוגדר, גם על מסכים רחבים — כדי שלא תיהפך למלבן שטוח
     ורחב עם איור/טקסט קטנים במרכזו, אלא תישאר תמיד בפרופורציה של כרטיס לאורך.
     28rem (לא 25rem) — מספיק רוחב כדי שהתמונה תוכל למלא את רוב הגובה הפנוי
     בדסקטופ מבלי להיראות כמו פאנל רחב. */
  max-width: 28rem;
}

.card-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  cursor: pointer;
  padding: 0.3rem 0.2rem;
  margin-bottom: 0.3rem;
  min-height: 40px;
}
.card-back-link:hover { color: var(--color-ink); }

/* במה תלת-ממדית להיפוך אמיתי בין תצוגה מקדימה לבין הצד האחורי */
.flip-stage { perspective: 1400px; }
.flip-target {
  transition: transform var(--transition-med);
}
/* preserve-3d / backface-visibility רק כל עוד ההיפוך בפועל פעיל (קלאס
   שה-JS מוסיף/מסיר) — לא כמצב קבוע. אם משאירים אותן על האלמנט לצמיתות,
   הדפדפן ממשיך "לקבע" אותו בשכבת GPU נפרדת גם אחרי שההיפוך כבר נגמר,
   וזה בדיוק מה שגרם לטקסט של הצד האחורי להיראות מטושטש גם במנוחה. */
.flip-target.is-flip-animating {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.flip-target.flip-instant { transition: none; }
.flip-target.is-flipping-out { transform: rotateY(90deg); }
.flip-target.is-flipping-in-start { transform: rotateY(-90deg); }
.flip-target.is-flipping-in-end { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
  .flip-target { transition: none; }
}

/* ---------- תצוגת "תצוגה מקדימה" מוגדלת — לפני היפוך (דסקטופ/טאבלט בלבד;
   במובייל מדלגים על השלב הזה ועוברים ישר לצד האחורי) ---------- */
.card-focus {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-focus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
}
/* גובה ברירת מחדל (fallback בלבד, למקרה ש-JS לא ירוץ) — בפועל JS מחשב
   ומגדיר גובה מדויק לפי המקום הפנוי האמיתי עד לסרגל התחתון */
.card-focus-btn img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  aspect-ratio: 301 / 443;
  object-fit: contain;
}

/* אח (sibling) של .card-face-btn, לא ילד שלו — כדי שלא ייחתך ע"י ה-overflow:hidden
   שעל התמונה, ויוכל "לצוף" קדימה בציר Z כשהכרטיס נוטה. עובר קליקים דרכו
   (pointer-events:none) כדי שהכרטיס כולו יישאר לחיץ מתחתיו. */
.card-month-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255,255,255,0.92);
  color: var(--color-ink);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  pointer-events: none;
  transform: translateZ(32px);
}

.card-back {
  background: var(--color-cream);
}

.card-back-message {
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.15rem;
}

.accordion-section {
  border-top: 1px solid rgba(43,43,44,0.1);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}
.accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.4rem 0.1rem;
  text-align: right;
  min-height: 44px;
}
.accordion-toggle .chev { transition: transform var(--transition-fast); }
.accordion-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.values-list, .tasks-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

.value-row { border-radius: 0.75rem; background: rgba(255,255,255,0.55); }
.value-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
}
.value-row-head input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.value-expand-btn {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  min-height: 40px;
  padding: 0.2rem 0;
}

.tasks-list { padding: 0 0.7rem 0.6rem; }
.task-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.task-row input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex-shrink: 0; }
.task-row label { font-size: 0.9rem; }

.questions-list { margin: 0.5rem 0 0; padding: 0 1.2rem 0 0; display: grid; gap: 0.5rem; }
.questions-list li { font-size: 0.92rem; color: var(--color-ink-soft); }

/* ---------- מסך עצמאי "כל הערכים והמשימות" (#screen-values) + הקישור
   אליו מתוך "גלויות" — ראו renderValuesBrowse ב-js/app.js. קישורי טקסט
   עם אפיון-חזותי ברור (קו תחתון + ירוק-מנטה), אותו לקח כמו הקישורים
   האחרים באתר (כרטיס תמונת ההקדשה/תזכורת היומן) — btn-text בסיסי לבד
   לא מספיק כדי להיראות לחיץ. ---------- */
.values-browse-link, .values-back-link {
  display: inline-block;
  color: var(--color-mint-deep);
  font-weight: 700;
  text-decoration: underline;
  margin: 0.6rem 0 1rem;
}
.values-browse-link:hover, .values-browse-link:focus-visible,
.values-back-link:hover, .values-back-link:focus-visible { color: var(--color-pink-deep); }
.values-back-link { margin-top: 0; }
/* בתחתית מסך "גלויות" (אחרי הגריד) — ממורכז, כמו קישור-סיכום בתחתית עמוד. */
.values-browse-link { display: block; text-align: center; margin-top: 1.6rem; }

.values-browse-list { display: grid; gap: 0.7rem; margin-top: 0.5rem; }
/* כרטיס מעוגל לכל ערך, סגור כברירת מחדל. מורן העירה (23.8.2026) שגרסה
   קודמת (כרטיס לבן + פס צבעוני דק בצד) הייתה "יותר מדי לבנה" ביחס לשאר
   האתר — הכותרת הלחיצה עצמה בצבע פסטל מלא, עם תחושת "לשונית" (הכותרת
   נשארת צבעונית גם כשפתוח, הגוף הפתוח לבן לקריאות טובה של רשימת
   המשימות). ניסתה קודם ורוד/סגול ואז סגול/ירוק לסירוגין — הרגיש "צבעוני
   מדי", הוחלט על ירוק פסטל אחיד לכל הכרטיסים, לא מחזורי. */
.value-browse-card {
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.value-browse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-mint);
  border: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.85rem 1rem;
  text-align: right;
  min-height: 48px;
}
.value-browse-toggle .chev { transition: transform var(--transition-fast); }
.value-browse-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.value-browse-tasks { list-style: none; margin: 0; padding: 0 1rem 1rem; display: grid; gap: 0.6rem; }
.value-browse-tasks li {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  padding-inline-start: 0.9rem;
  position: relative;
}
.value-browse-tasks li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--color-mint-deep); }

/* ---------- מסך עצמאי "יצירת קשר" (#screen-contact), נגיש מקישור בבאנר
   העליון בכל מסך — ראו index.html. ---------- */
.contact-panel { text-align: center; max-width: 24rem; margin: 0 auto; }
/* תמונה אישית של מורן (24.8.2026, לפי בקשתה) — אותה מסגרת-עיגול כפולה
   (טבעת מנטה) כמו תמונת ההקדשה באלבום (.dedication-photo-preview) ו-
   .print-dedication-photo, לעקביות חזותית. יחידות rem (לא px) כדי שיראה
   טוב באותה מידה במחשב ובטלפון — מתי שנה לפי גודל-פונט הבסיס של המכשיר,
   לא גודל קבוע. */
.contact-photo { width: 7rem; height: 7rem; margin: 0 auto 1.1rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--color-mint-deep); box-shadow: 0 0 0 4px var(--color-mint); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-intro { color: var(--color-ink-soft); margin-bottom: 1.5rem; }
.contact-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.7rem; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-mint);
  color: var(--color-ink);
  font-weight: 700;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  min-height: 44px;
}
.contact-list li:nth-child(2) a { background: var(--color-pink); }
.contact-list li:nth-child(3) a { background: var(--color-lilac); }
.contact-list a:hover, .contact-list a:focus-visible { filter: brightness(0.96); }
.contact-signature { margin: 0 auto; }
.contact-title-row { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.contact-title-icon { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.btn-icon { width: 1.2rem; height: 1.2rem; object-fit: contain; flex-shrink: 0; }
/* קרדיט חובה למקור האייקונים (Flaticon) — קטן ועדין, לא מיועד לבלוט,
   ממוקם כאן (מסך "יצירת קשר") כי אין פוטר קבוע באתר ה-SPA. */
.page-credits {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px dashed rgba(43,43,44,0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.6rem;
}
.page-credits a {
  font-size: 0.62rem;
  color: var(--color-ink-soft);
  opacity: 0.6;
  text-decoration: underline;
}
/* אייקוני קו-אחד שחורים (טלפון/מעטפה/אינסטגרם) — אותו סגנון כמו איורי
   הגלויות/הלבבות באתר (קו רציף, בלי מילוי), לא אימוג'י. */
.contact-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-icon-dot { fill: var(--color-ink); stroke: none; }

.month-select-row { margin-top: 0; margin-bottom: 0; }

/* 2 שורות פנויות מספיקות (לא 3, כמו ברירת המחדל הכללית של textarea) —
   עדיין ניתנת להגדלה ידנית (resize:vertical נשאר מהכלל הכללי) אם צריך יותר. */
.free-text-field textarea { margin-top: 0.5rem; min-height: 4.6rem; }

/* --- העלאת תמונות --- */
.photo-upload p { margin-bottom: 0.3rem; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.photo-thumb { position: relative; border-radius: 0.6rem; overflow: hidden; aspect-ratio: 1; }
/* touch-action:none מונע מהדפדפן לגלול את הדף בזמן גרירת אצבע על התמונה
   (בלעדיו, מגע על תמונה קטנה בתוך עמוד שגולל היה "נחטף" ע"י הגלילה, לא
   ע"י הגרירה עצמה). cursor זז ל-grabbing רק בזמן גרירה בפועל (is-dragging,
   מתווסף/מוסר ב-JS), לא קבוע — כדי לא לרמוז "אפשר לגרור" כשלא באמת גוררים. */
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: grab; touch-action: none; }
.photo-thumb img.is-dragging { cursor: grabbing; }
/* גרירה לא-עקבית (עובד לפעמים, לפעמים לא) הייתה בגלל גרירת-תמונה טבעית
   של הדפדפן (drag-and-drop מובנה על <img>, "לגרור את התמונה החוצה") שהתנגשה
   עם הגרירה שלנו — לפעמים הדפדפן "חטף" את המחווה במקומנו. draggable="false"
   ב-HTML מכבה את זה ברוב הדפדפנים; שתי התכונות האלה מכסות מקרי קצה
   (Safari/WebKit ל-user-drag, ומניעת סימון-טקסט תוך כדי גרירה). חל על
   [data-role="photo-drag"] גם ב-.photo-thumb וגם ב-.journal-photos. */
[data-role="photo-drag"] {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.photo-remove-btn {
  position: absolute;
  top: 0.2rem; left: 0.2rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(43,43,44,0.75);
  color: var(--color-white);
  font-size: 0.8rem;
  cursor: pointer;
}
.photo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-white);
  border: 1.5px dashed rgba(43,43,44,0.3);
  border-radius: 0.7rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  min-height: 44px;
}
/* ה-input עצמו מוסתר (visually-hidden), אז מסגרת הפוקוס מוצגת על התווית שעוטפת אותו */
.photo-upload-btn:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* =========================================================================
   "תמונות ורגעים" — תצוגה פנימית בטאב המאוחד "הרגעים שלנו" (toggle מול
   "ציר הזמן"), בסגנון סקראפבוקינג, כולל הפקת האלבום בתחתית. שם המחלקות
   (.journal-*) נשאר כמו שהיה — זה היה המסך הנפרד "יומן הרגעים" קודם.
   ========================================================================= */
.journal-grid { display: grid; gap: 1.75rem; padding-top: 0.25rem; }
.journal-empty { color: var(--color-ink-soft); text-align: center; padding: 2rem 1rem; }

.journal-card {
  position: relative;
  background: var(--color-white);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.1rem 0.9rem;
  transition: transform var(--transition-fast);
}
.journal-card:nth-child(3n+1) { transform: rotate(-0.7deg); }
.journal-card:nth-child(3n+2) { transform: rotate(0.6deg); }
.journal-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.journal-card:hover, .journal-card:focus-within { transform: rotate(0deg); }
/* "פס נייר דבק" דקורטיבי בראש כל כרטיס — תחושת סקראפבוקינג */
.journal-card::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  right: 1.4rem;
  width: 3.2rem;
  height: 1.15rem;
  background: var(--color-pink);
  opacity: 0.9;
  transform: rotate(-4deg);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}
.journal-card:nth-child(3n+2)::before { background: var(--color-mint); right: auto; left: 1.4rem; transform: rotate(3deg); }
.journal-card:nth-child(3n+3)::before { background: var(--color-lilac); transform: rotate(2deg); }
@media (prefers-reduced-motion: reduce) {
  .journal-card, .journal-card:hover, .journal-card:focus-within { transform: none; }
}

.journal-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.journal-month { font-weight: 800; font-size: 1.05rem; }
.journal-value {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-mint);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

/* תצוגת תמונות גדולה, כקולאז' כשיש יותר מתמונה אחת — סגנון פולארויד.
   .journal-photo-item עוטפת כל תמונה (25.8.2026, כדי לתת מקום-עיגון
   לכפתור המחיקה "✕" בפינה — position:relative על הפריט עצמו, לא רק על
   ה-img — בלי לשבור את מיקום/סיבוב/aspect-ratio שממוקמים לפי nth-child). */
.journal-photos { display: grid; gap: 0.5rem; margin-bottom: 0.6rem; }
.journal-photo-item {
  position: relative;
  background: var(--color-white);
  padding: 0.3rem 0.3rem 0.85rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
  border-radius: 0.3rem;
}
.journal-photo-item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: grab;
  touch-action: none;
}
.journal-photo-item img.is-dragging { cursor: grabbing; }
.journal-photo-item:nth-child(odd) { transform: rotate(-1.3deg); }
.journal-photo-item:nth-child(even) { transform: rotate(1.3deg); }
@media (prefers-reduced-motion: reduce) {
  .journal-photo-item { transform: none; }
}
.journal-photos[data-count="1"] { grid-template-columns: 1fr; }
.journal-photos[data-count="1"] .journal-photo-item { aspect-ratio: 4 / 3; }
.journal-photos[data-count="2"] { grid-template-columns: 1fr 1fr; }
.journal-photos[data-count="2"] .journal-photo-item { aspect-ratio: 1; }
.journal-photos[data-count="3"] { grid-template-columns: 1fr 1fr; }
.journal-photos[data-count="3"] .journal-photo-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.journal-photos[data-count="3"] .journal-photo-item:not(:first-child) { aspect-ratio: 1; }
.journal-photos[data-count="4"] { grid-template-columns: 1fr 1fr; }
.journal-photos[data-count="4"] .journal-photo-item { aspect-ratio: 1; }

/* תא "+" להוספת תמונה ישירות מתוך הקולאז' — תמיד אחרון (אף פעם לא
   first-child), אז מספיק להתאים אותו לגדלים של img:not(:first-child)/img
   הרגילים בכל אחד ממצבי data-count, בלי לגעת בכלל המיוחד של 16:9. באותה
   "משפחת פולארויד" בדיוק כמו התמונות (מסגרת לבנה, צל, סיבוב עדין) כדי
   שישתלב ולא יבלוט כרכיב זר — רק עם מסגרת מקווקוות ו-"+" במקום תמונה. */
.journal-photo-add {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  padding: 0.3rem 0.3rem 0.85rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
  border-radius: 0.3rem;
  cursor: pointer;
}
.journal-photo-add::before {
  content: "";
  position: absolute;
  inset: 0.3rem 0.3rem 0.85rem;
  border: 1.5px dashed rgba(43, 43, 44, 0.25);
  border-radius: 0.2rem;
}
.journal-photo-add span {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-ink-soft);
  transition: color var(--transition-fast);
}
.journal-photo-add:hover span,
.journal-photo-add:focus-within span { color: var(--color-mint-deep); }
.journal-photo-add:nth-child(odd) { transform: rotate(-1.3deg); }
.journal-photo-add:nth-child(even) { transform: rotate(1.3deg); }
@media (prefers-reduced-motion: reduce) {
  .journal-photo-add { transform: none; }
}
.journal-photos[data-count="1"] .journal-photo-add { aspect-ratio: 4 / 3; }
.journal-photos[data-count="2"] .journal-photo-add,
.journal-photos[data-count="3"] .journal-photo-add,
.journal-photos[data-count="4"] .journal-photo-add { aspect-ratio: 1; }

/* עכשיו textarea (ניתנת לעריכה), אבל נראית כמו הטקסט הרגיל שהייתה קודם —
   בלי מסגרת/רקע/padding של שדה טופס — כדי שהעריכה תתגלה בלחיצה, לא תיראה
   כמו טופס. resize:none + autoGrowJournalTaskNote (ב-app.js) שולטים בגובה. */
.journal-tasks {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.45;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  min-height: 0;
  resize: none;
  overflow: hidden;
}
.journal-tasks:hover { background: rgba(43,43,44,0.05); }

/* ---------- הפקת אלבום (בתחתית היומן) ---------- */
.journal-album-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem;
  margin-top: 2rem;
}
.progress-ring-wrap { position: relative; width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.progress-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring-track { fill: none; stroke: var(--color-cream); stroke-width: 4; }
.progress-ring-fill {
  fill: none;
  stroke: var(--color-pink-deep);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-med);
}
@media (prefers-reduced-motion: reduce) {
  .progress-ring-fill { transition: none; }
}
.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}
.journal-album-cta-text { flex: 1; min-width: 0; }

@media (max-width: 26rem) {
  .journal-album-cta { flex-direction: column; align-items: flex-start; }
}

/* תמונה אישית לעמוד הפתיחה של האלבום המודפס — תצוגה מקדימה עגולה (אותו
   סגנון בדיוק כמו העיגול בהדפסה, ראו .print-dedication-photo) + גרירה
   למיקום (wireDedicationPhotoDrag) + הסרה. */
/* מורן (24.8.2026): העיגול קטן מדי ולא ממורכז — עבר מעמודה-לצד-טקסט
   לעמודה ממורכזת (עיגול גדול יותר מעל הקישור), במקום שורה שהעיגול היה
   בה רק אלמנט צדדי קטן. */
.dedication-photo-upload { margin-top: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dedication-photo-preview { position: relative; width: 5.5rem; height: 5.5rem; flex-shrink: 0; }
.dedication-photo-preview img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--color-mint-deep); box-shadow: 0 0 0 3px var(--color-mint);
  cursor: grab; touch-action: none;
}
.dedication-photo-preview img.is-dragging { cursor: grabbing; }
.dedication-photo-remove {
  position: absolute; top: -0.25rem; inset-inline-end: -0.25rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; border: none;
  background: var(--color-white); color: var(--color-ink-soft);
  font-size: 0.7rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-card);
}
.dedication-photo-remove:hover, .dedication-photo-remove:focus-visible { color: var(--color-pink-deep); }
/* .btn-text הבסיסי (ראו יציאה/logout) לא נותן שום רמז חזותי שזה לחיץ —
   מורן העירה 23.8.2026 שלא היה ברור שצריך ללחוץ. פה זו הפעולה העיקרית
   בפינה הזו (לא פעולה משנית כמו logout), אז צריכה להיראות כמו קישור אמיתי. */
.dedication-photo-label {
  cursor: pointer;
  color: var(--color-mint-deep);
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.92rem;
  line-height: 1.4;
}
.dedication-photo-label:hover, .dedication-photo-label:focus-visible { color: var(--color-pink-deep); }

/* =========================================================================
   הדפסה — אלבום סוף שנה
   ========================================================================= */
.print-only { display: none; }

/* =========================================================================
   אלבום ההדפסה — עוצב מחדש 16.8.2026 לפי סיכום עם מורן (ראו
   digital-space-build.md): פורמט מלבני A6 ביחס הגלויות (301:443), לא
   הריבוע הקודם (200×200mm). "פתיחה" של 2 עמודים לכל חודש (ימין=גלויה+מסר,
   שמאל=קולאז' סקראפבוקינג), עם כריכה + עמוד פתיחה + שער אחורי מסביב. תוכן
   ה-HTML נבנה ב-buildPrintAlbum() (js/app.js), הטקסטים הקבועים ב-TEXT_ALBUM
   (js/data.js). margin:0 ב-@page כדי לאפשר תמונות עד לקצה — אם נראה שוליים
   לבנים בהדפסה בפועל, זו הגדרת "שוליים" של דפדפן הדפוס עצמו (יש לבחור
   "ללא"/None בדיאלוג ההדפסה), לא CSS.
   ========================================================================= */
@media print {
  /* #app (העטיפה של header+main+nav) חייבת display:none מלא, לא רק
     ההרכיבים שבתוכה — יש לה min-height:100vh + display:flex (ראו .app),
     ו-.app-main יש לו flex:1, אז גם עם כל הילדים הפנימיים מוסתרים היא
     עדיין "נדלקת" למלוא גובה מסך אחד ריק (עמוד 1 ריק שמורן דיווחה עליו,
     16.8.2026) — הסתרת #app עצמו פותרת את זה בשורש, לא רק מטפלת בתסמינים. */
  #screen-entry, #app { display: none !important; }
  .print-only {
    display: block !important;
    background: var(--color-cream);
  }
  @page { size: 100mm 147mm; margin: 0; }
  /* מכריח דפדפנים להדפיס צבעי/גרדיאנטי רקע בפועל, גם אם "Background
     graphics" לא מסומן בדיאלוג ההדפסה של המשתמשת — בלי זה כל הרקעים
     (קרם, גרדיאנטים פסטליים, תוויות הערך הצבעוניות) יוצאים לבנים. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: var(--color-cream); }
  .print-page {
    page-break-after: always;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 147mm;
    overflow: hidden;
    position: relative;
    background: var(--color-cream);
  }

  /* ---------- כריכה ---------- */
  /* רקע שמנת אחיד (כמו .print-closing למטה) — לא הגרדיאנט הפסטלי שהיה,
     לניקיון אם מדפיסים את האלבום כספר פיזי (בקשת מורן 25.8.2026, חלה על
     כל עמודי האלבום). */
  .print-cover {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10mm 8mm;
    background: var(--color-cream);
  }
  .print-cover-daughter { font-size: 1.9rem; font-weight: 800; color: var(--color-pink-deep); margin: 0 0 0.35rem; }
  .print-cover-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.6rem; }
  .print-cover-sub { font-size: 0.85rem; color: var(--color-ink-soft); margin: 0 0 1rem; }
  .print-cover-hearts { width: 3.6rem; margin-top: 1rem; }

  /* ---------- עמוד פתיחה (עמוד 1 האמיתי, לפני החודש הראשון) ---------- */
  .print-dedication {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12mm 10mm;
  }
  .print-dedication-text { font-size: 1rem; line-height: 1.8; margin: 0; }
  /* עיגול-מזכרת קטן מתחת למשפט, עם התמונה האישית שהאמא העלתה (לא חובה —
     ראו dedicationPhoto ב-buildPrintAlbum, מוצג רק אם קיים). טבעת כפולה
     (מסגרת מלאה + הילה עדינה) נותנת תחושת "תג/קמע", לא ריבוע יבש. */
  .print-dedication-photo {
    width: 38mm;
    height: 38mm;
    margin-top: 1.4rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-white);
    border: 3px solid var(--color-mint-deep);
    box-shadow: 0 0 0 4px var(--color-mint);
  }
  .print-dedication-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- עמוד ימין של כל חודש: הגלויה + המסר שעליה ---------- */
  .print-postcard-img-wrap { flex: 1; overflow: hidden; }
  .print-postcard-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .print-page-tag {
    position: absolute;
    top: 4mm;
    inset-inline-start: 4mm;
    background: var(--color-white);
    color: var(--color-ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    z-index: 1;
  }
  .print-postcard-caption {
    padding: 3mm 6mm 4mm;
    text-align: center;
    background: var(--color-cream);
    border-top: 1px solid rgba(43, 43, 44, 0.08);
  }
  .print-postcard-caption p { margin: 0; font-size: 0.85rem; font-style: italic; line-height: 1.55; }

  /* ---------- עמוד שמאל של כל חודש: קולאז' סקראפבוקינג —
     כרטיס לבן מוטה בתוך העמוד (לא העמוד עצמו שטוח), בדיוק כמו .journal-card
     בעמוד "הרגעים שלנו": פס נייר דבק דקורטיבי + סיבוב עדין + גוון מתחלף
     (ורוד/מנטה/לילך) לפי סבב 3, כדי שלא כל העמודים ייראו זהים. ---------- */
  .print-collage { justify-content: center; padding: 6mm; }
  .print-collage-card {
    position: relative;
    background: var(--color-white);
    border-radius: 0.9rem;
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.1rem 0.9rem;
  }
  .print-collage-v0 { transform: rotate(-0.7deg); }
  .print-collage-v1 { transform: rotate(0.6deg); }
  .print-collage-v2 { transform: rotate(-0.3deg); }
  .print-collage-tape {
    position: absolute;
    top: -0.55rem;
    right: 1.4rem;
    width: 3.2rem;
    height: 1.15rem;
    opacity: 0.9;
    transform: rotate(-4deg);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
  }
  .print-collage-v0 .print-collage-tape { background: var(--color-pink); }
  .print-collage-v1 .print-collage-tape { background: var(--color-mint); right: auto; left: 1.4rem; transform: rotate(3deg); }
  .print-collage-v2 .print-collage-tape { background: var(--color-lilac); transform: rotate(2deg); }
  .print-collage-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
  .print-collage-month { font-weight: 800; font-size: 1.05rem; }
  .print-collage-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ink);
    background: var(--color-mint);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
  }
  .print-collage-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.7rem; }
  .print-collage-photos img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--color-white);
    padding: 0.25rem 0.25rem 0.7rem;
    box-sizing: border-box;
    box-shadow: var(--shadow-card);
    border-radius: 0.3rem;
  }
  .print-collage-photos img:nth-child(odd) { transform: rotate(-1.3deg); }
  .print-collage-photos img:nth-child(even) { transform: rotate(1.3deg); }
  .print-collage-photos[data-count="1"] { grid-template-columns: 1fr; }
  .print-collage-photos[data-count="1"] img { aspect-ratio: 4 / 3; }
  .print-collage-photos[data-count="3"] img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .print-collage-task { font-size: 0.8rem; color: var(--color-ink); margin: 0; line-height: 1.5; }

  /* ---------- שער אחורי (העמוד האחרון) ---------- */
  /* רקע שמנת אחיד — ראו הערה זהה ב-.print-cover למעלה. */
  .print-closing {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10mm 8mm;
    background: var(--color-cream);
  }
  .print-closing-text { font-size: 1rem; line-height: 1.8; margin: 0 0 1.2rem; }
  .print-closing-sign { font-size: 0.9rem; color: var(--color-ink-soft); font-style: italic; }
  .print-colophon {
    position: absolute;
    bottom: 6mm;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  /* לוגו שקוף (בלי ריבוע רקע קרם) — כבר כולל את "12 רגעים" כחלק מהאיור,
     ולכן אין צורך לחזור על זה בטקסט (colophonLine1 ב-TEXT_ALBUM). */
  .print-colophon-logo { width: 2.6rem; }
  .print-colophon-text { text-align: start; }
  .print-colophon-line1 { font-size: 0.66rem; font-weight: 600; color: var(--color-ink-soft); }
  .print-colophon-line2 { font-size: 0.6rem; color: var(--color-ink-soft); opacity: 0.75; margin-top: 0.1rem; }
}

/* =========================================================================
   מסכים גדולים יותר — טאבלט/דסקטופ
   ========================================================================= */
@media (min-width: 640px) {
  .app-main { padding-inline: 1.5rem; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  /* דסקטופ/טאבלט: כש-app-main מקבל את הקלאס cards-wide (מוסיף/מסיר ב-JS
     לפי המסך הפעיל, ב-routeToScreen), מגבלת ה-40rem הרגילה שלו (לשאר
     המסכים, כדי שטקסט יישאר קריא) גדלה — כדי שהרשת הסגורה (3 בטור)
     תהיה משמעותית גדולה יותר. שימוש ב-max-width רגיל עם margin:auto,
     לא vw, כדי שהמרכוז יהיה מדויק גם כשיש פס גלילה אנכי (100vw לא לוקח
     בחשבון את פס הגלילה ולכן גרם למרכוז לא מדויק). .card-expanded לא
     מושפע — יש לו max-width נפרד משלו, אז הגלויה הפתוחה נשארת באותו גודל. */
  .app-main.cards-wide { max-width: 50rem; }
  /* ציר הזמן הוא עמודה אנכית אחת גם בדסקטופ (זה הרעיון — קו, לא רשת) —
     רק ממורכז וברוחב מוגבל, כדי שלא יימתח לרוחב מלא עם הרבה שטח ריק. */
  .starline { max-width: 26rem; margin-inline: auto; }
  .journal-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-btn { font-size: 0.75rem; }
}

@media (min-width: 960px) {
  /* היומן נשאר על 2 בשורה לכל היותר גם במסכים רחבים — כרטיסים גדולים,
     תמונות גדולות, תחושת סקראפבוקינג ולא רשימה דחוסה */
  .bottom-nav { max-width: 40rem; margin: 0 auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* =========================================================================
   ניסוי (23.8.2026): ניווט למעלה — רק בדסקטופ/טאבלט (≥640px). מובייל נשאר
   עם הסרגל התחתון הקבוע בלי שום שינוי. הבלוק הזה בכוונה בסוף הקובץ ומבודד
   (לא נוגע בכללי .bottom-nav הקודמים), כדי שיהיה קל לבטל אם מורן תחליט
   שהיא לא אוהבת את זה אחרי שתראה בפועל — או /revert ה-commit, או פשוט
   למחוק את הבלוק הזה. המיקום ב-DOM (לא רק חזותי) מוזז ב-JS
   (placeNavForViewport, js/app.js) כדי שסדר-הטאב יישאר נכון.
   ========================================================================= */
@media (min-width: 640px) {
  .bottom-nav {
    position: static;
    justify-content: center;
    gap: 0.6rem;
    border-top: none;
    border-bottom: 1px solid rgba(43,43,44,0.08);
    border-radius: 0;
    max-width: none;
    margin: 0;
  }
  .app-main { padding-bottom: 2rem; } /* לא צריך יותר לשמור מקום לסרגל קבוע-תחתון */
  .nav-btn { flex: 0 0 auto; min-width: 6.5rem; }
}

/* ---------- ניווט-מהיר עגול, למטה — רק דסקטופ/טאבלט (יחד עם ניסוי הניווט
   למעלה למעלה). מוסתר במובייל: שם הסרגל המלא כבר למטה, אין צורך בכפל.
   בכוונה בלי טקסט/"שלב X מתוך Y" — זה לא ויזארד מדורג, כל 5 האזורים
   פתוחים תמיד; שני חצים הם רק קיצור-דרך פיזי, לא רמז לסדר מחייב. ---------- */
.quick-nav { display: none; }
@media (min-width: 640px) {
  .quick-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 0.6rem 0.35rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-cream);
    border-top: 1px solid rgba(43,43,44,0.08);
  }
  .quick-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-pink);
    color: var(--color-ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick-nav-btn:hover { filter: brightness(0.97); }
}

/* ---------- ניגודיות גבוהה / הדפסה בשחור-לבן ---------- */
@media (prefers-contrast: more) {
  :root { --color-ink-soft: #2b2b2c; }
  .btn-primary { outline: 2px solid var(--color-ink); }
}