/* ============================================================================
   holo8.css — מסך 7, פאזת "הקריסטל מקשיב" (מאושר ע"י נסיה, 23.07)

   שלוש השאלות והכתיבה חיות על משטח אחד. הכרטיס נפתח *במקום* — אין בועת
   זכוכית שנפתחת מעל המסך — השתיים האחרות מתעמעמות, והקריסטל שנבחר מתמלא
   באור עם כל תשובה שהוא קולט. שפת הכרטיסים זהה לזו של מסכים 8 ו-9
   (שמנת · מסגרת זהב דקה · צל ורוד) כדי שהמסע יישמע כמו יצירה אחת.

   Three questions plus the free-text box share one surface; cards expand in
   place and the chosen crystal charges as it absorbs each answer.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════
   כלל גלובלי (נסיה 23.07): **שום CTA לא נצמד לשוליים התחתונות של המסך.**
   ⚠️ הריווח התחתון של הערימה היה `calc(var(--air) * 1.4)` — כלומר מבוסס
   אוויר. וזו בדיוק הבעיה: כשמנוע ההתאמה מכווץ את --air במסך צפוף, הריווח
   מתאדה (נמדד: 2px במסך 1) — ודווקא שם הכפתור הכי צריך אוויר. רצפה
   בפיקסלים חסינה לכיווץ. מסכים שמגדירים ריווח גדול יותר בעצמם — לא נגענו,
   הסלקטור הזה חלש מהם בכוונה.
   The gutter was --air-based, so it evaporated exactly on the crowded
   screens where the button most needs breathing room. A px floor can't be
   squeezed; screens defining a larger gutter keep theirs. */
.stack { padding-bottom: max(34px, calc(var(--air) * 1.4)); }

/* גובה הוא המשאב היקר כאן: מסך אחד, בלי גלילה, עם שלושה כרטיסים,
   קריסטל, תיבת כתיבה וכפתור. כל הריווחים מתוחים בהתאם.
   ⚠️ שמורת-גובה בראש: מתג המוזיקה של הכרום יושב שם, והשורה הראשונה
   רצה מתחתיו. נמדד בצילום — הטקסט נגע במתג.
   Measured in a screenshot: the lead ran under the music toggle. */
/* המספרים נמדדו, לא נוחשו: תחתית מתג המוזיקה ≈ 88px, ראש הערימה ≈ 69px —
   ולכן 22px שמורה מספיקים. הריווח התחתון של המסע (9vh) מתכווץ כאן, כי
   הפאזה הזו היא היחידה שממלאת את המסך מקצה לקצה.
   Measured, not guessed — and the journey-wide bottom gutter shrinks here. */
.s07 .s07-stack.is-listen {
  justify-content: flex-start;
  padding-top: clamp(38px, 5vh, 46px);
  padding-bottom: clamp(16px, 3.4vh, 32px);
}

.s07 .s07-listen-lead {
  max-width: 30ch; margin-inline: auto;
  font-size: calc(var(--fs-body) * .96);
  line-height: 1.45;
  color: var(--pearl); text-shadow: var(--halo-soft);
}

/* ═══════════ הקריסטל המקשיב ═══════════
   לא קישוט בפינה — הוא הדמות שאליה מדברים. --charge עולה מ-0 ל-1. */
.s07 .s07-crystal {
  position: relative;
  width: min(26%, calc(var(--u) * 26));
  aspect-ratio: 1;
  margin: calc(var(--air) * -.4) auto calc(var(--air) * .6);
  display: grid; place-items: center;
}
.s07 .s07-crystal img {
  position: relative; z-index: 2;
  width: 78%; height: 78%; object-fit: contain;
  filter: drop-shadow(0 0 calc(5px + var(--charge, 0) * 20px) var(--c-glow))
          saturate(calc(.78 + var(--charge, 0) * .44))
          brightness(calc(.94 + var(--charge, 0) * .2));
  transition: filter 900ms var(--ease-hero);
  animation: s07Breathe 4.6s ease-in-out infinite;
}
@keyframes s07Breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.s07 .s07-halo {
  position: absolute; inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-glow), transparent 64%);
  opacity: calc(.22 + var(--charge, 0) * .78);
  transition: opacity 900ms ease;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* ההבזק ברגע שהתשובה נקלטת */
.s07 .s07-crystal.absorb .s07-halo { animation: s07Absorb 760ms var(--ease-hero); }
@keyframes s07Absorb {
  0%   { transform: scale(1);   opacity: .28; }
  38%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1);   opacity: calc(.22 + var(--charge, 0) * .78); }
}
.s07 .s07-crystal.full img { animation-duration: 3s; }

/* שלוש נקודות — התקדמות בלי מספרים */
.s07 .s07-pips {
  position: absolute; bottom: -9%; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 3;
}
.s07 .s07-pips i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(253, 251, 247, .3);
  border: 1px solid rgba(253, 251, 247, .62);
  transition: background 420ms ease, box-shadow 420ms ease,
              transform 420ms var(--ease-spring);
}
.s07 .s07-pips i.lit {
  background: var(--c-primary);
  border-color: rgba(255, 236, 244, .95);
  box-shadow: 0 0 9px var(--c-glow), 0 0 20px var(--c-glow);
  transform: scale(1.3);
}

/* ═══════════ שלושת כרטיסי השאלות ═══════════ */
.s07 .s07-qcards {
  display: grid; gap: calc(var(--air) * 1.1);
  width: 100%; max-width: calc(var(--u) * 96);
  margin-inline: auto;
}
.s07 .s07-qcard {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(168deg, #FFFDF8, #FBF3E8);
  border: 1px solid rgba(190, 152, 84, .5);
  box-shadow: 0 6px 16px rgba(202, 132, 160, .2), inset 0 1px 0 #fff;
  overflow: hidden;
  transition: opacity 380ms ease, transform 380ms var(--ease-out),
              box-shadow 380ms ease, border-color 380ms ease;
}
/* השתיים שאינן פתוחות נסוגות — העין תמיד על השאלה הפעילה */
.s07 .s07-qcard.faded { opacity: .58; transform: scale(.985); }
.s07 .s07-qcard.open {
  border-color: rgba(190, 152, 84, .95);
  box-shadow: 0 12px 26px var(--c-glow), 0 4px 12px rgba(202, 132, 160, .24),
              inset 0 1px 0 #fff;
}

.s07 .s07-qhead {
  width: 100%;
  display: flex; align-items: center; gap: calc(var(--air) * 1.3);
  /* ⚠️ רצפה קשיחה לריווח האופקי: מנוע ההתאמה מכווץ את --air עד 40%, ואז
     סימן ה-✓ (שגם גדל ב-scale ונושא הילה) נושק לשפת הכרטיס. נראה בצילום.
     The fit engine squeezes --air to 40%, which pushed the tick into the edge. */
  padding: calc(var(--air) * 1.4) max(13px, calc(var(--air) * 1.7));
  border: 0; background: none; font: inherit;
  cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.s07 .s07-qhead:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: -3px; }
.s07 .s07-qcol { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.s07 .s07-qtxt {
  font-size: calc(var(--fs-body) * .95);
  line-height: 1.36;
  color: var(--lw-ink-strong);
  text-wrap: balance;
  transition: font-size 340ms var(--ease-hero), color 340ms ease;
}
/* אחרי שנענתה וסגורה: השאלה מתכווצת לתווית, והתשובה עולה לחזית —
   כדי שברור מה נבחר, ושהעריכה תהיה מתוך ידיעה.
   Once answered and collapsed, the answer leads and the question labels it. */
.s07 .s07-qcard.answered:not(.open) .s07-qtxt {
  font-size: calc(var(--fs-micro) * .84);
  color: #8A6B77;
}
.s07 .s07-qpick {
  display: none;
  font-size: calc(var(--fs-body) * .88);
  line-height: 1.35;
  color: #A2622F;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s07 .s07-qcard.answered:not(.open) .s07-qpick { display: block; }

/* הסימון: טבעת ריקה → ✓ ורוד */
.s07 .s07-tick {
  flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.4px solid rgba(190, 152, 84, .65);
  background: radial-gradient(circle at 36% 30%, #FFFFFF, #FBF1E4);
  display: grid; place-items: center;
  transition: background 380ms ease, border-color 380ms ease,
              transform 380ms var(--ease-spring);
}
.s07 .s07-qcard.answered .s07-tick {
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: scale(1.08);
  box-shadow: 0 0 10px var(--c-glow);
}
.s07 .s07-qcard.answered .s07-tick::after {
  content: '✓'; color: #FFFDF9; font-size: 12px; line-height: 1;
}

/* גוף הכרטיס — grid-rows 0fr→1fr, בלי קפיצות גובה */
.s07 .s07-qbody {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 440ms var(--ease-hero);
}
.s07 .s07-qcard.open .s07-qbody { grid-template-rows: 1fr; }
/* ⚠️ ארבע התשובות ישבו על אותה שמנת של השאלה, ונקראו כחמש שורות זהות.
   מגש ורוד-פסטל מרמז שהן *בתוך* הכרטיס — זה מה שהופך את הפתיחה לפתיחה
   "במקום". בגובה 0 המגש אינו מצויר, ולכן אין קו-שובר בכרטיס סגור.
   The answers now sit on a tinted tray, so opening reads as opening. */
.s07 .s07-qbody-in {
  overflow: hidden;
  display: grid; gap: calc(var(--air) * .7);
  padding-inline: max(13px, calc(var(--air) * 1.7));
  background: linear-gradient(180deg, rgba(247, 233, 239, .72), rgba(251, 243, 232, .3));
}
.s07 .s07-qcard.open .s07-qbody-in {
  padding-top: calc(var(--air) * 1.2);
  padding-bottom: calc(var(--air) * 1.6);
}
/* השאלה הפתוחה מובילה; הסגורה מתכווצת לתווית (ראה .answered למטה) */
.s07 .s07-qcard.open .s07-qtxt { font-size: calc(var(--fs-body) * 1.02); }

.s07 .s07-opt {
  width: 100%; min-height: 44px;
  padding: calc(var(--air) * 1.05) calc(var(--air) * 1.4);
  border: 1px solid rgba(190, 152, 84, .42);
  border-radius: 12px;
  background: rgba(255, 254, 250, .92);
  color: var(--lw-ink);
  font: inherit;
  font-size: calc(var(--fs-body) * .88);
  line-height: 1.4;
  text-align: start; text-wrap: balance;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 240ms ease, border-color 240ms ease,
              transform 240ms var(--ease-out), box-shadow 240ms ease;
}
.s07 .s07-opt:hover  { transform: translateY(-1px); border-color: rgba(190, 152, 84, .8); }
.s07 .s07-opt:active { transform: scale(.985); }
.s07 .s07-opt:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: 2px; }
.s07 .s07-opt.chosen {
  background: linear-gradient(170deg, #FFF6FA, #FDE7F0);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-glow);
  color: var(--lw-ink-strong);
}

/* ═══════════ תיבת הכתיבה — נדלקת רק אחרי שלוש התשובות ═══════════ */
.s07 .s07-write {
  display: grid; gap: calc(var(--air) * .4);
  width: 100%; max-width: calc(var(--u) * 96);
  margin-inline: auto;
  padding: calc(var(--air) * 1.4) calc(var(--air) * 1.7) calc(var(--air) * 1.5);
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(255, 253, 248, .42), rgba(251, 243, 232, .36));
  border: 1px dashed rgba(190, 152, 84, .45);
  opacity: .5; filter: saturate(.55);
  transition: opacity 700ms ease, filter 700ms ease, border-color 700ms ease,
              box-shadow 700ms ease, background 700ms ease;
}
.s07 .s07-write.on {
  opacity: 1; filter: none;
  border-style: solid;
  border-color: rgba(190, 152, 84, .9);
  background: linear-gradient(168deg, #FFFDF8, #FBF3E8);
  box-shadow: 0 8px 22px var(--c-glow), inset 0 1px 0 #fff;
}
/* פעימת "עכשיו תורך" ברגע שהשאלה השלישית נענתה — במקום לחטוף פוקוס
   ולפתוח מקלדת לבד על מסך בלי גלילה. */
.s07 .s07-write.wake { animation: s07Wake 1400ms var(--ease-hero); }
@keyframes s07Wake {
  0%, 100% { box-shadow: 0 8px 22px var(--c-glow), inset 0 1px 0 #fff; }
  45%      { box-shadow: 0 8px 30px var(--c-primary), 0 0 0 3px var(--c-glow),
                         inset 0 1px 0 #fff; }
}
.s07 .s07-write-t {
  font-weight: 400;
  font-size: calc(var(--fs-body) * .96);
  color: #A2622F;
}
.s07 .s07-write-lead {
  font-size: calc(var(--fs-micro) * .96);
  line-height: 1.4;
  color: var(--lw-ink);
}
/* ⚠️ .fairy-area נושא את עיצוב-הזכוכית של שדות המסע (רקע כהה, טקסט פנינה).
   כאן הוא יושב בתוך כרטיס שמנת, ולכן חייב להתהפך לגמרי.
   The shared glass field style must be inverted inside a cream card. */
.s07 .s07-area2 {
  width: 100%;
  margin-top: calc(var(--air) * .5);
  padding: calc(var(--air) * 1.05);
  border: 1px solid rgba(190, 152, 84, .5) !important;
  border-radius: 12px;
  background: #FFFDF8 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--lw-ink-strong) !important;
  text-shadow: none !important;
  font-size: calc(var(--fs-body) * .9);
  line-height: 1.45;
  resize: none;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.s07 .s07-area2::placeholder { color: #B49AA4; }
.s07 .s07-area2:focus {
  outline: 0;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-glow) !important;
}
.s07 .s07-area2:disabled { background: rgba(255, 253, 248, .5) !important; cursor: not-allowed; }
/* מד התווים — הכרעת נסיה: מינימום 20 */
.s07 .s07-count {
  justify-self: start;
  font-size: calc(var(--fs-micro) * .82);
  color: #96707E;
  transition: color 280ms ease;
}
.s07 .s07-count.ok { color: #A2622F; }

/* ═══════════ ה-CTA — נעול עד שהכול הושלם ═══════════
   ⚠️ .rise מנפיש opacity, ואנימציה גוברת על הצהרה רגילה — לכן !important. */
.s07 #s07listen[disabled] {
  opacity: .34 !important;
  filter: saturate(.4);
  cursor: not-allowed; pointer-events: none;
}
.s07 #s07listen.is-on { opacity: 1 !important; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .s07 .s07-crystal img { animation: none; }
  .s07 .s07-crystal.absorb .s07-halo { animation: none; }
  .s07 .s07-write.wake { animation: none; }
  .s07 .s07-qbody { transition-duration: 1ms; }
}