/* شهاب — CMS additions (additive, never an edit of the theme's own sheets).

   Rules for the screens the static theme never designed: the client-authored
   page bodies («محتوى الصفحات»), the live-stream strip under the masthead,
   the shared poll widget, and the odd control the CMS adds to a theme page.
   Loaded after brief.css and before the generated type.css / ltr.css, so the
   theme's own cascade stays what tools/chrome.py built. */

/* ---- the live-stream strip (the shared partial, inside the theme column) -- */
.sh-live-strip{margin:16px auto 0;max-width:1400px;padding:0 var(--sh-gutter,32px)}
.sh-live-strip .live-stream-slot{margin:0 0 8px}
.sh-live-strip .live-stream-slot__player{max-width:960px;margin:0 auto}

/* ---- client-authored HTML («محتوى الصفحات») in the theme's reading measure -- */
.sh-prose{max-width:none}
.sh-prose>*+*{margin-top:var(--sh-para,26px)}
.sh-prose h2,.sh-prose h3{color:var(--sh-navy,#0a1a33);font-weight:800;line-height:1.5}
.sh-prose a{color:var(--sh-blue,#1b5aa6)}
.sh-prose img{max-width:100%;height:auto}

/* ---- the ad boxes carry a creative instead of the placeholder note -------- */
.sh-ad img{display:block;max-width:100%;max-height:100%;margin:0 auto;object-fit:contain}

/* ---- the shared poll widget in the house palette --------------------------- */
.poll-widget{--pw-accent:#1b5aa6;border-radius:0}

/* ---- a half-width desk standing alone in its row takes the whole row ------ */
.sh-desk2--solo{grid-template-columns:minmax(0,1fr)}

/* ---- the coverage page's standing body (the post's own HTML) --------------- */
.sh-cov-body{max-width:none}
.sh-cov-body>*+*{margin-top:var(--sh-para,22px)}
.sh-cov-body p{font-size:var(--sh-fs-16,16px);line-height:1.9;color:var(--sh-ink-2,#334155)}
.sh-cov-body h2,.sh-cov-body h3,.sh-cov-body h4{color:var(--sh-navy,#0a1a33);font-weight:800;line-height:1.5;text-align:start}
.sh-cov-body img{max-width:100%;height:auto}

/* ---- the coverage timeline's richer entries (features.live_coverage) --------
   An entry is an <article> here (a player cannot sit inside a link), so the
   theme's link hover is undone. Pictures, clips and «شاهد الفيديو» wear the
   theme's own entry shapes (span-25/26/28); a statement is the entry's line
   in the serif with its speaker under it; an extended coverage's figures
   take the key points' place. */
article.sh-cov-entry:hover{color:var(--sh-ink)}
.sh-cov-pics{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:16px;max-width:680px}
.sh-cov-pics>.sh-coverage-timeline__span-25{margin-top:0;max-width:none}
.sh-cov-pics--1{grid-template-columns:1fr}
.sh-cov-pics--3>:first-child{grid-column:1/-1}
.sh-cov-video{display:block;width:100%;max-width:680px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.sh-cov-video .sh-coverage-timeline__span-25{max-width:none}
.sh-cov-video__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(10,26,51,.78);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);transition:background .15s}
.sh-cov-video__play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;transform:translateX(3px)}
.sh-cov-video:hover .sh-cov-video__play,.sh-cov-video:focus-visible .sh-cov-video__play{background:var(--sh-blue)}
.sh-cov-frame{display:block;width:100%;max-width:680px;margin-top:16px;border:0;background:#000}
.sh-cov-frame--file,.sh-cov-frame--youtube,.sh-cov-frame--facebook{aspect-ratio:16/9}
.sh-cov-frame--telegram{background:none}
.sh-cov-quote{font-family:var(--devlo-font, var(--sh-serif));font-size:1.1em;line-height:1.8}
.sh-cov-quote__by{display:block;margin-top:8px;font-size:13px;font-weight:800;color:var(--sh-blue)}
.sh-cov-via{font-weight:400;color:var(--sh-mute)}
.sh-cov-figs{display:grid;gap:10px;margin:0 0 24px}
.sh-cov-figs__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--sh-line)}
.sh-cov-figs__label{margin:0;font-size:14px;line-height:1.6;color:var(--sh-ink-2)}
.sh-cov-figs__value{margin:0;font-size:22px;font-weight:800;color:var(--sh-navy);white-space:nowrap}

/* ---- an embed the video player cannot open (a pasted iframe, a SoundCloud) -- */
.sh-watch__embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* ---- «الموجز الصوتي»: the theme hides its masthead button on phones by the
   literal newsletter.html href (responsive.css), which a route never has ---- */
@media (max-width:900px){header .sh-brief-btn[data-sh-brief-open]{display:none!important}}

/* ---- «الآن»: the stage when nothing is on air, and a framed provider page -- */
.sh-now__frame>img.sh-now__player,.sh-now__frame>iframe.sh-now__player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.sh-now__frame>.sh-now__notice:not([hidden]){display:flex}
.sh-now__frame>.sh-now__notice{align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:rgba(10,26,51,.86);color:#fff;font-size:14px;line-height:1.6}

/* ---- «مكتبة الصور»: a wall holding a single album ---------------------
   The lead spans two rows the other tiles size; alone, nothing sizes them
   and it collapsed to a sliver. It takes the tiles' own shape instead. */
.sh-gal__wall>.sh-gal__tile--lead:only-child{grid-row:auto;aspect-ratio:3/4}

/* ---- the hero and the section under it ----
   The theme gives the hero 32px above and nothing below, and the section
   that follows (the hubs: «ملخص الأقسام», «الأكثر قراءة») opens at its own
   top edge, so its heads sat on the band's bottom edge at every width. The
   gap is the hero's own, whichever section the dashboard puts after it: the
   theme's 40px lead-in above a section head, 32px on a phone, where the band
   runs edge to edge. Both hero shapes (the accordion and the proposals) share
   the section. */
section.sh-index-hero__section-1{padding-bottom:40px}
@media (max-width:640px){section.sh-index-hero__section-1{padding-bottom:32px}}

/* ---- the hero on a phone (≤640px): the accordion stands upright -----------
   On a desktop the hero is a row of spines round one open story (app.js).
   Below 640px it is the same accordion turned upright: the open story on top
   of the others laid flat as bars (the number, a two-line headline, the
   picture dimmed behind), and a tap on a bar opens it in place (js/cms.js);
   a tap on the open story reads it. The band starts where the masthead ends
   (no gap: a strip of page between two edge-to-edge bands read as a stray
   white line, the more so under «سماء القدس» colours) and fills the first
   screen (100svh - 196px, between 420 and 600px), and never moves once
   painted: nothing in it is measured by script.
   responsive.css draws the phone hero (a card and four rows) with
   !important rules inside @layer responsive, and a layered !important
   outranks every unlayered one, so this block sits in that same layer,
   after it, with longer selectors. The tablet layout (641-900px) stays the
   theme's. Hooks: [data-sh-hero-open] on the open story (the server marks
   the first) and --sh-hero-n on the band (how many stories share it).
   --sh-hero-k carries the reader's text size (type.css factors) into the
   sizes set here, which type.css itself cannot reach. */
html[data-sh-type="sm"]{--sh-hero-k:.92}
html[data-sh-type="lg"]{--sh-hero-k:1.12}
@layer responsive{
@media (max-width:640px){
  section.sh-index-hero__section-1{padding-top:0!important}
  section.sh-index-hero__section-1>div[data-sh-hero]{
    --sh-hero-fill:clamp(420px,calc(100svh - 196px),600px);
    --sh-hero-bar:clamp(48px,calc(var(--sh-hero-fill) * .095),56px);
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;
    height:var(--sh-hero-fill)!important;max-width:none!important;margin-inline:calc(var(--sh-gutter,16px) * -1)!important;
    overflow:hidden!important;background:var(--sh-navy)!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]{
    position:relative!important;display:block!important;flex:0 0 var(--sh-hero-bar)!important;
    min-width:0!important;min-height:var(--sh-hero-bar)!important;height:auto!important;padding:0!important;
    overflow:hidden!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;
    background:var(--sh-navy-2)!important;color:#fff!important;-webkit-tap-highlight-color:transparent;
    transition:flex-grow .9s cubic-bezier(.45,.05,.2,1)!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]:last-of-type{border-bottom:0!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]{flex-grow:1!important}

  /* the picture: dimmed behind a bar, whole in the open story */
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span:first-child{
    position:absolute!important;inset:0!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;
    opacity:.42!important;transform:none!important;filter:none!important;transition:opacity .9s ease!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span:first-child{opacity:1!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span:nth-child(2){
    display:block!important;position:absolute!important;inset:0!important;background:var(--sh-navy-2)!important;
    opacity:.45!important;transition:opacity .9s ease!important;pointer-events:none}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span:nth-child(2){opacity:0!important}

  /* the spine laid flat: the number behind its rule, the headline on two lines */
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span.sh-index-hero__span-3,
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span.sh-index-hero__span-16{
    display:flex!important;position:absolute!important;top:0!important;bottom:auto!important;inset-inline:0!important;
    width:auto!important;height:var(--sh-hero-bar)!important;flex-direction:row!important;align-items:center!important;
    justify-content:flex-start!important;gap:12px!important;padding:0 16px!important;
    opacity:1!important;transition:opacity .35s ease!important;pointer-events:none}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span.sh-index-hero__span-3,
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span.sh-index-hero__span-16{opacity:0!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] .sh-index-hero__span-4{
    flex:none!important;width:auto!important;padding:0!important;padding-inline-end:12px!important;border:0!important;
    border-inline-end:1px solid rgba(255,255,255,.4)!important;font-size:12px!important;line-height:22px!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] .sh-index-hero__span-5{
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;
    writing-mode:horizontal-tb!important;transform:none!important;max-height:none!important;white-space:normal!important;
    font-size:max(12px,calc(13.5px * var(--sh-hero-k,1)))!important;line-height:1.45!important;letter-spacing:0!important}

  /* the credit tag rides the open story's corner */
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span.sh-index-hero__span-6,
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>span.sh-index-hero__span-17{
    display:flex!important;position:absolute!important;top:14px!important;bottom:auto!important;
    inset-inline-start:14px!important;inset-inline-end:auto!important;z-index:3!important;
    opacity:0!important;transition:opacity .3s ease!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span.sh-index-hero__span-6,
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>span.sh-index-hero__span-17{
    opacity:1!important;transition:opacity .5s ease .55s!important}

  /* the caption is as tall as the open story, so a bar opening reveals it
     instead of sliding it up; the scrim is its own background */
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div{
    display:flex!important;flex-direction:column!important;justify-content:flex-end!important;gap:0!important;
    position:absolute!important;top:0!important;bottom:auto!important;inset-inline:0!important;
    height:calc(var(--sh-hero-fill) - (var(--sh-hero-n,5) - 1) * var(--sh-hero-bar))!important;
    min-width:0!important;padding:0 16px 16px!important;
    background:linear-gradient(to top,rgba(10,26,51,.97) 0%,rgba(10,26,51,.88) 26%,rgba(10,26,51,.45) 52%,rgba(10,26,51,0) 72%)!important;
    opacity:0!important;transform:none!important;pointer-events:none!important;transition:opacity .25s ease!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel][data-sh-hero-open]>div{
    opacity:1!important;transition:opacity .6s ease .5s!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>div.sh-index-hero__div-3{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px 10px!important;
    order:0!important;margin:0!important;white-space:normal!important;font-size:12px!important;line-height:1.4!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>div.sh-index-hero__div-3>span.sh-index-hero__span-7,
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>div.sh-index-hero__div-3>span.sh-index-hero__span-18{
    display:inline-block!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>div.sh-index-hero__div-3>span.sh-index-hero__span-9{
    display:inline!important;margin:0!important;margin-inline-start:auto!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>div.sh-index-hero__div-4{
    display:block!important;margin:10px 0 0!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] h2.sh-index-hero__h1-1{
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;
    margin:0 0 12px!important;font-size:calc(21px * var(--sh-hero-k,1))!important;line-height:1.5!important;
    font-weight:700!important;color:#fff!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] .sh-index-hero__span-10{
    display:inline-flex!important;align-items:center!important;gap:8px!important;padding:0!important;font-size:12.5px!important}
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] .sh-index-hero__span-11{
    display:block!important;flex:none;width:13px;aspect-ratio:100/41.59;background:currentColor;
    -webkit-mask:url(../assets/images/mark-arrow-round.svg) center/contain no-repeat;
    mask:url(../assets/images/mark-arrow-round.svg) center/contain no-repeat}
  html[dir="ltr"] section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel] .sh-index-hero__span-11{transform:scaleX(-1)}
  /* the desktop's autoplay line has no job here */
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>div>span.sh-index-hero__span-12{display:none!important}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel],
  section.sh-index-hero__section-1>div[data-sh-hero]>a[data-sh-hero-panel]>*{transition:none!important}
}
}

/* ---- the writer page's pager (pages/author.css), for every page that prints it; «السابق» is a real link from page two ---- */
.sh-au-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:44px;font-family:var(--devlo-font, var(--sh-font));font-size:16px;font-weight:700}
.sh-au-pager .sh-pager__btn{width:44px;height:44px}
.sh-au-pager__prev{color:var(--sh-grey-3);padding:8px 14px;pointer-events:none}
a.sh-au-pager__prev{display:inline-flex;align-items:center;color:var(--sh-blue);pointer-events:auto}
.sh-au-pager__cur,.sh-au-pager__cur:hover{color:#fff}
.sh-au-pager__cur{width:44px;height:44px;display:grid;place-items:center;background:var(--sh-blue);font-variant-numeric:tabular-nums}
.sh-au-pager__next{display:inline-flex;align-items:center;gap:7px;color:var(--sh-blue);padding:8px 14px}
@media (hover:hover){.sh-au-pager__next:hover{gap:11px}}
@media (max-width:640px){
  .sh-au-pager{gap:4px}
  .sh-au-pager .sh-au-pager__prev{display:none}
  .sh-au-pager__next{min-height:44px}
}

/* ---- the audio brief's bar on touch: buttons a finger can hit ---- */
@media (max-width:720px),(pointer:coarse){
  .bf-b{position:relative;width:40px;height:40px}
  .bf-b::before{content:"";position:absolute;inset:-3px}
  .bf-b-go{width:44px;height:44px}
}

/* ---- «الموجز الصوتي»: the companion bar in light blue, and its tuck ----------
   brief.css draws the bar on white paper; the client asked for a light blue
   (2026-09-17). The ground is a shallow blue-tinted gradient with a sky
   hairline and a soft lift; every word on it is navy or the blue tinted from
   it (the muted 3f5f8a is 5.3:1 on the ground); the play button is the one
   filled thing. The chevron at the bar's leading edge tucks it: the bar
   slides down until only a strip stays (--bf-tab-h) — the progress rail on
   its edge, the mark, the item number, the line and the breathing dot — one
   button that brings the bar back (js/cms.js briefDock()). The corner
   buttons the bar used to cover (↑ and the live dock) step up with it. */
:root{--bf-tab-h:26px}
/* The floating card (the owner, 2026-10-04, sample 2 of three): the bar
   lifts off the bottom edge into a card of its own, 860px at most, centred,
   paper by day and a navy step above the page by night (css/cms-dark.css).
   --bf-bar-h is the room it takes from the bottom: the card and its gap. The
   progress runs along its foot; ✕ ends the brief, red under the pointer. */
:root{--bf-bar-h:84px;--bf-card-h:68px;--bf-gap:16px}
[data-bf]{bottom:var(--bf-gap);padding-inline:12px;pointer-events:none;--bf-paper:#fff;--bf-ink:#0a1a33;--bf-mute:#4a6283;--bf-hair:#d5dde8;--bf-blue:#1b5aa6}
[data-bf] .bf-bar{pointer-events:auto;max-width:860px;height:var(--bf-card-h);margin:0 auto;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid #d5dde8;box-shadow:0 22px 50px -12px rgba(10,26,51,.35),0 2px 6px rgba(10,26,51,.08);
  transform:translateY(calc(100% + var(--bf-gap) + 14px))}
[data-bf][data-on] .bf-bar{transform:none}
[data-bf] .bf-rail{top:auto;bottom:0;height:3px;background:#e6edf6}
[data-bf] .bf-rail-on{background:var(--bf-blue);box-shadow:none}
[data-bf] .bf-rail-nib{display:none}
[data-bf] .bf-b,[data-bf] .bf-rate{background:transparent;border:0;border-radius:50%;color:var(--bf-ink)}
[data-bf] .bf-rate{border-radius:999px;background:#eef3fa}
[data-bf] .bf-b-go{width:44px;height:44px;background:var(--bf-blue);color:#fff;box-shadow:0 8px 18px -8px rgba(27,90,166,.8)}
[data-bf] .bf-b-end{width:32px;height:32px;margin-inline-start:10px;background:#eef3fa}
@media (hover:hover){
  [data-bf] .bf-b:hover:not(:disabled),[data-bf] .bf-rate:hover{background:#e1eaf6;color:var(--bf-ink)}
  [data-bf] .bf-b-go:hover:not(:disabled){background:var(--bf-ink);color:#fff}
  [data-bf] .bf-b-end:hover:not(:disabled){background:#d93a39;color:#fff}
}
[data-bf] .bf-now-t{text-underline-offset:4px}
@media (hover:hover){[data-bf] a.bf-now-t[href]:hover{text-decoration:underline;text-decoration-thickness:1px}}

/* the chevron: the bar's own control, tinted rather than outlined */
.bf-tuck{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:50%;background:rgba(27,90,166,.1);color:var(--bf-ink);cursor:pointer;transition:background .18s ease,color .18s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.bf-tuck svg,.bf-tab svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.bf-tuck:hover{background:var(--bf-ink);color:#fff;transform:translateY(2px)}}
.bf-tuck:focus-visible{outline:2px solid var(--bf-blue);outline-offset:2px}

/* the strip: the bar's top, once it has slid down */
.bf-tab{position:absolute;top:0;inset-inline:0;z-index:2;display:flex;align-items:center;gap:10px;width:100%;height:var(--bf-tab-h);margin:0;padding:0 clamp(14px,3vw,26px);border:0;background:transparent;color:var(--bf-ink);font-family:var(--devlo-font, var(--sh-font));font-size:12px;font-weight:700;line-height:1;text-align:start;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s,background .18s ease}
[data-bf][data-bf-min] .bf-tab{opacity:1;visibility:visible;transition:opacity .3s ease .2s,visibility 0s linear .2s,background .18s ease}
@media (hover:hover){.bf-tab:hover{background:rgba(255,255,255,.5)}}
.bf-tab:focus-visible{outline:2px solid var(--bf-blue);outline-offset:-2px}
.bf-tab svg{width:12px;height:12px;flex:none;transform:rotate(180deg)}   /* points up: the bar comes back up */
.bf-tab__mark{flex:none;width:13px;height:11px;background:var(--bf-blue)}
.bf-tab__num{flex:none;color:var(--bf-mute);font-variant-numeric:tabular-nums;letter-spacing:.03em;direction:ltr;unicode-bidi:isolate}
.bf-tab__t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-tab__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--bf-blue);opacity:.4}
[data-bf][data-playing] .bf-tab__dot{animation:bf-breathe 2.6s ease-in-out infinite}

/* tucked: the bar slides down to its strip, its rows fade, the page's bottom room shrinks */
[data-bf][data-on][data-bf-min] .bf-bar{transform:translateY(calc(100% + var(--bf-gap) - var(--bf-tab-h)))}
[data-bf] .bf-id,[data-bf] .bf-now,[data-bf] .bf-bar-ctl{transition:opacity .25s ease .1s,visibility 0s linear 0s}
[data-bf][data-bf-min] .bf-id,[data-bf][data-bf-min] .bf-now,[data-bf][data-bf-min] .bf-bar-ctl{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
html[data-bf-docked][data-bf-min] body{padding-bottom:var(--bf-tab-h)}
/* everything else docked to the bottom edge (↑, the live dock, the update bar,
   the toast, the consent card) stands on the bar, and follows it down when
   it tucks */
html[data-bf-docked] .sh-totop,html[data-bf-docked] .sh-livedock,html[data-bf-docked] .sh-update{bottom:calc(var(--bf-bar-h,66px) + 16px)}
html[data-bf-docked] .sh-toast,html[data-bf-docked] .sh-consent,html[dir="rtl"][data-bf-docked] .sh-consent{bottom:calc(var(--bf-bar-h,66px) + 24px)}
html[data-bf-docked][data-bf-min] .sh-totop,html[data-bf-docked][data-bf-min] .sh-livedock,html[data-bf-docked][data-bf-min] .sh-update{bottom:calc(var(--bf-tab-h) + 16px)}
html[data-bf-docked][data-bf-min] .sh-toast,html[data-bf-docked][data-bf-min] .sh-consent,html[dir="rtl"][data-bf-docked][data-bf-min] .sh-consent{bottom:calc(var(--bf-tab-h) + 24px)}
html[data-bf-docked] .sh-update,html[data-bf-docked] .sh-livedock{transition:bottom .42s cubic-bezier(.2,.7,.2,1)}
html[data-bf-docked] .sh-totop{transition:opacity .2s ease,transform .2s ease,bottom .42s cubic-bezier(.2,.7,.2,1)}
@media (max-width:640px){
  html[data-bf-docked] .sh-consent,html[dir="rtl"][data-bf-docked] .sh-consent{bottom:calc(var(--bf-bar-h,60px) + 12px)}
  html[data-bf-docked][data-bf-min] .sh-consent,html[dir="rtl"][data-bf-docked][data-bf-min] .sh-consent{bottom:calc(var(--bf-tab-h) + 12px)}
}
/* a page that restores a tucked bar paints it tucked, with no slide */
[data-bf][data-bf-still] .bf-bar,[data-bf][data-bf-still] .bf-tab,[data-bf][data-bf-still] .bf-id,[data-bf][data-bf-still] .bf-now,[data-bf][data-bf-still] .bf-bar-ctl{transition:none!important}
@media (max-width:720px){
  :root{--bf-bar-h:72px;--bf-card-h:62px;--bf-gap:10px}
  [data-bf]{padding-inline:8px}
  [data-bf] .bf-bar{border-radius:12px}
  [data-bf] .bf-now-cat{margin-bottom:1px;font-size:11px}
}
[data-bf] .bf-now-cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px),(pointer:coarse){[data-bf] .bf-b-end{width:40px;height:40px}}
@media (max-width:720px),(pointer:coarse){
  :root{--bf-tab-h:30px}
  .bf-tuck{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .bf-tuck,.bf-tab,[data-bf] .bf-id,[data-bf] .bf-now,[data-bf] .bf-bar-ctl{transition:none}
  .bf-tab__dot{animation:none!important}
}

/* ---- «استمع» on the article: the word being said (js/cms-listen.js) --------
   Two highlights over the article's own text (the CSS Custom Highlight API —
   no markup is added): the sentence in a faint sky tint, the word in the
   bar's light blue with an underline, so the place never rests on colour
   alone. A short rule in the paragraph's start gutter marks the paragraph
   (and is the only mark where the API is missing). While the article is
   in the voice a click on a word moves the voice there; the bar's skip
   buttons move by sentence; a reader who scrolls away gets a chip back. */
::highlight(sh-say){background-color:rgba(126,168,221,.2)}
::highlight(sh-say-word){background-color:#c5dbf6;color:#0a1a33;text-decoration:underline 2px #1b5aa6}
.sh-art__body [data-sh-reading]{position:relative}
.sh-art__body [data-sh-reading]::before{content:"";position:absolute;inset-block:.35em;inset-inline-start:-16px;width:3px;background:linear-gradient(180deg,#7ea8dd,#1b5aa6);transform-origin:top;animation:sh-listen-in .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes sh-listen-in{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:none}}
html:not([data-sh-hl]) .sh-art__body [data-sh-reading]{background:rgba(126,168,221,.16)}
html[data-sh-listening] .sh-art__body :is(p,h2,h3,li,blockquote){cursor:pointer}
@media (max-width:640px){.sh-art__body [data-sh-reading]::before{inset-inline-start:-9px}}

.sh-listen[data-wait] .sh-i{animation:sh-listen-wait 1s ease-in-out infinite}
@keyframes sh-listen-wait{50%{opacity:.3}}
[data-bf][data-bf-wait] .bf-rail{background:linear-gradient(90deg,#e6edf6 0%,#7ea8dd 50%,#e6edf6 100%) 0 0/200% 100%;animation:sh-listen-rail 1.1s linear infinite}
@keyframes sh-listen-rail{to{background-position:-200% 0}}

/* the bar holding an article: its item buttons give way to sentence skips */
.bf-b-sback,.bf-b-sfwd{display:none}
[data-bf][data-bf-listen] .bf-b-sback,[data-bf][data-bf-listen] .bf-b-sfwd{display:grid}
[data-bf][data-bf-listen] .bf-b-prev,[data-bf][data-bf-listen] [data-bf-next]{display:none}

/* «موضع القراءة»: back to the word, above the bar */
.sh-listen-pill{position:fixed;left:50%;bottom:calc(var(--bf-bar-h,66px) + 16px);z-index:9890;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid #a9c0e0;background:linear-gradient(180deg,#eef4fc 0%,#dce7f6 100%);color:#0a1a33;font:800 12.5px/1 var(--devlo-font, var(--sh-font));box-shadow:0 12px 26px rgba(10,26,51,.18);transform:translateX(-50%);cursor:pointer;animation:sh-listen-pill .3s cubic-bezier(.2,.7,.2,1) both}
.sh-listen-pill[hidden]{display:none}
.sh-listen-pill svg{width:14px;height:14px;fill:none;stroke:#1b5aa6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.sh-listen-pill[data-dir="up"] svg{transform:rotate(180deg)}
@media (hover:hover){.sh-listen-pill:hover{background:#0a1a33;border-color:#0a1a33;color:#fff}.sh-listen-pill:hover svg{stroke:#fff}}
.sh-listen-pill:focus-visible{outline:2px solid #1b5aa6;outline-offset:2px}
html[data-bf-min] .sh-listen-pill{bottom:calc(var(--bf-tab-h,26px) + 16px)}
html:not([data-bf-docked]) .sh-listen-pill{bottom:24px}
@keyframes sh-listen-pill{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sh-art__body [data-sh-reading]::before,.sh-listen[data-wait] .sh-i,[data-bf][data-bf-wait] .bf-rail,.sh-listen-pill{animation:none}
}

/* ---- Apple: what Safari asks for and no other browser does -----------------
   Found by running every page on the WebKit engine beside Chromium and
   comparing element by element (2026-09-20), plus what only an iPhone does
   (the notch, the home indicator, text inflation) and no desktop engine can
   show. The theme's floor is Safari 15.4 — @layer, :has() and svh start there. */

/* under align-items:stretch Safari does not widen a grid item that has an
   aspect-ratio: it takes the item's HEIGHT from the row and its width from
   the ratio (Chromium does the reverse). In one column the row is as tall as
   the item's own content, and these stages hold only absolutely placed
   slides — so 0 by 0: «عدسة شهاب» showed no picture at all on an iPhone and
   a short one on a Mac, «فيديو شهاب» a player narrower than its column, and
   the live coverage's lead story half its column on an iPad. (The hero's
   other three variants are the same tiles WITHOUT the stretch, and measure
   the same on both engines.) The same line ends what every engine did at
   1024px, where a stage as wide as its height asked lay over the panel
   beside it. The lead's picture keeps its 16:9: Safari squeezed it to fit
   the story's own ratio; the story grows instead. */
.sh-lens__grid>.sh-lens__stage,.sh-vid__stage .sh-vid__player,.sh-lc>.sh-lc__lead{justify-self:stretch;width:100%}
.sh-lc__lead>.sh-lc__lead-pic{flex:none}

/* an iPhone on its side inflates every text block it judges too wide */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* a drag along «فيديو شهاب»'s seek line is the player's, not the page's */
.sh-vid__track{touch-action:pan-y}

/* «فيديو شهاب» full screen (js/app.js player() makes the whole stage full
   screen): the whole clip on black, as the Vidstack players already do
   ([data-fullscreen] in css/player.css), not its middle blown up to fill the
   screen — a portrait clip showed a face from the chin up. The stage's
   «الحلقة الجديدة» tag stays on the page. One rule per prefix: a browser that
   does not know one pseudo-class drops the whole rule it sits in. */
.sh-vid__player:fullscreen .sh-vid__video{object-fit:contain}
.sh-vid__player:-webkit-full-screen .sh-vid__video{object-fit:contain}
.sh-vid__player:fullscreen .sh-vid__badge{display:none}
.sh-vid__player:-webkit-full-screen .sh-vid__badge{display:none}

/* Safari 15 has no overflow:clip, so nothing held back a stray wide box */
@supports not (overflow:clip){html{overflow-x:hidden}}

/* Safari before 16.2 has no color-mix(): the rules and tints it drew are dropped whole */
@supports not (color:color-mix(in srgb,#000,#fff)){
  .sh-bo__print--none{border:1px dashed var(--accent,#1b5aa6)}
  .sh-say__lead.sh-say--press{border-top:3px double var(--sh-hair);border-bottom:3px double var(--sh-hair)}
  .sh-say__item.sh-say--press{border-inline-start:2px solid var(--sh-hair)}
  .sh-say__lead.sh-say--official{background:var(--color-surface-warm);box-shadow:inset 0 0 0 2px var(--sh-hair)}
  .sh-say__item.sh-say--official{border-inline-start:3px solid var(--qc)}
}

/* the page is drawn edge to edge (viewport-fit=cover, the theme's own), so on
   an iPhone the notch covers the first 47-59px of either side once it is
   turned, and the home indicator lies over the bottom 21-34px: the gutter
   grows to the safe area, and what is docked to the bottom edge stands clear
   of the indicator. Everywhere else env() is 0 and nothing moves. */
@supports (padding:max(0px,env(safe-area-inset-left))){
  :root{--sh-safe-x:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--sh-safe-b:env(safe-area-inset-bottom,0px)}
  /* the brief's bar and its tucked strip grow by the indicator's height, and
     whatever stands on them (the body's padding, ↑, the toast, the live dock,
     the consent box, «موضع القراءة») follows the same two variables */
  :root{--bf-bar-h:calc(66px + var(--sh-safe-b));--bf-tab-h:calc(26px + var(--sh-safe-b))}
  @media (max-width:720px){:root{--bf-bar-h:calc(60px + var(--sh-safe-b))}}
  @media (max-width:720px),(pointer:coarse){:root{--bf-tab-h:calc(30px + var(--sh-safe-b))}}
  .bf-bar,.bf-tab{padding-bottom:var(--sh-safe-b)}
  .bf-bar{padding-inline:max(clamp(14px,3vw,26px),var(--sh-safe-x))}
  html:not([data-bf-docked]) .sh-totop,html:not([data-bf-docked]) .sh-toast,html:not([data-bf-docked]) .sh-update,
  html:not([data-bf-docked]) .sh-livedock,html:not([data-bf-docked]) .sh-consent,html:not([data-bf-docked]) .sh-listen-pill{margin-bottom:var(--sh-safe-b)}
  .sh-totop,.sh-toast,.sh-update,.sh-livedock,.sh-consent{margin-inline:max(0px,calc(var(--sh-safe-x) - 16px))}
}
@layer responsive{
  @supports (padding:max(0px,env(safe-area-inset-left))){
    :root{--sh-gutter:max(32px,env(safe-area-inset-left),env(safe-area-inset-right))}
    @media (max-width:1200px){:root{--sh-gutter:max(24px,env(safe-area-inset-left),env(safe-area-inset-right))}}
    @media (max-width:640px){:root{--sh-gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}}
    @media (max-width:380px){:root{--sh-gutter:max(12px,env(safe-area-inset-left),env(safe-area-inset-right))}}
  }
}

/* ---- «البث المباشر»: the stream, alone (js/cms-livebox.js) ----
   The owner's brief: a modal that holds the stream and nothing else. A deep
   veil, one 16:9 stage as large as the screen allows, the provider's own
   controls inside it, and an icon-only close just above its corner. The
   page behind is locked and the docked bar steps down through the same
   html[data-sh-livebox-open] the theme's modal used (css/feed.css). */
.sh-lbx{position:fixed;inset:0;z-index:1270;display:grid;place-items:center;padding:64px 16px 24px}
.sh-lbx[hidden]{display:none}
.sh-lbx__veil{position:absolute;inset:0;background:rgba(3,8,18,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sh-lbx__frame{position:relative;width:min(1200px,100%,calc((100vh - 112px) * 16 / 9));width:min(1200px,100%,calc((100dvh - 112px) * 16 / 9))}
.sh-lbx__stage{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;overflow:hidden;box-shadow:0 30px 80px -24px rgba(0,0,0,.85)}
.sh-lbx__stage > iframe,.sh-lbx__stage > media-player{position:absolute;inset:0;width:100%;height:100%;border:0}
.sh-lbx__stage > media-player{aspect-ratio:auto}
.sh-lbx__close{position:absolute;bottom:calc(100% + 12px);inset-inline-end:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.sh-lbx__close::before{content:"";position:absolute;inset:-4px}   /* a 48px target */
.sh-lbx__close .sh-i{width:16px;height:16px}
@media (hover:hover){.sh-lbx__close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}}
.sh-lbx__close:focus-visible,.sh-lbx__retry:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sh-lbx__spin{position:absolute;inset:0;z-index:2;margin:auto;width:36px;height:36px;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;pointer-events:none;animation:sh-lbx-spin .8s linear infinite}
.sh-lbx__retry{position:absolute;inset:0;z-index:2;margin:auto;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.sh-lbx__retry .sh-i{width:20px;height:20px}
@media (hover:hover){.sh-lbx__retry:hover{background:rgba(255,255,255,.18)}}
@keyframes sh-lbx-spin{to{transform:rotate(360deg)}}
.sh-lbx:not([hidden]) .sh-lbx__veil{animation:sh-lbx-fade .22s ease both}
.sh-lbx:not([hidden]) .sh-lbx__frame{animation:sh-lbx-rise .28s cubic-bezier(.2,.7,.2,1) both}
.sh-lbx[data-closing] .sh-lbx__veil{animation:sh-lbx-out .18s ease both}
.sh-lbx[data-closing] .sh-lbx__frame{animation:sh-lbx-out .18s ease both}
@keyframes sh-lbx-fade{from{opacity:0}}
@keyframes sh-lbx-rise{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes sh-lbx-out{to{opacity:0}}
@media (max-width:640px){
  .sh-lbx{padding:64px 0 16px}
  .sh-lbx__frame{width:100%}
  .sh-lbx__close{inset-inline-end:12px}
}
@media (prefers-reduced-motion:reduce){
  .sh-lbx__veil,.sh-lbx__frame{animation:none!important}
  .sh-lbx__spin{animation-duration:2.4s}
}

/* ---- «عارض الصور» on a phone: the picture takes the width, the arrows ride on it.
   The theme's stage set the two 44px arrows BESIDE the picture with 18px gaps and
   22px of padding, which left a 3:4 photo 192 of 360px wide (~17% of the screen).
   The viewer is built with inline styles in js/app.js, hence the !important. ---- */
@media (max-width:640px){
  [data-sh-viewer] .sh-viewer__stage{position:relative;padding:0!important;gap:0!important}
  [data-sh-viewer] .sh-viewer__frame{flex:1 1 100%!important}
  [data-sh-viewer] .sh-viewer__nav{position:absolute!important;top:50%;z-index:2;translate:0 -50%}
  [data-sh-viewer] .sh-viewer__nav--next{inset-inline-start:8px}
  [data-sh-viewer] .sh-viewer__nav--prev{inset-inline-end:8px}
}

/* ---- the album page: a tile's words never climb over the tile above. The body
   sits on the picture's foot (photos.css), so a seven-line caption rose past the
   tile's top and wrote itself over the card above it at 768px. ---- */
.sh-ph-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sh-ph-card--third .sh-ph-card__title{-webkit-line-clamp:3}
@media (max-width:900px){.sh-ph-card:not(.sh-ph-card--tall) .sh-ph-card__title{-webkit-line-clamp:2}}
/* the trail ends on the album's name: one line, not three */
.sh-ph-crumbs span:last-child,.sh-vx-crumbs span:last-child{min-width:0;flex:1 1 12ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}