/* شهاب — صفحة الملف الخاص «الملف» (اختيار المالك، 2026-11-10، من ثلاث عينات).
   غلاف بعرض الشاشة والعنوان فوقه، ثم خط زمني واحد مجمّع باليوم يضم القصص
   والفيديو والصور كلٌّ في مكانه حسب تاريخ نشره — بلا ركن خاص للوسائط.
   الحركة: transform وopacity فقط. الألوان الليلية في آخر الملف. */


.sh-fx{--fx-font:var(--devlo-font, var(--sh-font));--fx-g:var(--sh-gutter,16px);font-family:var(--devlo-font, var(--sh-font))}
.sh-fx img{display:block}

/* =============================================================== shared */
/* .sh-fx is also the header's exchange-rate chip (inline-flex): the page is a block */
.sh-fx.sh-fx--a{display:block}
.sh-fx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:14px;color:var(--sh-mute)}
.sh-fx-crumbs a{color:inherit}
.sh-fx-crumbs a:not(:last-child)::after{content:"/";margin-inline:9px;color:var(--color-text-faint)}
@media (hover:hover){.sh-fx-crumbs a:hover{color:var(--sh-blue)}}

.sh-fx-sec{margin-top:48px}
.sh-fx-sec--last{margin-bottom:64px}
.sh-fx-hrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px}
.sh-fx-h{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.3;color:var(--sh-navy)}
.sh-fx-h--on-dark{color:#fff}
.sh-fx-note{font-size:14px;color:var(--sh-mute)}
.sh-fx .sh-au-pager{margin-top:28px}
.sh-fx .sh-empty{margin-top:20px}

/* the file's videos and pictures as a row that scrolls sideways, edge to edge on a phone */
.sh-fx-strip{display:flex;align-items:flex-start;gap:16px;margin-top:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.sh-fx-strip::-webkit-scrollbar{display:none}
.sh-fx-clip{flex:0 0 260px;display:flex;flex-direction:column;gap:10px;min-width:0;scroll-snap-align:start;color:var(--sh-navy)}
.sh-fx-clip--tall{flex-basis:172px}
.sh-fx-clip__pic{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--sh-navy-2)}
.sh-fx-clip--tall .sh-fx-clip__pic{aspect-ratio:9/16}
.sh-fx-clip__kind{position:absolute;inset-inline-start:10px;bottom:10px;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sh-blue);color:#fff;font-size:14px;box-shadow:0 4px 14px -4px rgba(10,26,51,.6)}
.sh-fx-clip__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;font-weight:800;line-height:1.5;text-wrap:pretty}
.sh-fx-clip--on-dark{color:#fff}
@media (hover:hover){
  .sh-fx-clip:hover{color:var(--sh-blue)}
  .sh-fx-clip--on-dark:hover{color:var(--sh-sky)}
}

/* every picture in a row or card: the slot holds the size, the picture fills it */
@media (hover:hover){
}
.sh-fx a:focus-visible{outline:2px solid var(--sh-blue);outline-offset:3px}

/* ============================================================ A «الملف» */
.sh-fx .sh-fxa-band{max-width:none}
.sh-fxa-band{position:relative;display:grid;width:100vw;margin-inline:calc(50% - 50vw);min-height:clamp(420px,46vw,600px);background:var(--sh-navy);color:#fff;isolation:isolate;overflow:hidden}
.sh-fxa-band--plain{min-height:clamp(320px,30vw,420px);background:radial-gradient(120% 90% at 100% 0%,rgba(27,90,166,.75) 0%,rgba(27,90,166,0) 60%),linear-gradient(160deg,#10284d 0%,var(--sh-navy) 70%)}
.sh-fxa-band__pic{position:absolute;inset:0;z-index:-1}
.sh-fxa-band__pic img{width:100%;height:100%;object-fit:cover}
.sh-fxa-band__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,51,.97) 0%,rgba(10,26,51,.82) 30%,rgba(10,26,51,.3) 62%,rgba(10,26,51,.55) 100%)}
.sh-fxa-band__in{display:flex;flex-direction:column;align-items:flex-start;width:min(var(--sh-container,1280px),calc(100% - var(--fx-g) * 2));margin-inline:auto;padding:26px 0 34px}
.sh-fx-crumbs--on-dark{color:var(--sh-on-dark-80)}
.sh-fx-crumbs--on-dark a:not(:last-child)::after{color:var(--sh-on-dark-55)}
@media (hover:hover){.sh-fx-crumbs--on-dark a:hover{color:#fff}}
.sh-fxa-band__kick{margin-top:auto;padding:5px 12px;background:var(--sh-blue);font-size:14px;font-weight:800;line-height:1.4}
.sh-fxa-band__t{max-width:20ch;margin:14px 0 0;font-size:clamp(38px,5.6vw,76px);font-weight:800;line-height:1.12;color:#fff;text-wrap:balance}
.sh-fxa-band__dek{max-width:680px;margin:14px 0 0;font-size:18px;line-height:1.8;color:var(--sh-on-dark-86);text-wrap:pretty}
.sh-fxa-band__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:20px 0 0;font-size:15px;color:var(--sh-on-dark-80)}
.sh-fxa-band__meta b{color:#fff;font-weight:800}
.sh-fxa-band__meta span + span::before{content:"";display:inline-block;width:5px;height:5px;margin-inline:12px;vertical-align:middle;background:var(--sh-sky)}

/* below the band, one reading column in the middle of the page */
.sh-fx--a .sh-fx-sec{max-width:900px;margin-inline:auto}

/* the chronology: one rail, a day heading with a ring on it, a dot per story */
.sh-fxa-line{position:relative;max-width:900px;margin:22px 0 0;padding:0;list-style:none}
.sh-fxa-line::before{content:"";position:absolute;inset-inline-start:7px;top:14px;bottom:8px;width:2px;background:var(--color-border)}
.sh-fxa-day{position:relative;padding-inline-start:34px}
.sh-fxa-day + .sh-fxa-day{margin-top:26px}
.sh-fxa-day__d{position:relative;margin:0;padding:4px 0 6px;font-size:16px;font-weight:800;line-height:1.5;color:var(--sh-blue)}
.sh-fxa-day__d::before{content:"";position:absolute;inset-inline-start:-34px;top:8px;width:16px;height:16px;box-sizing:border-box;border:4px solid var(--sh-blue);border-radius:50%;background:var(--color-surface,#fff)}
.sh-fxa-day__list{margin:0;padding:0;list-style:none}
.sh-fxa-it{position:relative;border-bottom:1px solid var(--color-border)}
.sh-fxa-it::before{content:"";position:absolute;inset-inline-start:-30px;top:27px;width:8px;height:8px;border-radius:50%;background:var(--sh-navy)}
.sh-fxa-it__a{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:22px;align-items:start;padding:18px 0;color:var(--sh-ink)}
.sh-fxa-it__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.sh-fxa-it__m{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14px;color:var(--sh-mute)}
.sh-fxa-it__m time{font-weight:800;color:var(--sh-navy)}
.sh-fxa-it__m b{font-size:13.5px;font-weight:700;color:var(--sh-blue)}
.sh-fxa-it__t{font-size:20px;font-weight:800;line-height:1.5;color:var(--sh-navy);text-wrap:pretty}
.sh-fxa-it__dek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;line-height:1.75;color:var(--sh-ink-2)}
.sh-fxa-it__pic{aspect-ratio:16/10}
@media (hover:hover){.sh-fxa-it__a:hover .sh-fxa-it__t{color:var(--sh-blue)}}
.sh-fxa-it__pic{position:relative;display:block;overflow:hidden;background:var(--sh-navy-2)}
.sh-fxa-it__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.sh-fxa-it__a:hover img{transform:scale(1.04)}}
/* a video or picture story in the line: its kind on the picture, a reel upright */
.sh-fxa-it__pic--tall{aspect-ratio:4/5;width:68%;justify-self:end}
.sh-fxa-it__kind{position:absolute;inset-inline-start:8px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(10,26,51,.82);color:#fff;font-size:13px}
.sh-fxa-it--media::before{background:var(--sh-blue)}
.sh-fxa-it__a:active{background:var(--color-surface-soft)}

/* ========================================================== breakpoints */
@media (max-width:1023px){
  .sh-fxa-it__a{grid-template-columns:minmax(0,1fr) 160px}
  /* on a narrower screen the side column becomes a strip under the head */
}
@media (max-width:767px){
  .sh-fx-sec{margin-top:36px}
  .sh-fx-sec--last{margin-bottom:48px}
  .sh-fx-strip{margin-inline:calc(var(--fx-g) * -1);padding-inline:var(--fx-g);scroll-padding-inline:var(--fx-g);gap:12px}
  .sh-fx-clip{flex-basis:236px}
  .sh-fx-clip--tall{flex-basis:150px}
  .sh-fx-clip__t{font-size:15px}

  /* A */
  .sh-fxa-band{min-height:440px}
  .sh-fxa-band--plain{min-height:300px}
  .sh-fxa-band__in{padding:18px 0 26px}
  .sh-fxa-band__t{font-size:38px;max-width:none}
  .sh-fxa-band__dek{font-size:16px;line-height:1.75}
  .sh-fxa-band__meta{font-size:14px;margin-top:16px}
  .sh-fxa-day{padding-inline-start:28px}
  .sh-fxa-day__d{font-size:15px}
  .sh-fxa-day__d::before{inset-inline-start:-28px}
  .sh-fxa-it::before{inset-inline-start:-24px;top:24px}
  .sh-fxa-it__a{grid-template-columns:minmax(0,1fr) 96px;gap:14px;padding:14px 0}
  .sh-fxa-it__t{font-size:16.5px;line-height:1.55}
  .sh-fxa-it__dek{display:none}
  .sh-fxa-it__pic{aspect-ratio:1}

  /* B */

  /* C */
}
@media (max-width:340px){
}
@media (prefers-reduced-motion:reduce){
  .sh-fx img{transition:none!important;transform:none!important}
}

/* ================================================================ night */
html[data-theme="dark"] .sh-fx-h,
html[data-theme="dark"] .sh-fx-clip,
html[data-theme="dark"] .sh-fxa-it__t,
html[data-theme="dark"] .sh-fxa-it__m time{color:#e5eaf2}
html[data-theme="dark"] .sh-fx-h--on-dark,html[data-theme="dark"] .sh-fx-clip--on-dark{color:#fff}
html[data-theme="dark"] .sh-fx-crumbs,
html[data-theme="dark"] .sh-fx-note,
html[data-theme="dark"] .sh-fxa-it__m{color:#aeb4bb}
html[data-theme="dark"] .sh-fx-crumbs--on-dark{color:var(--sh-on-dark-80)}
html[data-theme="dark"] .sh-fxa-it__dek{color:#bcc1c9}
html[data-theme="dark"] .sh-fxa-day__d,
html[data-theme="dark"] .sh-fxa-it__m b{color:#88bfff}
html[data-theme="dark"] .sh-fxa-line::before{background:#333d4c}
html[data-theme="dark"] .sh-fxa-day__d::before{border-color:#88bfff;background:#0f1a2b}
html[data-theme="dark"] .sh-fxa-it::before{background:#88bfff}
html[data-theme="dark"] .sh-fxa-it{border-color:#333d4c}
html[data-theme="dark"] .sh-fxa-it__a:active{background:#17263b}
@media (hover:hover){
  html[data-theme="dark"] .sh-fxa-it__a:hover .sh-fxa-it__t,
  html[data-theme="dark"] .sh-fx-clip:hover{color:#88bfff}
}