/* ============================================================
   activities.css — סגנונות לפעילויות
   ============================================================ */

/* ============================================================
   איורי גופים (SVG)
   ============================================================ */
.solid-svg {
  display: block;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 260px;
  block-size: auto;
}

.solid-svg--wide { max-inline-size: 400px; }

.sv-face { fill: var(--unit-1); fill-opacity: .16; }
.sv-base { fill: var(--gold);   fill-opacity: .32; }

.sv-edge {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* קווים נסתרים — מקווקו, כמקובל בשרטוט גופים */
.sv-edge--hidden {
  stroke-dasharray: 5 4;
  stroke-opacity: .45;
}

.sv-apex { fill: var(--warn); }

.sv-label {
  fill: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}

/* מספר מידה שיושב על קטע באיור. ההילה הבהירה שומרת שהוא יישאר קריא
   גם כשהוא חוצה קו של הגוף. */
.sv-measure {
  fill: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: var(--surface);
  stroke-width: 4;
  stroke-linejoin: round;
}

.sv-leader {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
}

.shape-figure {
  margin: 0;
  padding-block: var(--sp-4);
  display: flex;
  justify-content: center;
}

/* ============================================================
   מסך ההסבר
   ============================================================ */
.activity-intro__text {
  font-size: var(--fs-md);
  line-height: 1.7;
  max-inline-size: 58ch;
}

/* ============================================================
   כותרת השאלה והתקדמות
   ============================================================ */
.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.quiz-head__count {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.quiz-dots { display: flex; gap: 6px; }

.quiz-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--r-pill);
  background: var(--sand-deep);
  border: 2px solid transparent;
}

.quiz-dot--ok { background: var(--success); }
.quiz-dot--no { background: var(--warn); }
.quiz-dot--current { border-color: var(--ink); transform: scale(1.25); }

/* ============================================================
   כרטיס השאלה
   ============================================================ */
.quiz-card { text-align: center; }

.quiz-question {
  font-size: var(--fs-lg);
  margin-block-end: 0;
}

/* ============================================================
   כפתורי תשובה
   ============================================================ */
.answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.answer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-block-size: 64px;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.answer-btn:hover:not([disabled]) {
  border-color: var(--unit-1);
  background: var(--unit-1-wash);
}

.answer-btn:active:not([disabled]) { transform: translateY(2px); }

.answer-btn[disabled] { cursor: default; opacity: 1; }

.answer-btn__mark {
  font-size: 1.4em;
  line-height: 1;
  min-inline-size: 1em;
}

/* מצבים אחרי מענה — סמל + טקסט + מסגרת, לא צבע בלבד */
.answer-btn--correct {
  border-color: var(--success);
  background: var(--success-wash);
  color: var(--success);
}

.answer-btn--wrong {
  border-color: var(--warn);
  background: var(--warn-wash);
  color: var(--warn);
}

/* התשובה הנכונה, כשנבחרה תשובה שגויה */
.answer-btn--is-answer {
  border-color: var(--success);
  border-style: dashed;
  color: var(--success);
}

/* ============================================================
   משוב
   ============================================================ */
.feedback-slot:empty { display: none; }

.feedback {
  border-radius: var(--r-md);
  padding: var(--sp-5);
  border-inline-start: 6px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.feedback--ok { border-inline-start-color: var(--success); background: var(--success-wash); }
.feedback--no { border-inline-start-color: var(--warn);    background: var(--warn-wash); }

.feedback__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}

.feedback__icon { font-size: 1.5rem; line-height: 1; }
.feedback--ok .feedback__icon { color: var(--success); }
.feedback--no .feedback__icon { color: var(--warn); }

.feedback__title { margin-block-end: 0; font-size: var(--fs-md); }

.feedback__why  { margin-block-end: var(--sp-3); line-height: 1.7; }

.feedback__note {
  margin-block-end: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* הסבר בנוי משלבים: שורות קצרות במקום פסקה אחת צפופה.
   המספור מגיע מה-ol עצמו, ולכן הוא נשאר נכון גם אם שלב
   יתווסף או יוסר, וקורא מסך מכריז על רשימה בת שני פריטים. */
.why-lead { margin-block-end: var(--sp-3); }

.why-steps {
  margin: 0 0 var(--sp-3);
  padding-inline-start: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.why-step__head { margin: 0 0 var(--sp-1); font-weight: 600; }

.why-step__line {
  margin: 0;
  line-height: 1.7;
}

/* התרגיל עומד בשורה משלו, כדי שייקרא בבירור גם במסך צר */
.why-step__math {
  margin: var(--sp-2) 0;
  font-size: var(--fs-md);
}

.why-close { margin: 0 0 var(--sp-2); line-height: 1.7; }
.why-close:last-child { margin-block-end: 0; }

/* ============================================================
   תזכורת מתקפלת
   ============================================================ */
.reminder {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  font-size: var(--fs-sm);
}

.reminder summary {
  cursor: pointer;
  font-weight: 700;
  min-block-size: 32px;
  display: flex;
  align-items: center;
}

.reminder p { margin-block: var(--sp-2) 0; color: var(--text-muted); }

/* ============================================================
   מסך סיכום
   ============================================================ */
.result-card { text-align: center; }

.result-score {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--unit-1-deep);
  line-height: 1.2;
  margin-block-end: var(--sp-2);
}

.result-message {
  font-size: var(--fs-md);
  margin-block-end: 0;
}

.result-best {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.concept-list { list-style: none; padding-inline-start: 0; margin-block-end: 0; }

.concept-list li {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--line);
  line-height: 1.6;
}

.concept-list li:last-child { border-block-end: none; }

.concept-list__tick { flex: none; color: var(--success); font-weight: 700; }
.concept-list--review .concept-list__tick { color: var(--warn); }

/* ============================================================
   כפתורים גדולים ושורות ממורכזות
   ============================================================ */
.btn--lg {
  min-block-size: 52px;
  padding-inline: var(--sp-6);
  font-size: var(--fs-base);
}

.btn-row--center { justify-content: center; }

/* ============================================================
   מסכים צרים
   ============================================================ */
@media (max-width: 639px) {
  .answer-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .answer-btn { min-block-size: 60px; font-size: var(--fs-md); }
  .solid-svg { max-inline-size: 210px; }
  .solid-svg--wide { max-inline-size: 100%; }
  .result-score { font-size: var(--fs-2xl); }
  .feedback { padding: var(--sp-4); }
  .btn-row--center .btn { flex: 1 1 100%; }
}

/* ============================================================
   פעילות 1.1 — איור חלקי הפירמידה
   ============================================================ */
.parts-svg {
  display: block;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 340px;
  block-size: auto;
  touch-action: manipulation;
}

.diagram-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: var(--sh-1);
}

.pp-face   { fill: var(--unit-1); fill-opacity: .16; }
.pp-base   { fill: var(--gold);   fill-opacity: .30; }

.pp-edge {
  stroke: var(--text);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.pp-edge--hidden { stroke-dasharray: 5 4; stroke-opacity: .42; }

.pp-vertex { fill: var(--ink); }
.pp-apex   { fill: var(--warn); }

/* סימון חלק — שינוי צבע וגם עובי/גודל, לא צבע בלבד */
.pp-hl { transition: none; }
polygon.pp-hl  { fill: var(--warn); fill-opacity: .55; stroke: var(--warn); stroke-width: 2.5; }
line.pp-hl     { stroke: var(--warn); stroke-width: 6.5; stroke-opacity: 1; stroke-dasharray: none; }
circle.pp-hl   { fill: var(--warn); r: 9; stroke: var(--surface); stroke-width: 2.5; }

/* ------------------------------------------------------------
   אזורי הלחיצה — בצורת החלק עצמו, שקופים לחלוטין.
   אין עיגולים נראים ואין סימנים שמסגירים היכן התשובה.
   מאחורי צלעות וקודקודים דקים יש אזור רחב יותר לנוחות הלחיצה.
   ------------------------------------------------------------ */
.pp-hits .pp-hit { cursor: pointer; }

.pp-hit {
  fill: transparent;
  stroke: transparent;
  outline: none;
}

/* רצועת הלחיצה סביב צלע דקה. רחבה מספיק למגע, אך לא רחבה כל כך
   שתבלע את שטח הבסיס שמתחתיה. */
line.pp-hit   { stroke-width: 17; stroke-linecap: round; }
circle.pp-hit { stroke-width: 0; }

.pp-hits--off { pointer-events: none; }

/* ------------------------------------------------------------
   סימון החלק עצמו — במעבר עכבר, במיקוד מקלדת ובבחירה.
   תמיד הפאה, הבסיס, הצלע או הקודקוד האמיתיים; לא סימן נפרד.
   ------------------------------------------------------------ */
polygon.pp-face.pp-hover { fill-opacity: .34; }
polygon.pp-base.pp-hover { fill-opacity: .52; }

line.pp-edge.pp-hover {
  stroke: var(--unit-1-deep);
  stroke-width: 5;
  stroke-opacity: 1;
}

circle.pp-vertex.pp-hover,
circle.pp-apex.pp-hover {
  stroke: var(--unit-1-deep);
  stroke-width: 3.5;
}

/* מיקוד מקלדת — סימון מובחן בזהב, על החלק עצמו.
   הבוררים מפורטים כדי לגבור על סימון המעבר בעכבר. */
polygon.pp-face.pp-focus,
polygon.pp-base.pp-focus {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-dasharray: 7 4;
}

line.pp-edge.pp-focus {
  stroke: var(--gold);
  stroke-width: 7;
  stroke-opacity: 1;
  stroke-dasharray: none;
}

circle.pp-vertex.pp-focus,
circle.pp-apex.pp-focus {
  stroke: var(--gold);
  stroke-width: 4.5;
}

/* החלק שנבחר */
polygon.pp-hl {
  fill: var(--warn);
  fill-opacity: .5;
  stroke: var(--warn);
  stroke-width: 2.5;
}

line.pp-hl {
  stroke: var(--warn);
  stroke-width: 6.5;
  stroke-opacity: 1;
  stroke-dasharray: none;
}

circle.pp-hl {
  fill: var(--warn);
  stroke: var(--surface);
  stroke-width: 2.5;
  r: 9;
}

/* ============================================================
   בורר זווית המבט
   ============================================================ */
.view-switch {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

.view-btn {
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-sm);
}

.view-btn:hover { border-color: var(--unit-1); }

.view-btn--active {
  background: var(--unit-1);
  border-color: var(--unit-1);
  color: #fff;
  font-weight: 700;
}

.view-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-block-end: 0;
}

/* ============================================================
   כרטיס החלק שנבחר / הסבר מודרך
   ============================================================ */
.part-readout__empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-block-end: 0;
}

.part-readout__card {
  background: var(--unit-1-wash);
  border-inline-start: 6px solid var(--unit-1);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.part-readout__name { margin-block-end: var(--sp-2); color: var(--unit-1-deep); }
.part-readout__card p { margin-block-end: 0; }

.tour-card__text { margin-block-end: 0; line-height: 1.75; }

.quiz-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-block: var(--sp-2) 0;
}

/* ============================================================
   כפתורי התאמה
   ============================================================ */
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* אפשרויות מנוסחות במילים — שורה אחת לכל אפשרות, כדי שהמשפט יישאר קריא */
.option-grid--wide {
  grid-template-columns: 1fr;
}

.option-grid--wide .answer-btn {
  justify-content: flex-start;
  text-align: start;
  min-block-size: 56px;
  font-size: var(--fs-base);
}

.answer-btn--sm {
  min-block-size: 56px;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  font-weight: 700;
}

@media (max-width: 639px) {
  .parts-svg { max-inline-size: 100%; }
  /* פחות ריפוד = איור גדול יותר = מטרות מגע של 44 פיקסלים */
  .diagram-stage { padding-inline: var(--sp-1); }
  .option-grid { grid-template-columns: 1fr; }
  .view-btn { flex: 1 1 auto; padding-inline: var(--sp-3); }
}

/* הודעת "נסו שוב" בתוך המשוב, כשהתשובה עדיין לא נמצאה */
.feedback__retry {
  margin-block-end: 0;
  text-align: center;
  font-weight: 700;
  color: var(--warn);
}

/* ---------- איור מורכב: כמה גופים בשאלה אחת ----------
   בעיה שמדברת על שני גופים צריכה לראות את שניהם. הם נפרשים זה לצד
   זה כשיש מקום, ואחד מתחת לשני במסך צר. */
.combo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-block: var(--sp-3);
}

.combo__lead {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  color: var(--text-muted);
}

.combo__part {
  margin: 0;
  flex: 0 1 210px;
  text-align: center;
}

.combo__title {
  font-weight: 700;
  margin-block-end: var(--sp-1);
}

.combo__note {
  margin-block: var(--sp-1) 0;
  font-weight: 700;
  color: var(--text-muted);
}

/* ---------- אריזות פופקורן (פעילות 2.10, שאלה 3) ----------
   האיור צריך להיקרא כאריזת מזון ולא כגוף הנדסי חשוף, ולכן יש לו
   חזית צבעונית, פסים וגרעינים. הצורה עצמה נשארת תיבה ופירמידה
   מדויקות, כדי שההשוואה בין הנפחים תישאר נכונה. */
.pop-front   { fill: var(--gold);   fill-opacity: .30; }
.pop-stripe  { fill: var(--warn);   fill-opacity: .28; }
.pop-kernel  { fill: #F6E2A8; stroke: var(--gold-deep); stroke-width: 1.2; }

/* המבנה המורכב (פעילות 2.10, שאלה 4) מצויר גבוה יותר מרחב */
.combo__stack { inline-size: min(300px, 100%); block-size: auto; }