/*
  design-system/phone.css — משימה 45 סעיף 2.1, הטלפון האישי.
  שפת העיצוב המאושרת בלבד: הצבעים, הגופנים, הרדיוסים והרווחים מ-tokens.css.
  אין כאן צבע חדש ואין גופן חדש — רק צורה של מכשיר.
  אייקונים מקוריים כ-SVG (Shell.icon), בלי העתקת נכסי אפל.
*/

/* ---------- משתנה גודל הטקסט (סעיף 2.1, אפליקציית ההגדרות) ----------
   **המשתנה שייך למתאם ויושב בשלד**, וסוכן ההגדרות אינו עורך את tokens.css.
   הוא מוחל על סולם הבסיס, ולכן משפיע על app2 כולו. הטווח מוגבל (0.85-1.30)
   כדי שהמסגרת תתאים את עצמה ולא תישבר. */
:root{ --text-scale:1; }
html{ font-size:calc(19.25px * var(--text-scale)); } /* משימה 91א §3ד (D-494): הגדלה ~10% — היה 17.5px; סולם הטלפון (--text-scale) נשאר */

/* =====================================================================
   האייקון הצף.
   **בפינה התחתונה בצד שמאל של המסך פיזית.** `left` ולא inset-inline-start
   במפורש, כדי שלא יתהפך ב-RTL.
   ===================================================================== */
.phone-fab{
  position:fixed; left:16px; bottom:16px;
  bottom:max(16px, env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  z-index:var(--z-phone-icon);
  background:var(--bg-elev-2); color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.phone-fab:hover{ background:var(--bg-hover); transform:translateY(-2px); }
.phone-fab:focus-visible{ box-shadow:var(--focus-ring); }
.phone-fab-badge{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--primary); color:var(--white);
  font-size:0.6875rem; font-weight:800; line-height:20px; text-align:center;
  font-variant-numeric:tabular-nums;
}
/* סרגל תחתון קיים: האייקון מתרומם מעליו ולא מתנגש בו (0.2, מוקד סיכון 5) */
html[data-layout="phone"] .phone-fab{ bottom:max(76px, calc(env(safe-area-inset-bottom) + 60px)); }

/* =====================================================================
   המכשיר.
   dialog => top layer. סולם ה-z-index אינו חל עליו (ר' 0.3), אבל הטוקן
   --z-phone נשמר לעקביות ולמקרה שהמכשיר יוצג אי פעם לא-מודאלית.
   ===================================================================== */
.phone-device{
  border:none; padding:0; background:transparent; overflow:visible;
  max-width:none; max-height:none;
  z-index:var(--z-phone);
}
.phone-device::backdrop{ background:rgba(4,6,10,.6); backdrop-filter:blur(2px); }

.phone-frame{ user-select:none; -webkit-user-select:none; /* משימה 92 §4: גרירה בתוך הטלפון לא בוחרת טקסט — הבחירה נתפסה מעל ה-X (נמדד 30.08) */
  position:relative; display:flex; flex-direction:column;
  width:340px; height:696px;
  background:var(--bg-deep); color:var(--text);
  border:10px solid var(--bg-deep); border-radius:44px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}

/* ---------- משימה 59 ריצה ג: טפט המסך ורקע הנעילה (תמונות 59, 87) ----------
   מיצוב בלבד; המסננים והסקרים מטוקני tokens.css. שני הקבצים נטענים פעם
   אחת, והמצב (is-home/is-lock) רק מחליף תצוגה. באפליקציות הפנימיות
   השכבה כבויה — הרקע של היום. */
.phone-wall{ position:absolute; inset:0; z-index:0; overflow:hidden; display:none; }
.phone-wall.is-home, .phone-wall.is-lock{ display:block; }
.phone-wall > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:none; }
.phone-wall.is-home > .phone-wall-home{ display:block; filter:var(--img-f-mid); }
.phone-wall.is-lock > .phone-wall-lock{ display:block; filter:var(--img-f-deep); }
.phone-wall-scrim{ position:absolute; inset:0; background:var(--scrim-flat); }
.phone-wall.is-lock > .phone-wall-scrim{ background:var(--scrim-deep); }
.phone-statusbar, .phone-screen, .phone-home-indicator{ position:relative; z-index:1; }

/* ---------- שורת המצב ---------- */
.phone-statusbar{
  flex:none; height:38px; display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; font-size:0.78125rem; font-weight:700; color:var(--text);
  cursor:grab; user-select:none;
}
.phone-statusbar:active{ cursor:grabbing; }
.phone-status-time{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:112px; height:24px; background:var(--bg-deep); border-radius:0 0 14px 14px;
}
.phone-status-right{ display:flex; align-items:center; gap:6px; }
.phone-signal{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.phone-signal i{ width:3px; background:var(--text); border-radius:1px; }
.phone-signal i:nth-child(1){ height:4px }
.phone-signal i:nth-child(2){ height:6px }
.phone-signal i:nth-child(3){ height:8px }
.phone-signal i:nth-child(4){ height:11px }
.phone-battery{
  width:22px; height:11px; border:1px solid var(--text); border-radius:3px;
  position:relative; display:inline-block; padding:1px;
}
.phone-battery::after{
  content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px;
  background:var(--text); border-radius:0 1px 1px 0;
}
.phone-battery b{ display:block; height:100%; width:72%; background:var(--success); border-radius:1px; }

/* ---------- המסך ---------- */
.phone-screen{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--sp-2);
}
.phone-home-indicator{
  flex:none; height:26px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.phone-home-indicator::before{
  content:''; width:120px; height:5px; border-radius:999px; background:rgba(255,255,255,.5);
}
.phone-home-indicator:focus-visible{ box-shadow:var(--focus-ring); border-radius:12px; }

.phone-minimize{
  position:absolute; top:-14px; inset-inline-end:-14px;
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-elev-2); color:var(--text); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
}
.phone-minimize:hover{ background:var(--bg-hover); }

/* ---------- מסך הנעילה ---------- */
.phone-lock{ display:flex; flex-direction:column; gap:var(--sp-2); }
.phone-lock-top{ text-align:center; padding-top:var(--sp-3); }
.phone-lock-clock{ font-family:'Karantina'; font-size:4rem; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.phone-lock-date{ color:var(--text-muted); font-size:0.875rem; margin-top:4px; }
.phone-lock-hebrew{ color:var(--gold); font-size:0.8125rem; margin-top:2px; }
.phone-lock-notifs{ display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-2); }
.phone-notif{
  display:flex; gap:10px; align-items:flex-start; text-align:start; width:100%;
  min-height:44px; padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.08); color:var(--text);
  backdrop-filter:blur(8px);
}
.phone-notif:hover{ background:rgba(255,255,255,.16); }
.phone-notif-icon{ flex:none; color:var(--gold); margin-top:2px; }
.phone-notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.phone-notif-body b{ font-size:0.8125rem; }
.phone-notif-body span{ font-size:0.75rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-unlock{
  margin-top:auto; align-self:center; min-height:44px; padding:0 var(--sp-2);
  background:transparent; border:none; color:var(--text-muted); font-size:0.8125rem;
  display:inline-flex; align-items:center; gap:6px;
}
.phone-empty{ color:var(--text-dim); text-align:center; padding:var(--sp-4) var(--sp-2); font-size:0.875rem; }
.phone-error{ color:var(--primary-2); text-align:center; padding:var(--sp-3) var(--sp-2); font-size:0.875rem; }

/* ---------- מסך הבית ---------- */
.phone-home-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2) 10px; padding-top:var(--sp-2); }
.phone-app{ background:transparent; border:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; }
.phone-app-icon{
  position:relative; width:var(--img-3); height:var(--img-3); border-radius:16px; /* 59 §2.5: 56→48 */
  display:flex; align-items:center; justify-content:center; color:var(--white);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7);
  transition:transform var(--dur) var(--ease);
}
.phone-app:hover .phone-app-icon{ transform:scale(1.06); }
.phone-app:focus-visible .phone-app-icon{ box-shadow:var(--focus-ring); }
.phone-app-label{ font-size:0.6875rem; color:var(--text); text-align:center; line-height:1.2; }
.phone-app-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--primary); color:var(--white);
  font-size:0.625rem; font-weight:800; line-height:20px; text-align:center; font-variant-numeric:tabular-nums;
}
/* גוונים לאייקונים. נגזרים מהפלטה המאושרת בלבד. */
.app-settings  .phone-app-icon{ background:linear-gradient(160deg,var(--slate-600),var(--steel)); }
.app-whatsapp  .phone-app-icon{ background:linear-gradient(160deg,var(--success),var(--success-deep)); }
.app-instagram .phone-app-icon{ background:linear-gradient(160deg,var(--primary),var(--danger-deep)); }
.app-press     .phone-app-icon{ background:linear-gradient(160deg,var(--info),var(--ocean-deep)); }
.app-contacts  .phone-app-icon{ background:linear-gradient(160deg,var(--gold),var(--warn-deep)); color:var(--on-gold); }
.app-gallery   .phone-app-icon{ background:linear-gradient(160deg,var(--primary-2),var(--danger-deep-2)); }
.app-music     .phone-app-icon{ background:linear-gradient(160deg,var(--violet),var(--violet-deep)); }

/* ---------- מסך אפליקציה ---------- */
.phone-app-bar{
  display:flex; align-items:center; gap:8px; margin:-8px -8px var(--sp-2); padding:8px;
  position:sticky; top:calc(var(--sp-2) * -1); background:var(--bg-deep); z-index:2;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.phone-back{
  width:36px; height:36px; border-radius:50%; background:var(--bg-elev-2); color:var(--text);
  border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex:none;
}
.phone-app-title{ font-family:'Karantina'; font-size:1.25rem; }

/* ---------- רשימות בסגנון iOS ---------- */
.ios-group{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden; margin-bottom:var(--sp-2); }
.ios-group-title{ font-size:0.6875rem; color:var(--text-dim); padding:8px 12px 4px; letter-spacing:.04em; }
.ios-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px; padding:8px 12px; border-top:1px solid rgba(255,255,255,.06);
  font-size:0.8125rem;
}
.ios-row:first-of-type{ border-top:none; }
.ios-val{ color:var(--text-muted); font-size:0.75rem; }
.ios-note{ font-size:0.6875rem; color:var(--text-dim); padding:6px 12px 10px; }
.ios-row input[type="range"]{ flex:1 1 auto; min-width:80px; accent-color:var(--gold); }
.ios-toggle{ appearance:none; width:44px; height:26px; border-radius:999px; background:var(--slate-700); position:relative; transition:background var(--dur) var(--ease); flex:none; }
.ios-toggle::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--white); transition:transform var(--dur) var(--ease); }
.ios-toggle:checked{ background:var(--success); }
.ios-toggle:checked::after{ transform:translateX(18px); }
.ios-toggle:focus-visible{ box-shadow:var(--focus-ring); }
.ios-danger{ width:100%; min-height:44px; background:transparent; border:none; color:var(--danger-soft); font-size:0.875rem; font-weight:600; }
.contact-row{ justify-content:space-between; }

/* ---------- וואטסאפ ---------- */
.wa-thread{ display:flex; flex-direction:column; gap:8px; padding-bottom:var(--sp-2); }
.wa-bubble{ max-width:82%; align-self:flex-start; background:var(--bg-elev-2); border-radius:14px 14px 14px 4px; padding:8px 10px; }
.wa-bubble.mine{ align-self:flex-end; background:var(--forest-deep); border-radius:14px 14px 4px 14px; }
.wa-text{ font-size:0.8125rem; line-height:1.45; }
.wa-time{ font-size:0.625rem; color:var(--text-dim); text-align:end; margin-top:2px; }
.wa-compose input{ width:100%; min-height:44px; border-radius:999px; padding:0 14px; background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.08); color:var(--text-dim); }

/* ---------- אינסטגרם ---------- */
.ig-feed{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ig-post{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden; }
.ig-head{ padding:8px 10px; font-size:0.75rem; font-weight:700; }
.ig-img{ width:100%; display:block; }
.ig-body{ padding:8px 10px; font-size:0.78125rem; color:var(--text-muted); line-height:1.5; }

/* ---------- עיתונות ---------- */
.press-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.press-item{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:10px 12px; }
.press-by{ font-size:0.75rem; color:var(--gold); font-weight:700; margin-bottom:6px; }
.press-q{ font-size:0.75rem; color:var(--text-dim); margin-top:8px; }
.press-a{ font-size:0.8125rem; line-height:1.5; }

/* ---------- גלריה ---------- */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.gal-cell{ aspect-ratio:1; overflow:hidden; background:var(--bg-elev-2); border-radius:4px; }
.gal-cell img{ width:100%; height:100%; object-fit:cover; }

/* =====================================================================
   שני מצבי התצוגה, אחרי היפוך הפריסה (0.2).
   ===================================================================== */
/* במחשב: מכשיר צף שניתן לגרירה. */
html[data-layout="desktop"] .phone-device{ margin:auto; }

/* בטלפון לאורך: כמעט מסך מלא, בכיבוד safe-area. */
html[data-layout="phone"] .phone-device{ margin:0; }
html[data-layout="phone"] .phone-frame{
  width:100vw; height:100dvh; border-radius:0; border-width:0;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
html[data-layout="phone"] .phone-notch{ display:none; }
html[data-layout="phone"] .phone-minimize{ top:max(8px, env(safe-area-inset-top)); inset-inline-end:8px; }
html[data-layout="phone"] .phone-statusbar{ cursor:default; }
html[data-layout="phone"] .phone-home-grid{ grid-template-columns:repeat(4,1fr); gap:var(--sp-3) var(--sp-2); }

/* כלל המצ'אף החי: הטלפון נפתח כלוח שאינו מכסה את השידור. */
.phone-device.is-side-panel::backdrop{ background:transparent; }
html[data-layout="desktop"] .phone-device.is-side-panel{
  margin:0; position:fixed; inset-inline-end:16px; top:auto; bottom:16px;
}
html[data-layout="phone"] .phone-device.is-side-panel .phone-frame{
  height:62dvh; margin-top:38dvh; border-radius:24px 24px 0 0;
}

/* כיבוד reduced-motion: הרכיב לא מוסיף תנועה משלו מעבר לטוקנים,
   וכלל ה-tokens.css הגלובלי מבטל את המעברים ממילא. */
@media (prefers-reduced-motion: reduce){
  .phone-app-icon, .phone-fab{ transition:none; }
}

/* =====================================================================
   משימה 45 סעיף 2.2, מסך הראיונות. עיצוב שיחה.
   ===================================================================== */
.itv-wrap{ display:flex; flex-direction:column; gap:var(--sp-2); }
.itv-title{ font-family:'Karantina'; font-size:1.5rem; color:var(--gold); }
.itv-warning{
  display:flex; align-items:flex-start; gap:8px; font-size:0.8125rem; color:var(--gold-2);
  background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.28);
  border-radius:var(--radius-sm); padding:10px 12px; margin:8px 0 0;
}
.itv-chat{ display:flex; flex-direction:column; gap:var(--sp-3); }
.itv-q-block{ display:flex; flex-direction:column; gap:8px; }
.itv-bubble{
  max-width:min(560px, 92%); padding:10px 14px; border-radius:16px 16px 16px 4px;
  background:var(--bg-elev-2); font-size:0.9375rem; line-height:1.5;
}
.itv-who{ display:block; font-size:0.6875rem; color:var(--text-dim); margin-bottom:2px; }
/* משימה 59 §7.3: תמונת הכתב בבועה. עיגול קטן צף בתחילת הבועה */
.itv-reporter-photo{
  width:var(--img-2); height:var(--img-2); border-radius:50%; object-fit:cover;
  object-position:center 26%; float:inline-start; margin-inline-end:8px;
  border:var(--photo-border-strong); background:var(--photo-plate);
}
.itv-answers{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.itv-answer{
  max-width:min(560px, 92%); text-align:start; min-height:44px;
  padding:10px 14px; border-radius:16px 16px 4px 16px;
  background:var(--bg-elev); border:1px solid rgba(255,255,255,.10); color:var(--text);
  font-size:0.875rem; line-height:1.45; transition:all var(--dur) var(--ease);
}
.itv-answer:hover{ border-color:rgba(251,191,36,.45); background:var(--steel-2); }
.itv-answer.is-picked{ background:var(--gold); color:var(--bg); border-color:var(--gold); font-weight:600; }
.itv-answer:focus-visible{ box-shadow:var(--focus-ring); }
.itv-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.itv-progress{ font-size:0.8125rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.itv-closed{ color:var(--text-muted); padding:var(--sp-3); text-align:center; }

.itv-done-head{ display:flex; align-items:center; gap:8px; font-size:1rem; color:var(--success); font-weight:600; }
.itv-eff-group{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-sm); padding:10px 12px; }
.itv-eff-title{ font-size:0.6875rem; color:var(--text-dim); letter-spacing:.04em; margin-bottom:6px; }
.itv-eff-row{ display:flex; align-items:center; justify-content:space-between; min-height:32px; font-size:0.875rem; }
.itv-eff-val{ font-weight:800; }
.itv-eff-val.up{ color:var(--success); }
.itv-eff-val.down{ color:var(--primary-2); }
.itv-eff-note{ font-size:0.71875rem; color:var(--text-dim); margin-top:6px; }
.itv-eff-none{ color:var(--text-muted); font-size:0.875rem; }

/* =====================================================================
   משימה 45 סעיף 1.2 / 2.5, פאנל המפגשים הישירים.
   ===================================================================== */
.h2h-panel{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); padding:var(--sp-2); }
.h2h-title{ font-family:'Karantina'; font-size:1.25rem; color:var(--gold); margin-bottom:8px; }
.h2h-score{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; text-align:center; }
.h2h-num{ font-family:'Karantina'; font-size:2rem; font-variant-numeric:tabular-nums; }
.h2h-mid{ color:var(--text-dim); font-size:0.75rem; }
.h2h-rows{ margin-top:var(--sp-2); display:flex; flex-direction:column; gap:4px; }
.h2h-row{ display:flex; justify-content:space-between; font-size:0.8125rem; }
.h2h-row span:last-child{ color:var(--text-muted); font-variant-numeric:tabular-nums; }
.h2h-empty{ color:var(--text-dim); text-align:center; padding:var(--sp-3); font-size:0.875rem; }

/* =====================================================================
   משימה 45 סעיף 1.3 / 2.5, מצב צופה.
   סימון ברור שאתה צופה, וכפתורי ההתערבות אינם מוצגים (והשרת דוחה אותם).
   ===================================================================== */
.spectator-banner{
  display:flex; align-items:center; gap:8px; justify-content:center;
  background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.35);
  color:var(--info); border-radius:var(--radius-chip);
  padding:6px 14px; font-size:0.8125rem; font-weight:600; margin-bottom:var(--sp-2);
}

/* =====================================================================
   משימה 45 סעיף 3.0, פס הקול.
   **הכפתור ממוקם ביחס לאייקון הטלפון כדי שלא יתנגשו**, ושניהם בסולם
   ה-z-index של סעיף 0.3. הטלפון בפינה, המוזיקה מעליו.
   ===================================================================== */
.music-fab{
  position:fixed; left:16px; bottom:80px;
  bottom:max(80px, calc(env(safe-area-inset-bottom) + 64px));
  width:44px; height:44px; border-radius:50%;
  z-index:var(--z-phone-icon);
  background:var(--bg-elev-2); color:var(--text-muted);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.music-fab:hover{ background:var(--bg-hover); color:var(--text); transform:translateY(-2px); }
.music-fab.is-playing{ color:var(--gold); border-color:rgba(251,191,36,.45); }
/* ממתין לקבצים: מעומעם, אבל **לא מוסתר ולא קישור מת** */
.music-fab.is-empty{ opacity:.45; }
.music-fab:focus-visible{ box-shadow:var(--focus-ring); }
/* בטלפון: מעל אייקון הטלפון שכבר הורם מעל הסרגל התחתון */
html[data-layout="phone"] .music-fab{ bottom:max(140px, calc(env(safe-area-inset-bottom) + 124px)); }

.mus-now{ font-family:'Karantina'; font-size:1.25rem; text-align:center; padding:var(--sp-2) 0; }
.mus-controls{ display:flex; justify-content:center; gap:var(--sp-2); }
.mus-btn{
  width:48px; height:48px; border-radius:50%; background:var(--bg-elev-2); color:var(--text);
  border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
}
.mus-btn:hover{ background:var(--bg-hover); }
.mus-vol{ display:flex; align-items:center; gap:10px; margin-top:var(--sp-2); font-size:0.78125rem; color:var(--text-muted); }
.mus-vol input[type="range"]{ flex:1 1 auto; accent-color:var(--gold); }
.mus-count{ text-align:center; font-size:0.6875rem; color:var(--text-dim); margin-top:var(--sp-2); }

/* =====================================================================
   משימה 48 סעיף 4.1, ממצא 123: החלון של מסך הראיונות.
   `InterviewsUI.openLayer` מייצרת את המבנה הזה בתוך #app-root (45ב), ולכן
   הוא נטען גם כשהדף עצמו נפתח כשכבה. אין כאן שום טוקן חדש: הצבעים,
   הרדיוסים והמרווחים כולם מ-tokens.css.
   ===================================================================== */
.itv-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.62); padding:var(--sp-2);
}
.itv-modal-card{
  background:var(--bg-elev); border:1px solid var(--glass-border);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  width:min(560px, 100%); max-height:86dvh; display:flex; flex-direction:column;
}
.itv-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-2); border-bottom:1px solid var(--glass-border);
  font-family:'Karantina'; font-size:1.375rem; color:var(--gold);
}
.itv-modal-close{
  background:none; border:0; color:var(--text-muted); cursor:pointer;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
}
.itv-modal-close:hover{ color:var(--text); }
.itv-modal-body{ padding:var(--sp-2); overflow-y:auto; overscroll-behavior:contain; }
.mu-itv-row{ display:flex; justify-content:center; }

/* =====================================================================
   משימה 91 ריצה 91א §7 (D-499): "הודעות" בטלפון = הערוץ האישי, בסגנון
   אפליקציית הודעות — רשימת שיחות, שיחה עם בועות, תשובות מובנות. טוקנים בלבד.
   ===================================================================== */
.wa-list{ display:flex; flex-direction:column; }
.wa-row{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; background:transparent; border:0; border-bottom:1px solid var(--border);
  color:var(--text); text-align:start; font:inherit; cursor:pointer; min-height:64px; }
.wa-row:hover{ background:rgba(255,255,255,.04); }
.wa-row.has-unread .wa-name{ font-weight:800; }
.wa-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--bg-elev-2); border:1px solid var(--border); }
.wa-avatar-empty{ display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:0.875rem; color:var(--text-muted); }
.wa-kind-coach{ color:var(--info); border-color:rgba(56,189,248,.4); }
.wa-kind-owner{ color:var(--gold); border-color:rgba(251,191,36,.4); }
.wa-row-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wa-row-top, .wa-row-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wa-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-preview{ color:var(--text-muted); font-size:0.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-unread{ background:var(--success); color:var(--success-bg-2); font-size:0.65625rem; font-weight:800; min-width:18px; height:18px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; flex:none; }
.wa-role{ font-size:0.6875rem; color:var(--text-dim); }
.wa-head{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); background:var(--bg-elev-2); position:sticky; top:0; z-index:2; }
.wa-head .wa-avatar{ width:36px; height:36px; }
.wa-head-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.wa-back, .wa-card-link{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; flex:none; }
.wa-day{ display:flex; justify-content:center; margin:8px 0; }
.wa-day > span{ font-size:0.6875rem; color:var(--text-dim); background:var(--bg-elev-2); border-radius:99px; padding:2px 10px; }
.wa-thread{ display:flex; flex-direction:column; gap:6px; padding:10px; overflow-y:auto; max-height:52vh; }
.wa-bubble{ max-width:84%; align-self:flex-start; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:8px 12px; }
.wa-bubble.mine{ align-self:flex-end; background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.3); border-radius:14px 14px 4px 14px; }
.wa-text{ font-size:0.9375rem; line-height:1.45; white-space:pre-wrap; }
.wa-bubble .wa-time{ font-size:0.65625rem; color:var(--text-dim); margin-top:4px; text-align:end; }
.wa-replies{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 10px; border-top:1px solid var(--border); }
.wa-reply{ font:inherit; font-size:0.84375rem; color:var(--text); background:var(--bg-elev-2); border:1px solid rgba(251,191,36,.35); border-radius:var(--radius-chip); padding:8px 14px; min-height:40px; cursor:pointer; }
.wa-reply:hover{ border-color:var(--gold); }
.wa-reply:disabled{ opacity:.5; cursor:default; }
.wa-compose input:disabled{ opacity:.7; }

/* ריצה 91ג §16ב (D-521): מתג האפקטים הקוליים בפאנל המוזיקה */
.mus-sfx{ display:flex; align-items:center; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-2); }
.mus-sfx-label{ font-size:0.75rem; color:var(--text-dim); }

/* משימה 92 §4: שדות קלט בתוך הטלפון נשארים ברי-בחירה */
.phone-frame input, .phone-frame textarea, .phone-frame [contenteditable]{ user-select:text; -webkit-user-select:text; }

/* =====================================================================
   משימה 95 ריצה 95ב §3 (D-539): "הטלפון טלפון אמיתי".
   בלוק אחד, בסוף הקובץ, שגובר על הכללים שלמעלה בסדר הקסקדה. טוקנים
   בלבד; אין צבע חדש ואין גופן חדש. כל ההנפשות ב-CSS, ומכבדות
   prefers-reduced-motion וגם את `.is-reduced` (Shell.REDUCED).
   ===================================================================== */

/* §3.6 — אין בחירת טקסט בשום מקום במכשיר, והידיות הנגררות אינן גוללות */
.phone-device, .phone-frame, .phone-screen, .phone-statusbar, .phone-home-indicator, .phone-minimize{
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.phone-statusbar, .phone-home-indicator{ touch-action:none; }
.phone-frame{ will-change:transform; }
.phone-frame.is-swipe-armed{ box-shadow:0 30px 60px -20px rgba(0,0,0,.85), inset 0 0 0 2px rgba(251,191,36,.45); }
.phone-minimize{ z-index:3; cursor:pointer; }

/* §3.4 — שורת המצב: שעון + יום העונה משמאל, פעמון + אות + סוללה מימין */
.phone-status-left{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.phone-status-day{ font-size:0.65625rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.phone-status-right{ gap:8px; }
.phone-bell{
  width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; padding:0; position:relative; cursor:pointer;
  touch-action:manipulation;
}
.phone-bell:hover{ background:rgba(255,255,255,.10); }
.phone-bell:focus-visible{ box-shadow:var(--focus-ring); }
.phone-bell.is-muted{ color:var(--text-dim); }
.phone-bell.is-muted::after{
  content:''; position:absolute; left:50%; top:50%; width:20px; height:2px; background:var(--primary-2);
  transform:translate(-50%,-50%) rotate(-45deg); border-radius:1px;
}
html[data-layout="phone"] .phone-statusbar{ cursor:grab; }

/* §3.1 — מסך הנעילה: הרשימה גוללת לבדה, המסך כולו הוא ידית ההחלקה למעלה */
.phone-screen.phone-lock{ overflow:hidden; touch-action:none; }
.phone-lock-notifs{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.phone-lock-season{ color:var(--text-muted); font-size:0.75rem; margin-top:6px; font-variant-numeric:tabular-nums; }
.phone-lock-mute{
  display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 10px; border-radius:var(--radius-chip);
  background:rgba(255,255,255,.08); color:var(--text-dim); font-size:0.6875rem;
}
.phone-notif-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.phone-notif-head b{ font-size:0.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone-notif-meta{ flex:none; font-size:0.625rem; color:var(--text-dim); }
.phone-notif-text{ font-size:0.75rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-notif-body{ flex:1 1 auto; }
.phone-notif:active{ background:rgba(255,255,255,.2); }
.phone-screen.is-unlock-armed .phone-unlock{ color:var(--gold); }
.phone-unlock{ cursor:pointer; touch-action:none; }

/* §3.2 — מסך הבית: אייקון בריבוע מעוגל, תווית, תג */
.phone-app{ cursor:pointer; }
.phone-app-icon{ border-radius:14px; box-shadow:0 8px 18px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18); }
.phone-app:active .phone-app-icon{ transform:scale(.94); }
.phone-app-badge{ box-shadow:0 0 0 2px var(--bg-deep); }

/* §3.8 — הסושיאל: פוסטים של שחקנים, אוהדים והמועדון */
.ig-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; }
.ig-avatar{
  flex:none; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elev-2); border:1px solid var(--border); font-size:0.6875rem; font-weight:800; color:var(--text-muted);
}
.ig-avatar.ig-kind-player{ color:var(--info); border-color:rgba(56,189,248,.4); }
.ig-avatar.ig-kind-fan{ color:var(--gold); border-color:rgba(251,191,36,.4); }
.ig-avatar.ig-kind-club{ color:var(--success); border-color:rgba(34,197,94,.4); }
.ig-who{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.ig-name{ display:flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:700; min-width:0; }
.ig-name a{ color:inherit; text-decoration:none; }
.ig-tag{ font-size:0.625rem; font-weight:600; color:var(--text-dim); background:rgba(255,255,255,.08); border-radius:var(--radius-chip); padding:1px 7px; }
.ig-post.ig-kind-player .ig-tag{ color:var(--info); }
.ig-post.ig-kind-fan .ig-tag{ color:var(--gold); }
.ig-post.ig-kind-club .ig-tag{ color:var(--success); }
.ig-sub{ font-size:0.6875rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-body{ color:var(--text); }
.wa-kind-league{ color:var(--gold); border-color:rgba(251,191,36,.4); }

/* §3.3 — ההנפשות. CSS בלבד, ללא ספריות. */
@keyframes ph-open{ from{ opacity:0; transform:scale(.88) translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes ph-close{ from{ opacity:1; transform:none; } to{ opacity:0; transform:scale(.9) translateY(28px); } }
@keyframes ph-backdrop-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ph-in-up{ from{ opacity:0; transform:translateY(48px); } to{ opacity:1; transform:none; } }
@keyframes ph-in-zoom{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:none; } }
@keyframes ph-in-back{ from{ opacity:0; transform:scale(1.08); } to{ opacity:1; transform:none; } }
@keyframes ph-in-fade{ from{ opacity:0; } to{ opacity:1; } }
.phone-device.is-opening .phone-frame{ animation:ph-open 300ms var(--ease) both; }
.phone-device.is-opening::backdrop{ animation:ph-backdrop-in 300ms var(--ease) both; }
.phone-device.is-closing .phone-frame{ animation:ph-close 240ms var(--ease) both; pointer-events:none; }
.phone-device.is-closing .phone-minimize{ opacity:0; transition:opacity 200ms var(--ease); }
.phone-screen.ph-in-up{ animation:ph-in-up 320ms var(--ease) both; }
.phone-screen.ph-in-zoom{ animation:ph-in-zoom 300ms var(--ease) both; }
.phone-screen.ph-in-back{ animation:ph-in-back 260ms var(--ease) both; }
.phone-screen.ph-in-fade{ animation:ph-in-fade 220ms var(--ease) both; }
.phone-fab-badge.badge-pop{ animation:ph-badge-pop 360ms var(--ease); }
@keyframes ph-badge-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* תנועה מופחתת: הכול מיידי. גם ה-media query וגם הדגל של השלד. */
@media (prefers-reduced-motion: reduce){
  .phone-device.is-opening .phone-frame, .phone-device.is-opening::backdrop, .phone-device.is-closing .phone-frame,
  .phone-screen.ph-in-up, .phone-screen.ph-in-zoom, .phone-screen.ph-in-back, .phone-screen.ph-in-fade, .phone-fab-badge.badge-pop{ animation:none; }
  .phone-frame, .phone-screen, .phone-app-icon{ transition:none; }
}
.phone-device.is-reduced.is-opening .phone-frame, .phone-device.is-reduced.is-opening::backdrop, .phone-device.is-reduced.is-closing .phone-frame,
.phone-device.is-reduced .phone-screen.ph-in-up, .phone-device.is-reduced .phone-screen.ph-in-zoom,
.phone-device.is-reduced .phone-screen.ph-in-back, .phone-device.is-reduced .phone-screen.ph-in-fade{ animation:none; }

/* בטלפון: ה-X נשאר בהישג יד גם כשהמסגרת זזה עם האצבע */
html[data-layout="phone"] .phone-minimize{ z-index:4; }

/* תיקונים אחרי המדידה בדפדפן (30.08.2026, Playwright בשני המכשירים):
   1. `hidden` על שבב ההשתקה ועל יום העונה גובר על display של המחלקה.
   2. במסגרת של 340px יום העונה נכנס מתחת לחריץ: החריץ צר יותר, הריווח קטן
      יותר, ובמקרה הקצה הטקסט נחתך בשלוש נקודות ולא נעלם.
   3. בטלפון ה-X יושב מעל קבוצת האות והסוללה: שורת המצב מפנה לו מקום. */
.phone-lock-mute[hidden], .phone-status-day[hidden], .phone-lock-season[hidden]{ display:none; }
.phone-notch{ width:96px; }
.phone-statusbar{ padding:0 14px; }
.phone-status-left{ gap:6px; max-width:calc(50% - 50px); overflow:hidden; }
.phone-status-day{ font-size:0.625rem; overflow:hidden; text-overflow:ellipsis; }
html[data-layout="phone"] .phone-statusbar{ padding-inline-end:72px; padding-inline-start:18px; }
html[data-layout="phone"] .phone-status-left{ max-width:none; }
/* מדידה שנייה במחשב (340px): "יום 8 בעונה" עדיין נחתך; החריץ מתכווץ ל-84px והקבוצה מקבלת את המקום */
html[data-layout="desktop"] .phone-notch{ width:84px; }
html[data-layout="desktop"] .phone-status-left{ max-width:calc(50% - 44px); }
html[data-layout="desktop"] .phone-status-time{ letter-spacing:0; }
/* המדידה העצמית של יום העונה (phone.js renderSeasonDay) דורשת שהפריט יתכווץ בעצמו: min-width:0 */
.phone-status-day{ min-width:0; flex:0 1 auto; }