/* ============================================================
   Accmaa — طبقة التصنيف (stamp 20260821d)
   امتداد لنظام .ax-* في accmaa-dashboard-ia.css — لا نظام تصميم ثانٍ.
   كل المتغيّرات (--ax-navy / --ax-s* / --ax-r* / --ax-sh*) تُورَّث من .ax-shell
   ============================================================ */

.ax-page {
    padding-block: var(--ax-s6) var(--ax-s8);
}
.ax-page > .ax-section:first-of-type { padding-block-start: var(--ax-s6); }

.ax-shell h1.ax-h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.7vw, 2.05rem);
    font-weight: 900;
    line-height: 1.32;
    color: var(--ax-navy);
    overflow-wrap: anywhere;
}
.ax-page__head { margin-block-end: var(--ax-s5); }

/* ── فتات الطريق ───────────────────────────────────────── */
.ax-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-s3);
    margin-block-end: var(--ax-s5);
}
.ax-crumbs__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: var(--ax-r-pill);
    border: 1px solid var(--ax-line);
    background: var(--ax-surface);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    color: var(--ax-navy);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.ax-crumbs__back:hover { border-color: var(--ax-navy); background: var(--ax-surface-2); }
.ax-crumbs__back i { font-size: .78em; }
.ax-crumbs__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .82rem;
}
.ax-crumbs__trail > i { color: #9fb0c6; font-size: .68rem; }
.ax-crumbs__link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--ax-muted);
    cursor: pointer;
    border-block-end: 1px solid transparent;
}
.ax-crumbs__link:hover { color: var(--ax-navy); border-block-end-color: currentColor; }
.ax-crumbs__now {
    font-weight: 800;
    color: var(--ax-navy);
    max-inline-size: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── بطاقة العنصر الموحّدة (دورة / ورشة) ───────────────── */
.ax-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ax-item::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--ax-accent, var(--ax-navy));
}
.ax-item:hover,
.ax-item:focus-visible {
    border-color: color-mix(in srgb, var(--ax-accent, #0A3669) 45%, #fff);
    box-shadow: var(--ax-sh-2);
    transform: translateY(-2px);
    outline: none;
}
.ax-item:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-accent, #0A3669) 26%, #fff), var(--ax-sh-2); }
.ax-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-s3);
}
.ax-item__kind {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: var(--ax-r-pill);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .02em;
}
.ax-item__kind--course { background: var(--ax-surface-3); color: var(--ax-navy); }
.ax-item__kind--workshop { background: var(--ax-gold-soft); color: #7d6210; }
.ax-item__kind--path { background: #e6f2ec; color: #1b6b4a; }
.ax-item__track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .77rem;
    font-weight: 700;
    color: var(--ax-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-item__track i { color: var(--ax-accent, var(--ax-navy)); font-size: .82em; flex: 0 0 auto; }
.ax-item__meta { display: flex; flex-wrap: wrap; gap: var(--ax-s2); }
.ax-item__pillar {
    font-size: .76rem;
    font-weight: 800;
    color: var(--ax-accent, var(--ax-navy));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── شريط الكتالوج: بحث + ترتيب + مسح ──────────────────── */
.ax-catalog__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-s3);
    margin-block-end: var(--ax-s4);
}
.ax-search {
    position: relative;
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.ax-search > i {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--ax-muted);
    font-size: .88rem;
    pointer-events: none;
}
.ax-search input {
    inline-size: 100%;
    padding: 12px 42px;
    border-radius: var(--ax-r-pill);
    border: 1px solid var(--ax-line);
    background: var(--ax-surface);
    font: inherit;
    font-size: .9rem;
    color: var(--ax-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ax-search input:focus {
    outline: none;
    border-color: var(--ax-navy);
    box-shadow: 0 0 0 3px rgba(10, 54, 105, .1);
}
.ax-search input::-webkit-search-cancel-button { cursor: pointer; }

.ax-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-s2);
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 800;
    color: var(--ax-navy);
}
.ax-sort select {
    padding: 10px 14px;
    border-radius: var(--ax-r-pill);
    border: 1px solid var(--ax-line);
    background: var(--ax-surface);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ax-navy);
    cursor: pointer;
    max-inline-size: 200px;
}
.ax-sort select:focus { outline: none; border-color: var(--ax-navy); }

/* ── الفلاتر ───────────────────────────────────────────── */
.ax-filters {
    display: flex;
    flex-direction: column;
    gap: var(--ax-s3);
    padding: var(--ax-s4);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-lg);
    background: var(--ax-surface);
    box-shadow: var(--ax-sh-1);
    margin-block-end: var(--ax-s5);
}
.ax-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-s3);
}
.ax-filter + .ax-filter { padding-block-start: var(--ax-s3); border-block-start: 1px solid var(--ax-line-soft); }
.ax-filter__label {
    flex: 0 0 84px;
    font-size: .78rem;
    font-weight: 900;
    color: var(--ax-muted);
}
.ax-filter__pills { display: flex; flex-wrap: wrap; gap: var(--ax-s2); flex: 1 1 auto; min-width: 0; }
.ax-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--ax-r-pill);
    border: 1px solid var(--ax-line);
    background: var(--ax-surface-2);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ax-navy);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ax-pill i { font-size: .82em; color: var(--ax-accent, var(--ax-navy)); }
.ax-pill:hover { background: #fff; border-color: var(--ax-accent, var(--ax-navy)); }
.ax-pill.is-active {
    background: var(--ax-accent, var(--ax-navy));
    border-color: var(--ax-accent, var(--ax-navy));
    color: #fff;
}
.ax-pill.is-active i { color: #fff; }

.ax-catalog__count {
    margin: 0 0 var(--ax-s4);
    font-size: .84rem;
    font-weight: 800;
    color: var(--ax-muted);
}

/* ── ترويسة المحور / الدورة ────────────────────────────── */
.ax-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--ax-s6);
    align-items: start;
    padding: var(--ax-s6);
    border-radius: var(--ax-r-xl);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--ax-accent, #0A3669) 10%, #fff) 0%,
            var(--ax-surface) 62%);
    border: 1px solid color-mix(in srgb, var(--ax-accent, #0A3669) 20%, #fff);
    box-shadow: var(--ax-sh-1);
    margin-block-end: var(--ax-s6);
}
.ax-hero--course { grid-template-columns: minmax(0, 1fr); }
.ax-hero__text { min-width: 0; }
.ax-hero .ax-eyebrow {
    background: color-mix(in srgb, var(--ax-accent, #0A3669) 12%, #fff);
    border-color: color-mix(in srgb, var(--ax-accent, #0A3669) 28%, #fff);
    color: var(--ax-accent, var(--ax-navy));
}
.ax-hero .ax-eyebrow i { color: var(--ax-accent, var(--ax-navy)); }
.ax-hero__tag {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--ax-accent, var(--ax-navy));
    max-inline-size: 62ch;
}
.ax-hero__intro {
    margin: 0;
    font-size: .93rem;
    line-height: 1.85;
    color: var(--ax-muted);
    max-inline-size: 68ch;
}
.ax-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-s2);
    margin-block-start: var(--ax-s5);
}
.ax-hero__stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--ax-r-pill);
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    font-size: .79rem;
    font-weight: 700;
    color: var(--ax-muted);
}
.ax-hero__stats strong {
    font-size: 1.06rem;
    font-weight: 900;
    color: var(--ax-accent, var(--ax-navy));
}
.ax-hero__cards { display: flex; flex-direction: column; gap: var(--ax-s3); min-width: 0; }
.ax-hero__card {
    padding: var(--ax-s4);
    border-radius: var(--ax-r-md);
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-sh-1);
    min-width: 0;
}
.ax-hero__card h4 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: var(--ax-s2);
    font-size: .88rem;
    font-weight: 900;
    color: var(--ax-navy);
}
.ax-hero__card h4 i { color: var(--ax-gold); font-size: .92em; }
.ax-hero .ax-btn-row { margin-block-start: var(--ax-s5); }

.ax-trackline {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-s2);
    margin-block-start: var(--ax-s4);
    padding: 9px 16px;
    border-radius: var(--ax-r-pill);
    border: 1px solid color-mix(in srgb, var(--ax-accent, #0A3669) 30%, #fff);
    background: color-mix(in srgb, var(--ax-accent, #0A3669) 8%, #fff);
    font: inherit;
    font-size: .84rem;
    color: var(--ax-navy);
    cursor: pointer;
    max-inline-size: 100%;
    transition: background .18s ease;
}
.ax-trackline:hover { background: color-mix(in srgb, var(--ax-accent, #0A3669) 15%, #fff); }
.ax-trackline > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-trackline i { color: var(--ax-accent, var(--ax-navy)); font-size: .84em; flex: 0 0 auto; }

/* ── قوائم العلامات ────────────────────────────────────── */
.ax-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ax-s2); }
.ax-ticks--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ax-s3); }
.ax-ticks li {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s2);
    font-size: .86rem;
    line-height: 1.7;
    color: var(--ax-ink);
    min-width: 0;
}
.ax-ticks li i {
    flex: 0 0 18px;
    margin-block-start: 4px;
    font-size: .72rem;
    color: #1b8a5a;
}
.ax-ticks li span { min-width: 0; overflow-wrap: anywhere; }

.ax-tags { display: flex; flex-wrap: wrap; gap: var(--ax-s2); margin-block-start: var(--ax-s3); }
.ax-tag {
    padding: 4px 11px;
    border-radius: var(--ax-r-pill);
    background: var(--ax-surface-3);
    border: 1px solid var(--ax-line);
    font-size: .74rem;
    font-weight: 700;
    color: var(--ax-muted);
}

.ax-muted-line {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s2);
    margin: 0 0 var(--ax-s3);
    font-size: .85rem;
    line-height: 1.75;
    color: var(--ax-muted);
}
.ax-muted-line i { flex: 0 0 auto; margin-block-start: 4px; color: var(--ax-navy); font-size: .82em; }

.ax-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s2);
    margin-block-start: var(--ax-s4);
    padding: var(--ax-s3) var(--ax-s4);
    border-radius: var(--ax-r-md);
    background: var(--ax-gold-soft);
    border: 1px solid rgba(201, 162, 39, .38);
    font-size: .84rem;
    line-height: 1.7;
    color: #6d5606;
}
.ax-note i { flex: 0 0 auto; margin-block-start: 4px; color: #a5811a; }

.ax-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ax-s2); }
.ax-links button {
    display: flex;
    align-items: center;
    gap: var(--ax-s2);
    inline-size: 100%;
    padding: 9px 12px;
    border-radius: var(--ax-r-sm);
    border: 1px solid var(--ax-line);
    background: var(--ax-surface-2);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ax-navy);
    text-align: start;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.ax-links button:hover { background: #fff; border-color: var(--ax-navy); }
.ax-links button i { color: var(--ax-muted); font-size: .82em; flex: 0 0 auto; }

/* ── خط التعلّم: المسارات ──────────────────────────────── */
.ax-track-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ax-s5);
}
.ax-track {
    position: relative;
    padding: var(--ax-s5);
    border-radius: var(--ax-r-lg);
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-sh-1);
    scroll-margin-top: 160px;
}
.ax-track__head {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s4);
    padding-block-end: var(--ax-s4);
    border-block-end: 1px solid var(--ax-line-soft);
    margin-block-end: var(--ax-s5);
}
.ax-track__step {
    flex: 0 0 44px;
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ax-accent, var(--ax-navy));
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
}
/* الخط الواصل بين المسارات — يوحي بالتدرّج */
.ax-track:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--ax-s5) + 44px);
    inset-inline-start: calc(var(--ax-s5) + 21px);
    inline-size: 2px;
    block-size: calc(100% - var(--ax-s5) - 44px + var(--ax-s5));
    background: linear-gradient(180deg, color-mix(in srgb, var(--ax-accent, #0A3669) 40%, #fff), transparent);
    pointer-events: none;
}
.ax-track__id { min-width: 0; flex: 1 1 auto; }
.ax-track__badges { display: flex; flex-wrap: wrap; gap: var(--ax-s2); margin-block-end: var(--ax-s2); }
.ax-track__id h3 {
    margin: 0 0 6px;
    font-size: 1.14rem;
    font-weight: 900;
    line-height: 1.45;
    color: var(--ax-navy);
    overflow-wrap: anywhere;
}
.ax-track__id p { margin: 0; font-size: .88rem; line-height: 1.75; color: var(--ax-muted); max-inline-size: 72ch; }
.ax-track__body {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--ax-s5);
    align-items: start;
}
.ax-track__body > .ax-track__courses:only-child { grid-column: 1 / -1; }
.ax-track__aside {
    padding: var(--ax-s4);
    border-radius: var(--ax-r-md);
    background: var(--ax-surface-2);
    border: 1px solid var(--ax-line);
    min-width: 0;
}
.ax-track__aside h4 {
    margin: 0 0 10px;
    font-size: .84rem;
    font-weight: 900;
    color: var(--ax-navy);
}
.ax-track__aud,
.ax-track__cert {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s2);
    margin: var(--ax-s3) 0 0;
    padding-block-start: var(--ax-s3);
    border-block-start: 1px solid var(--ax-line);
    font-size: .82rem;
    line-height: 1.7;
    color: var(--ax-muted);
}
.ax-track__aud i, .ax-track__cert i { flex: 0 0 auto; margin-block-start: 4px; font-size: .84em; }
.ax-track__aud i { color: var(--ax-navy); }
.ax-track__cert i { color: var(--ax-gold); }
.ax-track__aud strong, .ax-track__cert strong { color: var(--ax-navy); }
.ax-track__courses { min-width: 0; }
.ax-track__courses h4 {
    margin: 0 0 var(--ax-s3);
    font-size: .84rem;
    font-weight: 900;
    color: var(--ax-muted);
}
.ax-track__courses h4 + .ax-grid { margin-block-end: var(--ax-s5); }
.ax-track__courses .ax-grid:last-child { margin-block-end: 0; }

/* ── الشهادة ───────────────────────────────────────────── */
.ax-cert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-s4);
    padding: var(--ax-s5);
    border-radius: var(--ax-r-lg);
    background: linear-gradient(135deg, #fbf6e6 0%, var(--ax-surface) 70%);
    border: 1px solid rgba(201, 162, 39, .4);
}
.ax-cert > div { flex: 1 1 320px; min-width: 0; }
.ax-cert h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 900; color: var(--ax-navy); }
.ax-cert p { margin: 0; font-size: .86rem; line-height: 1.75; color: var(--ax-muted); }
.ax-cert .ax-ico { --ax-accent: #c9a227; }

/* ── المنهج: الوحدات والدروس ───────────────────────────── */
.ax-col-main { min-width: 0; }
.ax-units { display: flex; flex-direction: column; gap: var(--ax-s2); }
.ax-unit {
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    background: var(--ax-surface-2);
    overflow: hidden;
}
.ax-unit[open] { background: var(--ax-surface); border-color: color-mix(in srgb, var(--ax-accent, #0A3669) 30%, #fff); }
.ax-unit > summary {
    display: flex;
    align-items: center;
    gap: var(--ax-s3);
    padding: var(--ax-s3) var(--ax-s4);
    cursor: pointer;
    list-style: none;
    min-width: 0;
}
.ax-unit > summary::-webkit-details-marker { display: none; }
.ax-unit > summary:hover { background: var(--ax-surface-3); }
.ax-unit__n {
    flex: 0 0 30px;
    inline-size: 30px;
    block-size: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--ax-r-sm);
    background: color-mix(in srgb, var(--ax-accent, #0A3669) 12%, #fff);
    color: var(--ax-accent, var(--ax-navy));
    font-size: .84rem;
    font-weight: 900;
}
.ax-unit__t { flex: 1 1 auto; min-width: 0; }
.ax-unit__t strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--ax-navy);
    overflow-wrap: anywhere;
}
.ax-unit__t small {
    display: block;
    font-size: .79rem;
    line-height: 1.6;
    color: var(--ax-muted);
    margin-block-start: 2px;
    overflow-wrap: anywhere;
}
.ax-unit__c {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 800;
    color: var(--ax-muted);
    white-space: nowrap;
}
.ax-unit__body { padding: 0 var(--ax-s4) var(--ax-s4); }
.ax-unit__tba {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-s2);
    margin: 0;
    padding: var(--ax-s3);
    border-radius: var(--ax-r-sm);
    background: var(--ax-surface-2);
    border: 1px dashed var(--ax-line);
    font-size: .81rem;
    line-height: 1.7;
    color: var(--ax-muted);
}
.ax-unit__tba i { flex: 0 0 auto; margin-block-start: 3px; }
.ax-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ax-lessons li {
    display: flex;
    align-items: center;
    gap: var(--ax-s3);
    padding: 9px 4px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ax-ink);
    border-block-end: 1px solid var(--ax-line-soft);
    min-width: 0;
}
.ax-lessons li:last-child { border-block-end: 0; }
.ax-lessons li > i { flex: 0 0 auto; font-size: .62rem; color: var(--ax-accent, var(--ax-navy)); }
.ax-lessons li > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ax-lessons li > em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: .74rem;
    font-weight: 700;
    color: var(--ax-muted);
}

/* ── عمق لوحة العضو ────────────────────────────────────── */
.ax-pillar__count { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ax-pillar__count .ax-chip { font-size: .71rem; padding: 4px 9px; }

.ax-resume__lesson {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-block-start: 4px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ax-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-resume__lesson i { flex: 0 0 auto; font-size: .8em; color: var(--ax-accent, var(--ax-navy)); }

.ax-trackrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-s3);
    padding: var(--ax-s3);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-md);
    background: var(--ax-surface);
    border-inline-start: 3px solid var(--ax-accent, var(--ax-navy));
}
.ax-trackrow__main {
    display: flex;
    align-items: center;
    gap: var(--ax-s3);
    flex: 1 1 260px;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
}
.ax-trackrow__body { flex: 1 1 auto; min-width: 0; }
.ax-trackrow__body strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    color: var(--ax-navy);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-trackrow__body small {
    display: block;
    font-size: .77rem;
    color: var(--ax-muted);
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-trackrow__body .ax-bar { margin-block: 7px 0; }
.ax-trackrow__pct {
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 900;
    color: var(--ax-accent, var(--ax-navy));
}
.ax-trackrow__main:hover .ax-trackrow__body strong { text-decoration: underline; }

.ax-nextwhy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ax-s2);
    padding: var(--ax-s5);
    border-radius: var(--ax-r-lg);
    background: color-mix(in srgb, var(--ax-accent, #0A3669) 7%, #fff);
    border: 1px dashed color-mix(in srgb, var(--ax-accent, #0A3669) 32%, #fff);
    min-width: 0;
}
.ax-nextwhy strong { font-size: 1rem; font-weight: 900; color: var(--ax-navy); line-height: 1.5; overflow-wrap: anywhere; }
.ax-nextwhy p { margin: 0; font-size: .85rem; line-height: 1.75; color: var(--ax-muted); }
.ax-nextwhy .ax-btn { margin-block-start: auto; }

/* ── لوحة إدارة المحاور والمسارات ──────────────────────── */
.ax-adm .ax-adm-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-block-start: 14px;
}
.ax-adm-pillar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    background: #fff;
    border-inline-start: 4px solid var(--ax-accent, #0A3669);
    min-width: 0;
}
.ax-adm-pillar__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ax-adm-pillar__head > div { flex: 1 1 auto; min-width: 0; }
.ax-adm-pillar__head strong { display: block; font-size: .96rem; color: #0A3669; }
.ax-adm-pillar__head small { display: block; font-size: .72rem; color: #5b6b83; }
.ax-adm label,
.ax-adm-unit label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .78rem;
    font-weight: 700;
    color: #5b6b83;
    min-width: 0;
}
.ax-adm input,
.ax-adm select,
.ax-adm textarea {
    inline-size: 100%;
    padding: 9px 12px;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    background: #fbfcfe;
    font: inherit;
    font-size: .86rem;
    color: #16233a;
}
.ax-adm input:focus, .ax-adm select:focus, .ax-adm textarea:focus {
    outline: none;
    border-color: #0A3669;
    background: #fff;
}
.ax-adm textarea { resize: vertical; min-block-size: 60px; }
.ax-adm-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: end;
    margin-block-start: 16px;
    padding: 16px;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    background: #f6f8fb;
}
.ax-adm-form__full { grid-column: 1 / -1; }
.ax-adm-units { display: flex; flex-direction: column; gap: 10px; margin-block-start: 14px; }
.ax-adm-unit {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1.4fr) 90px auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #e3e9f1;
    border-radius: 12px;
    background: #fff;
}
.ax-adm-unit .ax-unit__n { align-self: center; }
.ax-dot {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    margin-inline-end: 7px;
    vertical-align: middle;
}
.ax-adm .table-wrap { overflow-x: auto; margin-block-start: 14px; }
.ax-adm .gov-table td small { color: #7c8ba1; font-size: .7rem; }

/* ============================================================
   صور المحاور والمسارات — فوتوغرافيا حقيقية
   ------------------------------------------------------------
   نسبة 16:9 واحدة في كل مكان فلا تتفاوت أحجام البطاقات.
   طبقة تعتيم كحلية فوق الصورة حتى يبقى أي نص مقروءاً.
   المصادر الحرّة تُقدَّم بعرض 960–1024 بكسل، لذلك أقصى عرض معروض
   محدود بـ 560px: تصغير دائماً، ولا تكبير ولا بكسلة.
   بلا filter: blur ولا transform: scale — قاعدة 21c محفوظة.
   ============================================================ */
.ax-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ax-r-md);
    background: color-mix(in srgb, var(--ax-accent, #0A3669) 12%, #eef1f5);
    border: 1px solid color-mix(in srgb, var(--ax-accent, #0A3669) 18%, #fff);
    aspect-ratio: 16 / 9;
    /* الحدّ يمنع أي تكبير فوق دقة المصدر */
    max-inline-size: 560px;
}
.ax-media > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}
/* تعتيم متدرّج من الأسفل: النص الأبيض فوق الصورة يبقى مقروءاً،
   وأعلى الصورة يظل واضحاً فلا تُطمس */
.ax-media__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ax-navy) 4%, transparent) 0%,
        color-mix(in srgb, var(--ax-navy) 26%, transparent) 68%,
        color-mix(in srgb, var(--ax-navy) 52%, transparent) 100%);
    pointer-events: none;
}

/* ترويسة المحور: الصورة أول بطاقة في العمود الجانبي.
   السقف 1024px = دقة أوسع مصدر متاح، فلا تُكبَّر ولو اتّسع العمود. */
.ax-media--hero {
    max-inline-size: 1024px;
    border-radius: var(--ax-r-lg);
}

/* رأس المسار: مصغّرة ثابتة العرض بين رقم الخطوة والنص */
.ax-media--track {
    flex: 0 0 232px;
    inline-size: 232px;
    max-inline-size: 232px;
}

/* مصغّرات لوحة الإدارة */
.ax-adm-thumb {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #dbe3ee;
    inline-size: 240px;
    max-inline-size: 100%;
    aspect-ratio: 16 / 9;
}
.ax-adm-thumb--row { inline-size: 96px; border-radius: 7px; }
.ax-adm-thumb > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.ax-tag--warn {
    background: #fdf3e3;
    border-color: #f0d9a8;
    color: #8a5a00;
    white-space: nowrap;
}

/* ============================================================
   الاستجابة — 1440 / 768 / 390
   ============================================================ */
@media (max-width: 1199px) {
    .ax-hero { grid-template-columns: minmax(0, 1fr); gap: var(--ax-s5); }
    .ax-track__body { grid-template-columns: minmax(0, 1fr); }
    .ax-ticks--2 { grid-template-columns: minmax(0, 1fr); }
    .ax-track:not(:last-child)::after { display: none; }
}

@media (max-width: 900px) {
    .ax-adm-unit { grid-template-columns: 34px minmax(0, 1fr); }
    .ax-adm-unit > button { grid-column: span 1; }
}

@media (max-width: 767px) {
    .ax-page { padding-block: var(--ax-s5) var(--ax-s7); }
    .ax-hero { padding: var(--ax-s5); border-radius: var(--ax-r-lg); }
    .ax-track { padding: var(--ax-s4); }
    .ax-track__head { gap: var(--ax-s3); }
    .ax-track__step { flex-basis: 36px; inline-size: 36px; block-size: 36px; font-size: .94rem; }
    /* الجوال: الصورة تُلفّ إلى سطر كامل بعد الرقم بدل أن تزحم العنوان */
    .ax-track__head { flex-wrap: wrap; }
    .ax-media--track {
        order: 3;
        flex: 1 1 100%;
        inline-size: 100%;
        max-inline-size: none;
    }
    .ax-track__id { flex: 1 1 calc(100% - 36px - var(--ax-s3)); }
    .ax-filters { padding: var(--ax-s3); }
    .ax-filter { gap: var(--ax-s2); }
    .ax-filter__label { flex: 1 1 100%; }
    .ax-sort { flex: 1 1 100%; justify-content: space-between; }
    .ax-sort select { flex: 1 1 auto; max-inline-size: none; }
    .ax-crumbs__now { max-inline-size: 24ch; }
    .ax-cert { padding: var(--ax-s4); }
}

@media (max-width: 420px) {
    .ax-hero__stats span { flex: 1 1 calc(50% - var(--ax-s2)); justify-content: center; }
    .ax-item__meta .ax-chip { font-size: .72rem; padding: 4px 9px; }
    .ax-pill { font-size: .76rem; padding: 6px 11px; }
    .ax-crumbs__now { max-inline-size: 16ch; }
    .ax-unit > summary { padding: var(--ax-s3); gap: var(--ax-s2); }
    .ax-unit__c { font-size: .7rem; }
}

/* الجوال/اللوحي: بلا blur/scale ثقيل — نفس قاعدة 21c */
@media (max-width: 1100px) {
    .ax-item:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-item, .ax-pill, .ax-crumbs__back, .ax-trackline { transition: none !important; }
}