/* =====================================================================
   eSuite — Learner Dashboard Variant E
   Search rail (.es-rail-e) + in-page sub-page strip/stepper (.es-secnav)
   Tokenised against --es-* with hex fallbacks. Scoped + !important where it
   must beat the legacy global .lhs menu theme (same discipline as the
   esuite-bootstrap.css overlay).
   ===================================================================== */

/* ---------- The rail (navy panel, search-led) ----------------------- */
.es-rail-e {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: var(--es-blue-900, #293F6D);
    color: rgba(255, 255, 255, .82);
    font-family: var(--es-font-ui, "Poppins", system-ui, sans-serif);
    font-size: .8125rem;
    padding: 8px 0 10px;
}

.es-rail-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    color: #fff;
    font-weight: 600;
    background: rgba(0, 0, 0, .14);
}
.es-rail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.es-rail-ref {
    margin-left: auto;
    font-size: .75rem;
    color: #fff;
}

/* Search field — inset translucent white */
.es-rail-search {
    position: relative;
    margin: 0 10px 10px;
}
.es-rail-search > i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
}
.es-rail-search input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 6px;
    padding: 7px 10px 7px 32px;
    font-size: .8125rem;
    line-height: 1.4;
    transition: border-color .15s cubic-bezier(.2, 0, 0, 1), background-color .15s cubic-bezier(.2, 0, 0, 1);
}
.es-rail-search input::placeholder { color: rgba(255, 255, 255, .5); }
.es-rail-search input:focus {
    outline: none;
    background: rgba(255, 255, 255, .14);
    border-color: var(--es-aqua-500, #00AEEF);
    box-shadow: 0 0 0 2px var(--es-blue-900, #293F6D), 0 0 0 4px var(--es-aqua-500, #00AEEF);
}

/* Group headers — uppercase, tracked */
.es-rail-grouphd {
    margin: 10px 14px 4px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.es-rail-grouphd > i { margin-right: 5px; }

/* Lists + items */
.es-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.es-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    border-left: 4px solid transparent;
    cursor: pointer;
}
.es-rail-item > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 12px 7px 14px;
    color: rgba(255, 255, 255, .82) !important;
    text-decoration: none !important;
    line-height: 1.3;
}
.es-rail-item > a > i { width: 1.1em; text-align: center; flex: 0 0 auto; color: rgba(255, 255, 255, .6); }
.es-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.es-rail-item:hover { background: rgba(255, 255, 255, .06); }
.es-rail-item:hover > a,
.es-rail-item:hover > a > i { color: #fff !important; }

/* Current page — variant 1i: white fill + navy text + 4px orange rail + navy icon */
.es-rail-item.is-current {
    background: #fff;
    border-left-color: var(--es-orange-500, #FA650D);
}
.es-rail-item.is-current > a { color: var(--es-blue-900, #293F6D) !important; font-weight: 600; }
.es-rail-item.is-current > a > i { color: var(--es-blue-800, #4265AF) !important; }
/* Pin grip + pin toggle must stay legible on the white current row */
.es-rail-item.is-current .es-pin-grip { color: rgba(41, 63, 109, .35); }
.es-rail-item.is-current .es-pin-grip:hover { color: var(--es-blue-900, #293F6D); }
.es-rail-item.is-current .es-pin-toggle { color: rgba(41, 63, 109, .4); }
.es-rail-item.is-current .es-pin-toggle:hover { color: var(--es-blue-900, #293F6D); background: rgba(41, 63, 109, .08); }
.es-rail-item.is-current .es-pin-toggle.is-pinned,
.es-rail-item.is-current .es-pin-toggle[aria-pressed="true"] { color: var(--es-aqua-500, #00AEEF); }

/* All sections */
.es-rail-all { padding: 10px 0 0; }
.es-rail-section { padding: 4px 0; }
.es-rail-sectionhd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 2px;
    padding: 4px 12px 4px 14px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

/* The header doubles as the section's expand/collapse control. */
.es-rail-sectiontoggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}
.es-rail-sectiontoggle > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-rail-sectioncaret {
    flex: 0 0 auto;
    font-size: .625rem;
    opacity: .7;
    transition: transform .15s cubic-bezier(.2, 0, 0, 1);
}
.es-rail-sectiontoggle[aria-expanded="true"] .es-rail-sectioncaret { transform: rotate(180deg); }
.es-rail-sublist[hidden] { display: none !important; }
.es-rail-sublist .es-rail-item > a { padding-left: 26px; font-size: .8125rem; }

/* Pin toggle */
.es-pin-toggle {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .4);
    padding: 6px 10px;
    cursor: pointer;
    font-size: .8125rem;
    border-radius: 6px;
    transition: color .15s cubic-bezier(.2, 0, 0, 1), background-color .15s cubic-bezier(.2, 0, 0, 1);
}
.es-pin-toggle:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.es-pin-toggle.is-pinned,
.es-pin-toggle[aria-pressed="true"] { color: var(--es-aqua-500, #00AEEF); }
.es-pin-toggle .fa-thumbtack { transform: rotate(45deg); }

/* Shared keyboard focus ring (white on the navy rail) */
.es-rail-e a:focus-visible,
.es-rail-e button:focus-visible,
.es-rail-e input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--es-blue-900, #293F6D), 0 0 0 4px #fff;
    border-radius: 4px;
}

/* Empty-state hint for the Pinned group (no defaults) */
.es-rail-empty {
    list-style: none;
    padding: 6px 14px 8px;
    font-size: .75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
}
.es-rail-empty[hidden] { display: none !important; }

/* Search-filtered-out rows */
.es-rail-item[hidden],
.es-rail-section[hidden] { display: none !important; }


/* ---------- In-page sub-page strip ---------------------------------- */
.es-secnav {
    margin: 0 0 16px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--es-blue-800, #4265AF);
}
/* R2-A: the carousel WRAPS to a second tier on overflow (no horizontal scroll).
   esuite-learner-e.js adds .is-scrolling only past two tiers, then it falls back
   to the horizontal-scroll affordance below. */
.es-secnav-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    position: relative;
}
/* Past-two-tiers fallback: revert to single-row horizontal scroll. */
.es-secnav-strip.is-scrolling {
    flex-wrap: nowrap;
    row-gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.es-secnav-strip.is-scrolling::-webkit-scrollbar { height: 4px; }
.es-secnav-strip.is-scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 999px; }

.es-secnav-hub {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: .8125rem;
    color: #fff;
    background: var(--es-blue-900, #293F6D);
    white-space: nowrap;
}
.es-secnav-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    font-size: .8125rem;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 6px;
    transition: color .15s cubic-bezier(.2, 0, 0, 1), background-color .15s cubic-bezier(.2, 0, 0, 1), border-color .15s cubic-bezier(.2, 0, 0, 1);
}
.es-secnav-tab:hover { color: #fff !important; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); }
/* Current sub-page — white chip + navy text + orange frame (nav-chrome active) */
.es-secnav-tab.is-current {
    color: var(--es-blue-900, #293F6D) !important;
    font-weight: 600;
    border-color: var(--es-orange-500, #FA650D);
    background: #fff;
}
.es-secnav-tab.is-current > i { color: var(--es-blue-800, #4265AF) !important; }
.es-secnav-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--es-aqua-500, #00AEEF);
}

/* Overflow fade affordances (toggled by esuite-learner-e.js) */
.es-secnav { position: relative; }
.es-secnav.has-overflow-left::before,
.es-secnav.has-overflow-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 1;
}
.es-secnav.has-overflow-left::before {
    left: 0;
    background: linear-gradient(90deg, rgba(41, 63, 109, .9), rgba(41, 63, 109, 0));
}
.es-secnav.has-overflow-right::after {
    right: 0;
    background: linear-gradient(270deg, rgba(66, 101, 175, .9), rgba(66, 101, 175, 0));
}


/* ---------- Prev / Next stepper ------------------------------------- */
.es-secnav-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--es-grey-100, #E1E6EB);
}
.es-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity .15s cubic-bezier(.2, 0, 0, 1);
}
.es-step-prev {
    color: var(--es-blue-800, #4265AF) !important;
    border: 1.5px solid var(--es-blue-800, #4265AF);
    background: #fff;
}
.es-step-next {
    color: #fff !important;
    background: var(--es-blue-800, #4265AF);
    border: 1.5px solid var(--es-blue-800, #4265AF);
    margin-left: auto;
}
.es-step:hover { opacity: .86; }
.es-step.is-disabled {
    color: var(--es-grey-400, #9F9F9F) !important;
    border: 1.5px solid var(--es-grey-100, #E1E6EB);
    background: var(--es-grey-50, #F1F2F7);
    cursor: default;
    opacity: 1;
}
.es-step.is-disabled:last-child { margin-left: auto; }
.es-step-pos {
    flex: 1 1 auto;
    text-align: center;
    font-size: .8125rem;
    color: var(--es-grey-600, #6B6B6B);
}
.es-step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--es-blue-800, #4265AF);
}

/* ---------- Page-level pin on a strip tab (R3-B) -------------------- */
/* A button can't live inside the <a> tab, so tab + pin are siblings in a wrap. */
.es-secnav-tabwrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    position: relative;
}
.es-secnav-tabwrap .es-secnav-tab { padding-right: 30px; } /* room for the pin */
.es-secnav-tabwrap .es-pin-on-tab {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .35);
    padding: 3px 5px;
    font-size: .75rem;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s cubic-bezier(.2, 0, 0, 1), color .12s cubic-bezier(.2, 0, 0, 1);
}
.es-secnav-tabwrap:hover .es-pin-on-tab,
.es-secnav-tabwrap:focus-within .es-pin-on-tab,
.es-secnav-tabwrap .es-pin-on-tab[aria-pressed="true"] { opacity: 1; }
.es-secnav-tabwrap .es-pin-on-tab:hover { color: #fff; }
.es-secnav-tabwrap .es-pin-on-tab[aria-pressed="true"] { color: var(--es-aqua-500, #00AEEF); }
/* On the white current tab the pin sits on white — darken its idle/hover states */
.es-secnav-tabwrap:has(.es-secnav-tab.is-current) .es-pin-on-tab { color: rgba(41, 63, 109, .4); }
.es-secnav-tabwrap:has(.es-secnav-tab.is-current) .es-pin-on-tab:hover { color: var(--es-blue-900, #293F6D); }
.es-secnav-tabwrap:has(.es-secnav-tab.is-current) .es-pin-on-tab[aria-pressed="true"] { color: var(--es-aqua-500, #00AEEF); }
.es-secnav-tabwrap .es-pin-on-tab .fa-thumbtack { transform: rotate(45deg); }
.es-secnav-tabwrap .es-pin-on-tab:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--es-aqua-500, #00AEEF);
}

/* ---------- Content-swap wrapper (R2-B) ---------------------------- */
.es-secnav-content { transition: opacity .12s cubic-bezier(.2, 0, 0, 1); }
.es-secnav-content.is-swapping { opacity: .45; pointer-events: none; }

/* ---------- Pinned reorder — grip handle + drag affordances (R3-A) -- */
.es-pin-grip {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .3);
    padding: 6px 4px 6px 8px;
    cursor: grab;
    font-size: .8125rem;
    opacity: 0;
    transition: opacity .12s cubic-bezier(.2, 0, 0, 1), color .12s cubic-bezier(.2, 0, 0, 1);
}
[data-rail-pinned] .es-rail-item:hover .es-pin-grip,
[data-rail-pinned] .es-rail-item:focus-within .es-pin-grip { opacity: 1; }
.es-pin-grip:hover { color: #fff; }
.es-pin-grip:active { cursor: grabbing; }
.es-pin-grip:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--es-blue-900, #293F6D), 0 0 0 4px #fff;
    border-radius: 4px;
}

[data-rail-pinned] .es-rail-item.is-dragging { opacity: .4; }
[data-rail-pinned] .es-rail-item.is-lifted { background: rgba(0, 174, 239, .12); outline: 1px dashed rgba(255, 255, 255, .4); }
[data-rail-pinned] .es-rail-item.drop-before { box-shadow: inset 0 2px 0 0 var(--es-aqua-500, #00AEEF); }
[data-rail-pinned] .es-rail-item.drop-after { box-shadow: inset 0 -2px 0 0 var(--es-aqua-500, #00AEEF); }

/* Visually-hidden live region for reorder announcements */
.es-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .es-rail-e *, .es-secnav *, .es-secnav-stepper * { transition: none !important; }
}