/* شهاب — video-watch: الفيديو على قواعد التقرير (css/pages/article.css).

   الكلمات على اليمين: العنوان، الوصف، البايلاين مع الحفظ والمشاركة، الوسوم.
   والمشغّل لاصق على الشمال مكان لوحة الصور، وتحته فصوله في صف واحد مكان
   تعليق الصورة؛ العمود ده أعرض من عمود النص لأن الفيديو هو القصة، والعمودين
   بيخلصوا تقريبًا على نفس السطر. تحت 1000px عمود واحد بترتيب الـDOM:
   العنوان، المشغّل (من حافة لحافة على الموبايل) وفصوله، الوسوم.
   بعد المقال: باند «اقرأ القصة كاملة» (الباند الكحلي الوحيد) وفيديوهات ذات صلة.
   طبقة المشغّل (الفصول، المدة، المشغّل المصغّر) في js/watch.js. */

/* ================================================================ layout */
.sh-vw{grid-template-columns:minmax(0,560px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"head pane" "foot pane"}
.sh-vw > .sh-art__head{grid-area:head;min-width:0}
.sh-vw > .sh-art__foot{grid-area:foot;min-width:0}
.sh-vw__pane{grid-area:pane;align-self:start;position:sticky;top:calc(var(--sh-compact-h,100px) + 26px);min-width:0}

/* ================================================================== head */
.sh-vw__dur{display:inline-flex;align-items:center;gap:6px}
.sh-vw__dur .sh-i{font-size:11px}
.sh-vw__dur [data-sh-watch-duration]{direction:ltr;unicode-bidi:isolate}
.sh-vw .sh-art__share{flex-basis:100%}   /* the byline keeps one line; save and share sit beneath it */
/* saving is not sharing: the bookmark leads the row, one step apart */
.sh-vw__save{border:0;padding:0;cursor:pointer;margin-inline-end:8px}
.sh-vw__save[aria-pressed="true"]{background:var(--sh-navy);color:#fff}

/* ============================================================== chapters */
/* the chapters are the player's caption: one row under the frame, the time
   above the name, the current one blue; a press jumps and plays */
.sh-vw__chapters{margin-top:12px}
.sh-vw__ch-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:0 20px}
.sh-vw__ch-list > li{min-width:0}
.sh-vw__ch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:4px 0;border:0;background:none;text-align:start;font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.5;color:var(--sh-ink);cursor:pointer;transition:color .16s ease}
.sh-vw__ch-t{font-size:12.5px;font-weight:800;color:var(--sh-mute);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-vw__ch-l{max-width:100%;text-wrap:pretty}
@media (hover:hover){.sh-vw__ch:hover{color:var(--sh-blue)}}
.sh-vw__ch[aria-current="true"],.sh-vw__ch[aria-current="true"] .sh-vw__ch-t{color:var(--sh-blue)}
.sh-vw__ch:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}

/* ================================================================ player */
/* the frame keeps the 16:9 hole, so the player can dock without moving the page */
.sh-watch__frame{position:relative;aspect-ratio:16/9;background:#000}
.sh-watch__player{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
[data-mini] .sh-vw__pane{z-index:9800}   /* a sticky pane is its own stacking context: lift it, or the docked player paints under the page below */
[data-mini] .sh-watch__player{position:fixed;inset:auto 16px 16px auto;width:min(380px,calc(100vw - 32px));height:auto;aspect-ratio:16/9;z-index:9800;box-shadow:0 24px 50px -18px rgba(0,0,0,.85)}
[data-mini] .sh-watch__frame::after{content:"يعرض في المشغّل المصغّر";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sh-navy-2);color:var(--sh-on-dark-60);font-family:var(--sh-font);font-size:13px;font-weight:700}
.sh-watch__mini-btn{position:absolute;top:8px;z-index:80;width:30px;height:30px;border:0;background:rgba(10,26,51,.85);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .16s ease}
.sh-watch__mini-btn[hidden]{display:none}
@media (hover:hover){.sh-watch__mini-btn:hover{background:var(--sh-blue)}}
.sh-watch__mini-btn:focus-visible{outline:2px solid var(--sh-sky);outline-offset:1px}
.sh-watch__mini-btn--close{inset-inline-end:8px}
.sh-watch__mini-btn--back{inset-inline-end:44px}

/* =============================================================== related */
.sh-vw-rel{padding-bottom:56px}
.sh-vw-rel .sh-art-rel__pic{aspect-ratio:16/9}   /* the poster whole */
.sh-vw-play{position:absolute;inset:0;z-index:2;margin:auto;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(10,26,51,.5);color:#fff;display:grid;place-items:center;font-size:12px;transition:background .2s ease,border-color .2s ease}
.sh-vw-play .sh-i{translate:1px 0}   /* the triangle's optical centre (video.css .sh-vx-play) */
@media (hover:hover){.sh-art-rel__card:hover .sh-vw-play{background:var(--sh-blue);border-color:var(--sh-blue)}}
@media (min-width:1000px){.sh-vw-rel .sh-art-rel__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:999px){.sh-vw-rel .sh-art-rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================ breakpoints */
@media (max-width:1200px){
  .sh-vw{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
}
@media (max-width:999px){
  .sh-vw__pane{position:static;margin-top:24px}
}
@media (max-width:760px){
  .sh-vw-play{width:30px;height:30px;font-size:10px}
}
@media (max-width:640px){
  .sh-vw__pane{margin:20px calc(var(--sh-gutter,16px) * -1) 0;width:calc(100% + var(--sh-gutter,16px) * 2);max-width:none}   /* edge to edge, like the report's lead picture */
  .sh-vw .sh-art__head .sh-art__share{display:flex}   /* the report moves sharing to its tool row; this page has no tool row */
  .sh-vw__save{margin-inline-end:4px}
  .sh-vw__chapters{margin-top:10px;padding-inline:var(--sh-gutter,16px)}
  .sh-vw__ch-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
  .sh-vw__ch{font-size:13px}
  .sh-vw-rel{padding-bottom:44px}
  [data-mini] .sh-watch__player{inset:auto 12px 12px auto;width:calc(100vw - 24px)}
}

/* A press has to answer on a touch screen, where :hover never fires: the ground
   steps to navy for as long as the control is held. No transform and no radius —
   the timing is the colour transition the control already carries. */
body[data-sh-page="video-watch"] :where(.sh-more,.sh-pager__btn,.sh-chip,.sh-tag,.sh-btn):active{
  background:var(--sh-navy);color:#fff;border-color:var(--sh-navy);
}

/* the burger and its chevron live in the shared css/responsive.css, which feeds
   the four locked pages, so their guard is written here, per page */
@media (prefers-reduced-motion:reduce){
  body[data-sh-page="video-watch"] .sh-nav-toggle span,
  body[data-sh-page="video-watch"] header nav .sh-menu > a > span:last-child{transition:none}
  body[data-sh-page="video-watch"] .sh-vw__ch,
  body[data-sh-page="video-watch"] .sh-vw-play,
  body[data-sh-page="video-watch"] .sh-watch__mini-btn{transition:none}
}
@media print{
  .sh-vw__pane,.sh-vw__chapters,.sh-vw-rel{display:none!important}
}