/* parent-controls.css — SPEC phase 6: parent playback controls over the flow.
   Consistent with home.css / gate.css: warm palette, Baloo 2, soft rounded
   discs and shadows. All controls sit above the video AND the games iframe. */

:root {
  --pc-card:#FFFFFF;
  --pc-ink:#44403C; --pc-ink-soft:#7C746C;
  --pc-orange:#F59A2E; --pc-wood-deep:#A85F1E;
  --pc-peach:#FFE4CC; --pc-teal:#D6F0EE;
  --pc-shadow:0 10px 24px rgba(80,60,40,.24);
  --pc-shadow-soft:0 6px 14px rgba(80,60,40,.20);
}

/* ---- the small top-corner menu button (visible over every phase) ---- */
/* RTL page → "top corner" is top-left here; z above the iframe (which is not
   positioned high) so it stays reachable during games too. */
/* ★ מוסתר מהילד (אורן 21.7.26): הכפתור מתגלה רק אחרי לחיצה של שנייה על
   המסך, לא משנה איפה. פעוט לא מחזיק שנייה במכוון, ולכן הוא לא ימצא אותו
   בטעות. `visibility` ולא `display` — כדי שהמיקום יישאר יציב ולא יקפיץ פריסה. */
.pc-menu-btn { visibility:hidden; opacity:0; transition:opacity .25s ease; }
.pc-menu-btn.pc-revealed { visibility:visible; opacity:1; }
.pc-menu-btn {
  position:fixed;
  top: 12px; top:max(12px, env(safe-area-inset-top));
  left: 12px; left:max(12px, env(safe-area-inset-left));
  z-index:900;
  width: 11vw; width:clamp(44px,11vw,56px);
  height: 11vw; height:clamp(44px,11vw,56px);
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:radial-gradient(circle at 50% 34%, #FFFFFF 0%, #FFF3E2 100%);
  box-shadow:var(--pc-shadow);
  display:grid; place-items:center;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .18s ease;
}
.pc-menu-btn:active { transform:scale(.94); box-shadow:var(--pc-shadow-soft); }
/* three-line "hamburger" drawn in code (no icon font dependency) */
.pc-menu-btn .pc-bars,
.pc-menu-btn .pc-bars::before,
.pc-menu-btn .pc-bars::after {
  content:""; display:block;
  width: 4.6vw; width:clamp(18px,4.6vw,24px); height:3px; border-radius:3px;
  background:var(--pc-wood-deep);
}
.pc-menu-btn .pc-bars { position:relative; }
.pc-menu-btn .pc-bars::before { position:absolute; top:-7px; }
.pc-menu-btn .pc-bars::after  { position:absolute; top:7px; }

/* ---- the jump menu (gated side drawer) ---- */
.pmenu-overlay {
  position:fixed; top: 0; right: 0; bottom: 0; left: 0; inset:0; z-index:1000;
  display:flex; justify-content:flex-start;   /* drawer on the start side (right in RTL) */
  background:rgba(48,36,24,.46);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:pmenu-fade .18s ease;
}
@keyframes pmenu-fade { from { opacity:0; } to { opacity:1; } }

.pmenu-drawer {
  width: 82vw; width:min(82vw, 340px);
  height:100%;
  background:var(--pc-card);
  box-shadow:var(--pc-shadow);
  padding: 5vw 4vw; padding:clamp(18px,5vw,28px) clamp(14px,4vw,22px);
  display:flex; flex-direction:column; gap: 2.4vh; gap:clamp(12px,2.4vh,18px);
  overflow-y:auto;
  /* ★ הקשחת-גלילה לאייפד (26.8.26, "הגלילה מתנהגת רע" — חקירת סידור-הלוח):
     בלי contain, מגע שמגיע לקצה הרשימה משורשר החוצה ו-iOS מקפיץ את השכבה
     כולה (rubber-band) — התפריט "בורח" מתחת לאצבע. pan-y מצהיר שהמחווה
     היחידה כאן היא גלילה אנכית, ו-webkit-overflow-scrolling נותן מומנטום
     גם על iOS ישן (הפיילוט כולל iPadOS 17 ישן). ⚠️ טרם אומת על מכשיר. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation:pmenu-slide .24s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pmenu-slide { from { transform:translateX(-24px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* "חזרה לעמוד הראשי" — כפתור בולט בראש התפריט (בקשת אורן). */
.pmenu-home {
  border:none; cursor:pointer;
  text-align:center;
  border-radius:16px;
  padding: 2.6vh 4vw; padding:clamp(12px,2.6vh,16px) clamp(14px,4vw,20px);
  background:var(--pc-wood-deep); color:#fff;
  box-shadow:var(--pc-shadow-soft);
  font-family:inherit; font-weight:800;
  font-size: 4.4vw; font-size:clamp(1rem,4.4vw,1.15rem);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pmenu-home:active { transform:scale(.97); }

.pmenu-title {
  margin:0;
  font-weight:800;
  font-size: 5.4vw; font-size:clamp(1.2rem,5.4vw,1.5rem);
  color:var(--pc-wood-deep);
}

.pmenu-list { display:flex; flex-direction:column; gap: 1.8vh; gap:clamp(9px,1.8vh,13px); }

.pmenu-item {
  border:none; cursor:pointer;
  text-align:start;
  border-radius:16px;
  padding: 2.6vh 4vw; padding:clamp(12px,2.6vh,16px) clamp(14px,4vw,20px);
  background:var(--pc-peach);
  box-shadow:var(--pc-shadow-soft);
  font-family:inherit;
  font-weight:700;
  font-size: 4.4vw; font-size:clamp(1rem,4.4vw,1.15rem);
  color:var(--pc-ink);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pmenu-item:active { transform:scale(.97); }
/* the lesson-video item stands slightly apart (it's the sequence's start) */
.pmenu-item[data-kind="video"] { background:var(--pc-teal); color:var(--pc-wood-deep); }
/* "עכשיו" — השלב שרץ כרגע (אורן 21.7.26): פס-הדגשה ירוק + תג, כך שההורה
   רואה מיד איפה הילד נמצא ברצף. */
.pmenu-item.is-current {
  box-shadow:inset 0 0 0 3px var(--pc-green,#1d9e75), var(--pc-shadow-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pmenu-now {
  flex:0 0 auto; font-size:.72em; font-weight:800; color:#fff;
  background:var(--pc-green,#1d9e75); border-radius:999px;
  padding:.2em .7em; letter-spacing:.03em;
}
/* ✓ "הושלם היום" (אורן 30.7.26) — עדין: ההורה סורק מה *חסר*, אז מה שהושלם
   מקבל וי ירוק קטן ומעט שקיפות, והחסרים בולטים מעצמם. */
.pmenu-item { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pmenu-item.is-done { opacity:.72; }
.pmenu-done {
  flex:0 0 auto; font-size:.95em; font-weight:900; line-height:1;
  color:var(--pc-green,#1d9e75);
}

/* ---- the scrub bar (revealed by a 2s long-press on the video) ---- */
/* Hidden from the child by default; only shown when .is-visible is set. */
.pc-scrub {
  position:fixed;
  left:0; right:0;
  bottom: 16px; bottom:max(16px, env(safe-area-inset-bottom));
  z-index:800;
  margin:0 auto;
  width: 90vw; width:min(90vw, 620px);
  display:flex; align-items:center; gap: 2.4vw; gap:clamp(8px,2.4vw,14px);
  direction:ltr;   /* conventional media order: elapsed · track · total */
  padding: 2.4vw 4vw; padding:clamp(10px,2.4vw,14px) clamp(14px,4vw,20px);
  background:rgba(255,255,255,.94);
  border-radius:999px;
  box-shadow:var(--pc-shadow);
  font-family:'Baloo 2', system-ui, sans-serif;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.pc-scrub.is-visible { opacity:1; visibility:visible; transform:translateY(0); }

.pc-scrub-time {
  font-weight:700; font-variant-numeric:tabular-nums;
  font-size: 3.4vw; font-size:clamp(.82rem,3.4vw,1rem);
  color:var(--pc-wood-deep);
  min-width:5.4ch; text-align:center;
  direction:ltr;
}
/* Deterministic left-to-right layout regardless of the RTL page:
   elapsed · track · total. */
.pc-scrub [data-role="scrub-current"]  { order:1; }
.pc-scrub [data-role="scrub-range"]    { order:2; }
.pc-scrub [data-role="scrub-duration"] { order:3; }

.pc-scrub-range {
  flex:1;
  -webkit-appearance:none; appearance:none;
  height:8px; border-radius:999px;
  background:var(--pc-peach);
  cursor:pointer;
}
.pc-scrub-range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--pc-orange);
  box-shadow:var(--pc-shadow-soft);
  cursor:pointer;
}
.pc-scrub-range::-moz-range-thumb {
  width:24px; height:24px; border:none; border-radius:50%;
  background:var(--pc-orange);
  box-shadow:var(--pc-shadow-soft);
  cursor:pointer;
}

/* ---- דיווח על בעיה (24.7.26) ---- */
/* כפתור הדיווח בתחתית תפריט-ההורה — מובחן מפריטי-הקפיצה (ענבר, לא אפרסק). */
.pmenu-report {
  border:none; cursor:pointer;
  /* יושב שני מלמעלה, מתחת ל"חזרה לעמוד הראשי" (29.7.26). קודם היה כאן
     margin-top:auto שדחק אותו לתחתית — עם הסידור החדש הוא היה דוחף את
     כותרת "מעבר לשלב" והרשימה כלפי מטה. */
  text-align:center;
  border-radius:16px;
  padding: 2.2vh 4vw; padding:clamp(10px,2.2vh,14px) clamp(14px,4vw,20px);
  background:var(--pc-amber,#f6b73c); color:var(--pc-wood-deep,#5b4632);
  box-shadow:var(--pc-shadow-soft);
  font-family:inherit; font-weight:800;
  font-size: 4vw; font-size:clamp(.95rem,4vw,1.05rem);
  -webkit-tap-highlight-color:transparent;
}
.pmenu-report:active { transform:scale(.97); }

/* הטופס עצמו — אותה שפה כמו התפריט: שכבת-החשכה + כרטיס. */
.preport-overlay {
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(48,36,24,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:pmenu-fade .18s ease;
}
.preport-overlay { padding:16px; box-sizing:border-box; }
.preport-drawer {
  width:100%; max-width:760px;
  max-height:92vh; overflow-y:auto; box-sizing:border-box;
  /* אותה הקשחת-גלילה כמו ב-pmenu-drawer (26.8.26) — אותו דפוס, אותו סיכון. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:var(--pc-card,#fff7ec);
  border-radius:24px;
  box-shadow:var(--pc-shadow);
  padding: 4vw; padding:clamp(18px,4vw,28px);
  display:flex; flex-direction:column; gap: 2vh; gap:clamp(12px,2vh,18px);
}
/* ★ באנר סרטוני-ההסבר — הפריט הראשון בכרטיס, רוחב מלא, מעל הכותרת.
   אדום-יוטיוב (הכרעת אורן 28.7.26) כדי שייקרא כ"וידאו" בלי לקרוא מילה. */
.preport-videos {
  display:flex; align-items:center; justify-content:center;
  gap: 3vw; gap:clamp(10px,3vw,14px);
  border:none; cursor:pointer; text-decoration:none;
  border-radius:18px;
  padding: 2.6vh 3vw; padding:clamp(12px,2.6vh,18px) clamp(14px,3vw,22px);
  background:#FF0000; color:#fff;
  font-family:inherit; text-align:center;
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.preport-videos:active { transform:scale(.98); }
/* אייקון-הפליי מצויר ב-CSS ולא כאמוג'י: ▶️ מרונדר כחול-לבן ברוב הפלטפורמות
   ומתלכלך על הרקע האדום, וגם משתנה ממכשיר למכשיר. עיגול לבן + משולש אדום
   נראה זהה בכל מקום ומצטט את שפת-הנגן המוכרת. */
.preport-videos .pv-ico {
  flex:0 0 auto;
  width: 6vw; width:clamp(28px,6vw,38px);
  height: 6vw; height:clamp(28px,6vw,38px);
  border-radius:50%;
  background:#fff;
  display:grid; place-items:center;
}
.preport-videos .pv-ico::before {
  content:"";
  width:0; height:0;
  border-style:solid;
  /* משולש שמצביע ימינה; ב-RTL הכיוון לא מתהפך — זה סמל נגן, לא חץ-ניווט. */
  border-width: .34em 0 .34em .56em;
  border-color:transparent transparent transparent #FF0000;
  margin-inline-start:.12em; /* מרכוז אופטי — משולש נראה שמאלי מדי כשהוא ממורכז גאומטרית */
  font-size: 4vw; font-size:clamp(1.1rem,4vw,1.5rem);
}
.preport-videos .pv-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.preport-videos .pv-main { font-weight:800; line-height:1.2; font-size: 3vw; font-size:clamp(1rem,3vw,1.22rem); }
.preport-videos .pv-sub { font-weight:600; opacity:.92; font-size: 2.2vw; font-size:clamp(.76rem,2.2vw,.9rem); }
/* הקו שמפריד את הבאנר משאר המסך — אותו אפרסק כמו המפריד בין הטורים. */
.preport-divider { height:2px; border-radius:2px; background:var(--pc-peach,#FFE4CC); flex:0 0 auto; }

/* ---- מסך-ההורים הראשי (parent-hub.js, 30.7.26) ---- */
/* שלוש תיבות-צבע מלאות בזו אחר זו — אדום (סרטונים) · ירוק (תזכורת) · חום
   (צור קשר). הכרעת אורן: התזכורת חייבת להיראות כמו השניים האחרים ולא כמו
   טקסט עם מסגרת, אחרת היא נבלעת ביניהם. הרקע נשאר מלא גם במסך נמוך. */
.hub-body { text-align:center; }
.hub-frame {
  border-radius:18px;
  background:var(--pc-green,#1d9e75);
  padding: 3vw; padding:clamp(14px,3vw,18px);
  box-shadow:var(--pc-shadow-soft);
}
/* הטקסט כולו שחור (הכרעת אורן) — הניגוד מול הירוק חזק, וההדגשה נשארת
   ההבדל היחיד שהעין קולטת. */
.hub-text {
  margin:0; color:#000;
  font-size: 4vw; font-size:clamp(1rem,4vw,1.12rem);
  line-height:1.65; font-weight:600;
}
/* ★ 1.4em ולא 1.12em: בגרסה הראשונה ההפרש היה 12% ואורן צדק שהוא לא נראה —
   הבדל-גודל מתחת ל-~25% לא נקרא כהדגשה, הוא נקרא כשגיאת-רינדור.
   inline-block + line-height:1 מונעים מהשורה המוגדלת למתוח את רווח-השורות. */
.hub-text b { font-weight:800; font-size:1.4em; line-height:1; display:inline-block; }
.hub-cta {
  border:none; cursor:pointer; width:100%;
  border-radius:18px;
  padding: 3vh 4vw; padding:clamp(14px,3vh,18px) clamp(14px,4vw,20px);
  background:var(--pc-wood-deep); color:#fff;
  font-family:inherit; font-weight:800;
  font-size: 4.2vw; font-size:clamp(1.02rem,4.2vw,1.18rem);
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.hub-cta:active { transform:scale(.98); }
.hub-actions { display:flex; flex-direction:column; gap:10px; margin-top:4px; }

/* ---- ★ שני טורים (25.8.26) ----
   המסך נעול לרוחב וגובהו כ-400 פיקסלים בטלפון. ערימה אנכית אחת של חמש
   קופסאות הייתה הופכת לגלילה; שני טורים מנצלים את הרוחב שיש בשפע.
   ימין = עזרה (מה שההורה בא בשבילו) · שמאל = שליטה (מה שהוא מכריע). */
.hub-cols {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 2.4vw; gap:clamp(10px,2.4vw,18px);
  align-items:start;
}
/* בלי מודול-הגישה (מסך-ההורים הישן) — טור אחד, כמו שהיה. */
.hub-cols.is-single { grid-template-columns:1fr; }
/* מסך צר מאוד: הטורים נערמים. עדיף לגלול מאשר שתי עמודות דחוסות. */
@media (max-width:560px) { .hub-cols { grid-template-columns:1fr; } }

.hub-col { display:flex; flex-direction:column; gap: 1.6vh; gap:clamp(8px,1.6vh,14px); }

/* קופסה לבנה — הבסיס של שני הפריטים בטור-השליטה. */
.hub-card {
  background:#fff;
  border-radius:18px;
  padding: 2.6vw; padding:clamp(10px,2.6vw,16px);
  box-shadow:var(--pc-shadow-soft);
}
.hub-card-title {
  margin:0 0 8px;
  font-weight:700;
  font-size: 2.6vw; font-size:clamp(.78rem,2.6vw,.92rem);
  color:var(--pc-ink-soft,#7C746C);
}

/* שורת-מתג: שם הנדבך מימין, המפסק משמאל. */
.hub-switch-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:7px 0;
}
.hub-switch-row + .hub-switch-row { border-top:1px solid #EFE8DC; }
.hub-switch-label {
  font-weight:700;
  font-size: 3.2vw; font-size:clamp(.9rem,3.2vw,1.05rem);
  color:var(--pc-ink,#44403C);
}
/* המפסק עצמו. יעד-מגע נדיב (44px+) — אצבע של הורה, לא עכבר. */
.hub-switch {
  flex:0 0 auto; position:relative;
  width:52px; height:30px; border-radius:999px;
  border:none; cursor:pointer; padding:0;
  background:#D3D1C7;
  transition:background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.hub-switch.is-on { background:#5DCAA5; }
.hub-switch-knob {
  position:absolute; top:3px; inset-inline-start:3px;
  width:24px; height:24px; border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(80,60,40,.28);
  transition:transform .18s ease;
}
/* הידית זזה תמיד לכיוון "פתוח" — inline-end, כלומר נכון גם ב-RTL. */
.hub-switch.is-on .hub-switch-knob { transform:translateX(-22px); }
:root:not([dir="rtl"]) .hub-switch.is-on .hub-switch-knob { transform:translateX(22px); }

/* קופסת "סגור לילד" — טורקיז, כדי שתיקרא כשונה מהמתגים ולא כהמשך שלהם. */
.hub-closed { background:var(--pc-sec-teal,#D6F0EE); }
.hub-closed .hub-card-title { color:#0F6E56; }
.hub-closed-grid { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; }
.hub-open-btn {
  border:none; cursor:pointer;
  border-radius:999px;
  padding: 1.8vh 2vw; padding:clamp(8px,1.8vh,12px) clamp(8px,2vw,14px);
  background:#fff; color:#0F6E56;
  font-family:inherit; font-weight:800;
  font-size: 3vw; font-size:clamp(.85rem,3vw,1rem);
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.hub-open-btn:active { transform:scale(.97); }

/* קופסת מצב-הבדיקה — ענבר, ולא לבן כמו המתגים: זו לא הגדרה קבועה אלא מצב
   זמני, וההבדל צריך להיקרא לפני שקוראים מילה. */
.hub-testmode { background:#FAEEDA; border:1.5px solid #EF9F27; }
.hub-tm-text {
  margin:0 0 8px; color:#854F0B;
  font-size: 2.6vw; font-size:clamp(.76rem,2.6vw,.9rem);
  font-weight:600; line-height:1.5;
}
.hub-tm-btn {
  border:none; cursor:pointer; width:100%;
  border-radius:999px;
  padding: 1.8vh 2vw; padding:clamp(8px,1.8vh,12px) clamp(8px,2vw,14px);
  background:#fff; color:#854F0B;
  font-family:inherit; font-weight:800;
  font-size: 3vw; font-size:clamp(.85rem,3vw,1rem);
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.hub-tm-btn:active { transform:scale(.97); }

/* הכותרת העליונה — מעל שני הצדדים, ממורכזת. */
.preport-head { text-align:center; }
.preport-title {
  margin:0; font-weight:800; line-height:1.25;
  font-size: 3.4vw; font-size:clamp(1.15rem,3.4vw,1.5rem);
  color:var(--pc-wood-deep,#5b4632);
}
.preport-sub {
  margin:6px 0 0; color:var(--pc-ink-soft,#7C746C);
  font-size: 2.4vw; font-size:clamp(.85rem,2.4vw,.98rem);
}

/* שני טורים: ימין = פרטי-קשר, שמאל = הטופס (RTL → הראשון הוא הימני). */
.preport-cols { display:flex; gap: 3vw; gap:clamp(14px,3vw,26px); align-items:stretch; }
.preport-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.preport-sep { width:2px; border-radius:2px; background:var(--pc-peach,#FFE4CC); flex:0 0 auto; }
.preport-coltitle {
  margin:0 0 2px; font-weight:800; color:var(--pc-wood-deep,#5b4632);
  font-size: 2.9vw; font-size:clamp(1rem,2.9vw,1.15rem);
}

/* --- צד ימין: כרטיס הקשר --- */
.pcontact-name {
  margin:0; font-weight:800; color:var(--pc-ink,#3d3327);
  font-size: 3vw; font-size:clamp(1.05rem,3vw,1.25rem);
}
.pcontact-role {
  margin:0; color:var(--pc-ink-soft,#7C746C);
  font-size: 2.3vw; font-size:clamp(.82rem,2.3vw,.95rem);
}
.pcontact-list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pcontact-list li {
  display:flex; align-items:center; gap:10px;
  color:var(--pc-ink,#3d3327);
  font-size: 2.5vw; font-size:clamp(.9rem,2.5vw,1rem);
}
/* מספר-טלפון ומייל הם טקסט לטיני בתוך דף RTL — בלי בידוד הסימנים מתערבבים. */
.pcontact-list a { color:var(--pc-ink,#3d3327); text-decoration:none; font-weight:600; direction:ltr; unicode-bidi:isolate; }
.pcontact-btns { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:12px; }
.pcontact-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; text-decoration:none;
  border-radius:16px;
  padding: 2.2vh 14px; padding:clamp(11px,2.2vh,14px) 14px;
  font-family:inherit; font-weight:800;
  font-size: 2.7vw; font-size:clamp(.95rem,2.7vw,1.05rem);
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.pcontact-btn:active { transform:scale(.97); }
.pcontact-wa { background:#25D366; color:#fff; }
.pcontact-mail { background:var(--pc-peach,#FFE4CC); color:var(--pc-wood-deep,#5b4632); }

.preport-hint {
  margin:0; color:var(--pc-ink-soft,#7C746C);
  font-size: 2.4vw; font-size:clamp(.85rem,2.4vw,.95rem);
}
.preport-text {
  width:100%; box-sizing:border-box; resize:vertical;
  min-height:104px;
  border:2px solid var(--pc-peach,#ffd9b0); border-radius:14px;
  background:#fff; color:var(--pc-ink,#3d3327);
  font-family:inherit;
  font-size: 4.2vw; font-size:clamp(1rem,4.2vw,1.1rem);
  padding:10px 12px;
}
.preport-text-missing { border-color:#d9534f; }
.preport-photo {
  display:block; cursor:pointer;
  text-align:center;
  border-radius:14px;
  padding: 2vh 4vw; padding:clamp(9px,2vh,13px) clamp(14px,4vw,20px);
  background:var(--pc-teal,#bfe7d9); color:var(--pc-wood-deep,#5b4632);
  font-weight:700;
  font-size: 4vw; font-size:clamp(.95rem,4vw,1.05rem);
  -webkit-tap-highlight-color:transparent;
}
.preport-photo-input {
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.preport-actions { display:flex; gap:10px; margin-top:auto; }
.preport-send {
  flex:1; border:none; cursor:pointer;
  border-radius:16px;
  padding: 2.4vh 4vw; padding:clamp(11px,2.4vh,15px) clamp(14px,4vw,20px);
  background:var(--pc-green,#1d9e75); color:#fff;
  font-family:inherit; font-weight:800;
  font-size: 4.4vw; font-size:clamp(1rem,4.4vw,1.15rem);
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.preport-send:active { transform:scale(.97); }
.preport-send[disabled] { opacity:.6; cursor:default; }
.preport-cancel {
  border:none; cursor:pointer;
  border-radius:16px;
  padding: 2.4vh 4vw; padding:clamp(11px,2.4vh,15px) clamp(14px,4vw,20px);
  background:var(--pc-peach,#ffd9b0); color:var(--pc-ink,#3d3327);
  font-family:inherit; font-weight:700;
  font-size: 4.4vw; font-size:clamp(1rem,4.4vw,1.15rem);
  -webkit-tap-highlight-color:transparent;
}
/* מסך צר **וגבוה** (פורטרייט): אין מקום לשני טורים — נערמים, הקשר למעלה.
   דרישת ה-min-height מכוונת: בלנדסקייפ קטן (למשל 600×400) עדיף להשאיר שני
   טורים צרים מאשר לערום ולגלול — הגובה הוא המשאב הנדיר שם, לא הרוחב. */
@media (max-width:620px) and (min-height:620px) {
  .preport-cols { flex-direction:column; }
  .preport-sep { width:auto; height:2px; }
  .pcontact-btns { margin-top:4px; padding-top:0; }
  .preport-actions { margin-top:4px; }
}

/* מסך נמוך (טלפון קטן בלנדסקייפ): הגובה הוא המשאב הנדיר — מכווצים ריווחים
   ואת תיבת-הטקסט כדי שכל המסך ייכנס בלי גלילה. */
@media (max-height:520px) {
  .preport-drawer { padding:14px 18px; gap:8px; }
  .preport-sub { display:none; }
  /* מסך-ההורים הראשי מתכווץ באותו היגיון: הריווח יורד, אבל התיבה הירוקה
     והטקסט נשארים — הם *התוכן* של המסך הזה, לא קישוט. */
  .hub-frame { padding:10px 14px; }
  .hub-text { font-size:.95rem; line-height:1.5; }
  .hub-cta { padding:10px 14px; }
  /* הבאנר מתכווץ לשורה אחת — שורת-המשנה היא הראשונה שנופלת, כמו .preport-sub */
  .preport-videos { padding:8px 14px; }
  .preport-videos .pv-sub { display:none; }
  .preport-text { min-height:0; height:62px; padding:8px 10px; }
  .preport-photo { padding:8px 14px; }
  .preport-send, .preport-cancel { padding:9px 14px; }
  .pcontact-btn { padding:9px 14px; }
  .pcontact-role { display:none; }
  .pcontact-list { margin-top:2px; gap:6px; }
  .pcontact-btns { gap:8px; padding-top:8px; }
}

.preport-done {
  margin:0; text-align:center; font-weight:800;
  font-size: 5vw; font-size:clamp(1.1rem,5vw,1.35rem);
  color:var(--pc-green,#1d9e75);
  padding: 3vh 0; padding:clamp(14px,3vh,22px) 0;
}

/* ---- ★ תג מצב-הבדיקה (25.8.26) ----
   ממורכז למעלה, בין שתי הפינות: כל פקדי-הניווט באפליקציה יושבים בפינות
   העליונות (שלוש-הנקודות בבית, חזרה במסך הימים), ורצועה רוחבית הייתה עוברת
   מעליהם. fixed — לא גוזל גובה מפריסה שממילא צרה (~400px לרוחב). */
.tm-badge {
  position:fixed; z-index:1200;
  top: 8px; top:max(8px, env(safe-area-inset-top));
  left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 6px 14px;
  border-radius:999px;
  background:#FAEEDA;
  border:1.5px solid #EF9F27;
  box-shadow:var(--pc-shadow-soft);
  font-family:'Baloo 2', system-ui, sans-serif;
  color:#854F0B;
  font-size: 2.6vw; font-size:clamp(.76rem,2.6vw,.92rem);
  font-weight:700;
  white-space:nowrap;
  max-width:calc(100vw - 140px);   /* לעולם לא נוגע בכפתורי-הפינות */
}
.tm-label { flex:0 0 auto; }
/* השעון ב-LTR ובפונט טבלאי: "9:07" לא מתהפך ב-RTL, והרוחב לא קופץ בכל שנייה. */
.tm-clock {
  flex:0 0 auto; direction:ltr;
  font-variant-numeric:tabular-nums;
  font-weight:800;
}
.tm-exit {
  flex:0 0 auto;
  border:none; cursor:pointer;
  border-radius:999px;
  padding:5px 12px;
  background:#fff; color:#854F0B;
  font-family:inherit; font-weight:800; font-size:inherit;
  box-shadow:var(--pc-shadow-soft);
  -webkit-tap-highlight-color:transparent;
}
.tm-exit:active { transform:scale(.96); }
/* פועם רק בשתי הדקות האחרונות — אז הפעימה אומרת משהו. */
.tm-badge.is-ending { animation:tm-pulse 1.1s ease-in-out infinite; }
@keyframes tm-pulse {
  0%,100% { background:#FAEEDA; }
  50%     { background:#FAC775; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-badge.is-ending { animation:none; background:#FAC775; }
}