/* MisahaTech - بلوك «خط زمني للمقالات» (الموقع + المحرر) */
.mt-story {
    --s-p: var(--clr-primary, #00dda2);
    --s-bg: var(--clr-white, #fff);
    --s-soft: var(--clr-light, #f5f7fa);
    --s-bd: var(--clr-border, #e4e8ee);
    --s-tx: var(--clr-text, #2d2d2d);
    --s-ti: var(--clr-dark, #22263a);
    --s-mu: var(--clr-muted, #666);
    --s-rail: 44px;
    margin: 2.2em 0 !important;
    clear: both;
    direction: rtl;
    color: var(--s-tx);
    line-height: 1.9
}

[data-theme=dark] .mt-story {
    --s-bg: var(--dm-bg2, #1c2030);
    --s-soft: var(--dm-bg3, #262b3d);
    --s-bd: var(--dm-border, #2e3447);
    --s-tx: #c8cad6;
    --s-ti: #e2e4ed;
    --s-mu: #8b90a8
}

/* ---------- ألوان المراحل ---------- */
.mt-stage { --st-c: var(--s-p) }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+1) { --st-c: #3fae4a }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+2) { --st-c: #e3a81b }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+3) { --st-c: #ec7d1c }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+4) { --st-c: #dc3a3d }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+5) { --st-c: #8e3b93 }
.mt-story[data-palette=rainbow] .mt-stage:nth-child(6n+6) { --st-c: #1f8ad3 }
/* اللون المخصص لمرحلة معيّنة (style="--st-c") يتجاوز ما سبق تلقائياً */

/* ---------- شريط التنقّل بالسنوات (يُبنى بـ JS) ---------- */
.mt-story__nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 4px 2px 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--s-bd)
}

.mt-story__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--s-bd);
    background: var(--s-bg);
    color: var(--s-ti);
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s, border-color .2s, color .2s
}

.mt-story__chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-c)
}

.mt-story__chip:hover { border-color: var(--st-c) }
.mt-story__chip.is-active { background: var(--st-c); border-color: var(--st-c); color: #fff }
.mt-story__chip.is-active::before { background: #fff }
.mt-story__chip:focus-visible { outline: 2px solid var(--st-c); outline-offset: 2px }

/* إلغاء تنسيق روابط المقال (اللون، الخط المتقطع، خلفية التحويم) على أزرار السنوات */
body .article-body .mt-story a.mt-story__chip { color: var(--s-ti) !important; background: var(--s-bg) !important; border: 1px solid var(--s-bd) !important }
body .article-body .mt-story a.mt-story__chip:hover { border-color: var(--st-c) !important }
body .article-body .mt-story a.mt-story__chip.is-active { color: #fff !important; background: var(--st-c) !important; border-color: var(--st-c) !important }

/* ---------- المرحلة ---------- */
.mt-story__list { position: relative }

.mt-stage {
    position: relative;
    display: grid;
    grid-template-columns: var(--s-rail) minmax(0, 1fr);
    gap: 0 14px;
    padding-bottom: 38px;
    scroll-margin-top: 90px
}

.mt-stage:last-child { padding-bottom: 0 }

.mt-stage__rail { position: relative }

/* الخط الرمادي بين هذه المرحلة والتي تليها */
.mt-stage__rail::before,
.mt-stage__fill {
    content: "";
    position: absolute;
    right: calc(var(--s-rail) / 2 - 1.5px);
    top: 30px;
    bottom: -8px;
    width: 3px;
    border-radius: 3px
}

.mt-stage__rail::before { background: var(--s-bd) }

/* الجزء الملوّن الذي يمتلئ أثناء القراءة (الارتفاع يأتي من JS عبر --fill) */
.mt-stage__fill {
    background: linear-gradient(to bottom, var(--st-c), var(--st-next, var(--st-c)));
    transform-origin: top;
    transform: scaleY(var(--fill, 0))
}

.mt-story[data-progress="0"] .mt-stage__fill { transform: none }
.mt-stage:last-child .mt-stage__rail::before,
.mt-stage:last-child .mt-stage__fill { display: none }

.mt-stage__dot {
    position: absolute;
    right: calc(var(--s-rail) / 2 - 11px);
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--st-c);
    border: 4px solid var(--st-c);
    box-sizing: border-box;
    z-index: 1;
    transition: background .25s, box-shadow .25s
}

/* المراحل التي لم يصل إليها القارئ بعد: نقطة مفرّغة (فقط عند تفعيل JS والامتلاء) */
.mt-story.is-js[data-progress="1"] .mt-stage:not(.is-reached) .mt-stage__dot { background: var(--s-bg) }

.mt-stage.is-current .mt-stage__dot {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-c) 22%, transparent)
}

.mt-stage__main { min-width: 0 }

/* السنة: العنصر الأبرز في الخط الزمني */
.mt-stage__date {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--st-c);
    font-variant-numeric: tabular-nums;
    margin: 0 0 4px
}

/* العنوان: نلغي زخرفة عناوين المقال (إطار / رقم مجلة / #) داخل الخط الزمني */
body .article-body .mt-story .mt-stage__title,
.mt-story .mt-stage__title {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    color: var(--s-ti) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    counter-increment: none !important;
    display: block
}

body .article-body .mt-story .mt-stage__title::before,
body .article-body .mt-story .mt-stage__title::after {
    content: none !important;
    display: none !important
}

body .article-body .mt-story h3.mt-stage__title { font-size: 1.15rem !important }

/* أرقام بارزة */
body .article-body .mt-story ul.mt-stage__stats,
.mt-stage__stats {
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
    margin: -2px 0 16px !important;
    padding: 0 !important
}

body .article-body .mt-story .mt-stage__stat,
.mt-stage__stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px !important;
    margin: 0 !important;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--s-ti);
    background: color-mix(in srgb, var(--st-c) 10%, var(--s-bg));
    border: 1px solid color-mix(in srgb, var(--st-c) 35%, var(--s-bd));
    counter-increment: none
}

body .article-body .mt-story .mt-stage__stat::before,
body .article-body .mt-story .mt-stage__stat::after { content: none !important; display: none !important }

.mt-stage__sico { font-size: 1rem; line-height: 1 }
.mt-stage__stxt b, .mt-stage__stxt strong { color: var(--st-c) }

.mt-stage__body > :first-child { margin-top: 0 !important }
.mt-stage__body > :last-child { margin-bottom: 0 !important }

.mt-stage__body img { border-radius: 12px }
.mt-stage__body .wp-block-image,
.mt-stage__body .wp-block-gallery { margin: 1.1em 0 }
.mt-stage__body figcaption { font-size: .86rem; color: var(--s-mu); text-align: center }

@media (max-width: 600px) {
    .mt-story { --s-rail: 30px }
    .mt-stage { gap: 0 10px; padding-bottom: 30px }
    .mt-stage__dot { width: 18px; height: 18px; right: calc(var(--s-rail) / 2 - 9px); border-width: 3px }
    .mt-stage__rail::before, .mt-stage__fill { top: 26px }
    .mt-stage__date { font-size: 1.7rem }
    body .article-body .mt-story .mt-stage__title { font-size: 1.15rem !important }
}

@media (prefers-reduced-motion: reduce) {
    .mt-stage__dot, .mt-story__chip { transition: none }
}

/* ---------- المحرر ---------- */
.mt-story--ed .mt-story__edlabel {
    font-size: 12px;
    font-weight: 700;
    color: var(--s-mu);
    padding: 6px 12px;
    margin-bottom: 16px;
    background: var(--s-soft);
    border: 1px dashed var(--s-bd);
    border-radius: 8px
}

.mt-story--ed .mt-stage { margin: 0 }
.mt-story--ed .mt-stage__date,
.mt-story--ed .mt-stage__title { min-height: 1em }
.mt-story--ed .mt-stage__addimg { margin-top: 12px }
.mt-stage__stats--ed { align-items: center }
.mt-stage__stats--ed .mt-stage__stat { padding-left: 4px !important }
.mt-stage__sico--pick { border: 0; background: none; cursor: pointer; padding: 0; font: inherit }
.mt-stage__stats--ed .mt-stage__stxt { min-width: 60px }
.mt-stage__srm.components-button { min-width: 20px; height: 20px; padding: 0 }
.mt-story__help { font-size: 12px; color: #757575; margin: 0 0 10px }