/* ════════════════════════════════════════════════════════════════════════════════════════════════
   programs.css — شاشات البرامج: القايمة · المنشئ · محرر التمرين · روابط الكوتش · منتقي الفيديو.
   كل لون ومسافة ونصف قطر من tokens.css؛ الأرقام الثابتة هنا مقاسات صور بس (زي components.css).
   الاتجاهيات منطقية (inline-start/end) — الصفحة عربية.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── قايمة البرامج ── */
.pgCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s5)}
.pgCard{margin:0;display:flex;flex-direction:column;min-width:0}
.pgCard .acts{margin-top:auto;padding-top:var(--s5)}

/* ── المنشئ ── */
.pgWeeks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s6) 0 var(--s5)}
/* عمودين على الشاشات الواسعة، عمود واحد تحت 900 (نفس نقطة قطع layout.css) */
.pgDays{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:900px){ .pgDays{grid-template-columns:1fr} }
.pgDay{background:var(--card);border:1px solid var(--bd);border-radius:var(--r6);padding:var(--s6) var(--s7);
  box-shadow:var(--sh);min-width:0}
/* يوم الراحة باهت — لسه شغّال بالمفتاح، بس واضح إنه مش بيتعرض للمتدرب */
.pgDay.rest{opacity:.6;background:var(--raise);box-shadow:none}
.pgDay .dn{font-weight:900;font-size:var(--fz-l)}
.pgExList{margin-top:var(--s4)}
.pgEx{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--bd);min-width:0}
.pgEx:last-child{border-bottom:0}
.pgEx .acts{display:flex;gap:var(--s1);flex:none}

/* بوستر التمرين (صف) — والمربّع البديل `.ph` بنفس المقاس عشان الأعمدة تفضل متحاذية */
.pgPoster{width:72px;height:48px;border-radius:var(--r2);object-fit:cover;background:var(--field);
  border:1px solid var(--bd);flex:none}
/* بوستر أكبر — محرر التمرين ومنتقي الفيديو */
.pgVPoster{width:96px;height:64px;border-radius:var(--r2);object-fit:cover;background:var(--field);
  border:1px solid var(--bd);flex:none}

/* ── محرر التمرين ── */
.pgVid{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);background:var(--field);
  border-radius:var(--r4);margin-top:var(--s4);min-width:0}
.pgPick{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;margin-top:var(--s4);
  padding:var(--s7);border:1.5px dashed var(--p-line);border-radius:var(--r4);background:var(--p-soft);
  color:var(--p-deep);font-weight:800;font-size:var(--fz-b)}
.pgPick:hover:not(:disabled){filter:brightness(.96);transform:none}
.pgAlt{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--bd);
  flex-wrap:wrap;min-width:0}
.pgAlt:last-of-type{border-bottom:0}

/* ── روابط الكوتش ── */
.pgWarn{background:var(--am-soft);color:var(--am);font-weight:800;font-size:var(--fz-sm);border-radius:var(--r2);
  padding:var(--s3) var(--s5);margin-bottom:var(--s5);line-height:1.7}
.pgLinkBox{background:var(--g-soft);border:1px solid var(--g);border-radius:var(--r4);padding:var(--s5);margin-top:var(--s5)}
/* الرابط لاتيني — اتجاهه يسار-يمين جوّه صفحة عربية */
.pgLinkBox input{direction:ltr;text-align:start;font-size:var(--fz-sm);background:var(--card)}
.pgLinkRow{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.pgLinkRow:last-child{border-bottom:0}

/* ── منتقي الفيديو ── */
.vpList{background:var(--card);border:1px solid var(--bd);border-radius:var(--r4);padding:var(--s2);margin-top:var(--s4);max-height:60vh;overflow:auto}
/* الصف زرار حقيقي (كيبورد + قارئ شاشة) بس شكله صف قايمة — نفس نمط `.it` في components.css */
.vpRow{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:start;background:transparent;border:0;
  border-bottom:1px solid var(--bd);border-radius:0;padding:var(--s4) var(--s2);cursor:pointer;font-family:inherit;
  font-size:inherit;font-weight:inherit;color:inherit;transition:background .12s}
.vpRow:hover:not(:disabled){background:var(--raise);transform:none}
.vpRow:last-child{border-bottom:0}
.vpRow .nm{font-weight:800;font-size:var(--fz-m)}

.ph{display:inline-block}
/* الشارات ما تتكسرش جوّه نفسها */
.pgEx .bdg,.pgVid .bdg{white-space:nowrap}
/* موبايل: صف التمرين بيلتف — الأزرار الأربعة تحت الاسم بدل ما تخنقه (~87px كانت فاضلة للاسم على 375px) */
@media (max-width:560px){
  .pgEx{flex-wrap:wrap}
  .pgEx .acts{width:100%;justify-content:flex-end}
  .pgPoster{width:56px;height:38px}
  .pgVid{flex-wrap:wrap}
}