/* =========================================================================
   Advance Careers UK — Student portal (2026)
   Shares the marketing-site design language (Plus Jakarta Sans, --acuk-*
   palette, soft radius/shadow) and layers portal components on top of the
   existing Bootstrap 4 / theme CSS. Mobile-first.
   ========================================================================= */

:root {
    --acuk-blue: #2b56a3;
    --acuk-blue-dark: #01194d;
    --acuk-orange: #f6a21e;
    --acuk-red: #f60508;
    --acuk-green: #16a34a;

    --sp-ink-900: #0f172a;
    --sp-ink-700: #334155;
    --sp-ink-500: #64748b;
    --sp-surface: #ffffff;
    --sp-bg: #f4f6fb;
    --sp-border: rgba(15, 23, 42, .08);

    --sp-r-sm: 10px;
    --sp-r-md: 16px;
    --sp-r-lg: 22px;
    --sp-r-pill: 999px;

    --sp-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --sp-shadow-md: 0 12px 28px rgba(15, 23, 42, .09);
    --sp-shadow-lg: 0 24px 50px rgba(15, 23, 42, .14);

    --sp-ease: cubic-bezier(.22, 1, .36, 1);
    --sp-font: 'Plus Jakarta Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.sp-body {
    font-family: var(--sp-font);
    background: var(--sp-bg) !important;
    color: var(--sp-ink-700);
    -webkit-font-smoothing: antialiased;
}

.sp-body h1, .sp-body h2, .sp-body h3, .sp-body h4, .sp-body h5 {
    font-family: var(--sp-font);
    color: var(--sp-ink-900);
    letter-spacing: -0.015em;
}

/* ---- Modernised top navbar ---------------------------------------------- */

.sp-navbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sp-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sp-navbar .navbar-brand img { height: 42px; width: auto; }

.sp-navbar .nav-link {
    font-weight: 600;
    font-size: .93rem;
    color: var(--sp-ink-700) !important;
    padding: .5rem .7rem !important;
    border-radius: var(--sp-r-sm);
    white-space: nowrap;
    transition: background .15s var(--sp-ease), color .15s var(--sp-ease);
}
/* Expanded bar: keep every item on one line, snug to the right. */
@media (min-width: 992px) {
    .sp-navbar .navbar-nav { flex-wrap: nowrap; align-items: center; }
    .sp-navbar .navbar-nav.ml-auto { gap: .1rem; }
    .sp-navbar .navbar-collapse { justify-content: flex-end; }
}
@media (min-width: 992px) and (max-width: 1140px) {
    .sp-navbar .nav-link { padding: .5rem .55rem !important; font-size: .9rem; }
    .sp-navbar .sp-avatar { width: 30px; height: 30px; }
}
.sp-navbar .nav-link:hover { background: rgba(43, 86, 163, .07); color: var(--acuk-blue) !important; }
.sp-navbar .nav-item.active > .nav-link,
.sp-navbar .nav-link.active { color: var(--acuk-blue) !important; background: rgba(43, 86, 163, .1); }

.sp-navbar .navbar-toggler { border: none; padding: .35rem .5rem; font-size: 1.15rem; }
.sp-navbar .navbar-toggler:focus { box-shadow: none; }

.sp-navbar .dropdown-menu {
    border: none;
    border-radius: var(--sp-r-md);
    box-shadow: var(--sp-shadow-lg);
    padding: .4rem;
    margin-top: .5rem;
}
.sp-navbar .dropdown-item { border-radius: var(--sp-r-sm); padding: .55rem .8rem; font-weight: 600; font-size: .9rem; }
.sp-navbar .dropdown-item:hover { background: rgba(43, 86, 163, .08); color: var(--acuk-blue); }

/* Hover-reveal sub-menu on desktop; on mobile the collapsed menu shows it
   inline and the top link still goes to the /videos hub (both options there). */
@media (min-width: 992px) and (hover: hover) {
    .sp-navbar .sp-hover-dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
    .sp-navbar .sp-hover-dropdown .dropdown-menu { min-width: 10.5rem; padding: .2rem; }
    .sp-navbar .sp-hover-dropdown .dropdown-item { padding: .38rem .55rem; font-size: .8rem; font-weight: 600; }
    .sp-navbar .sp-hover-dropdown .dropdown-item i { font-size: .75rem; width: .95rem; text-align: center; }
}
@media (max-width: 991.98px) {
    .sp-navbar .sp-hover-dropdown > .dropdown-menu { display: block; }
}

.sp-navbar .btn { margin: 0; border-radius: var(--sp-r-sm) !important; font-weight: 700; }

.sp-navbar .sp-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--acuk-blue), #4472c4);
    color: #fff; font-weight: 800; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .sp-navbar .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem 0;
        border-top: 1px solid var(--sp-border);
    }
    .sp-navbar .navbar-nav .nav-link { padding: .8rem .6rem !important; font-size: 1rem; white-space: normal; }
    .sp-navbar .navbar-nav .btn { display: block; width: 100%; text-align: center; margin-top: .4rem; }
    .sp-navbar .dropdown-menu { box-shadow: none; padding: 0 0 .25rem .75rem; }
}

/* ---- Mobile app-style bottom tab bar ---------------------------------- */

.sp-bottomnav { display: none; }

@media (max-width: 767.98px) {
    .sp-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
        background: #fff;
        border-top: 1px solid var(--sp-border);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .sp-bottomnav > a,
    .sp-bottomnav > button {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: .5rem .2rem calc(.45rem + env(safe-area-inset-bottom, 0));
        background: none; border: 0; cursor: pointer;
        color: var(--sp-ink-500); font-family: var(--sp-font);
        font-size: .625rem; font-weight: 700; letter-spacing: .01em;
        text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .sp-bottomnav i { font-size: 1.15rem; line-height: 1; }
    .sp-bottomnav svg {
        width: 1.2rem; height: 1.2rem; display: block; flex: 0 0 auto;
        fill: currentColor;
    }
    .sp-bottomnav span {
        line-height: 1; white-space: nowrap;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .sp-bottomnav > a:hover,
    .sp-bottomnav > a:focus { color: var(--sp-ink-700); text-decoration: none; }
    .sp-bottomnav > a.active { color: var(--acuk-blue); }
    .sp-bottomnav > a.active i,
    .sp-bottomnav > a.active svg { transform: translateY(-1px); }

    /* clearance so page content / footer never sits under the bar */
    body.sp-portal { padding-bottom: 64px; }
    body.sp-portal .acuk-footer,
    body.sp-portal [style*="background-color:#01194D"] { margin-bottom: 0; }

    /* the top navbar's hamburger is redundant with the bottom "Menu" button */
    .sp-navbar .navbar-toggler { display: none; }
}

/* ---- Page shell ------------------------------------------------------------ */

.sp-page { max-width: 1160px; margin: 0 auto; padding: 1.75rem 1rem 4rem; }

@media (max-width: 575.98px) { .sp-page { padding: 1.1rem .85rem 3rem; } }

.sp-greeting { margin-bottom: 1.5rem; }
.sp-greeting h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 .25rem;
}
.sp-greeting p { color: var(--sp-ink-500); font-size: 1rem; margin: 0; }

.sp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.sp-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-pill); padding: .4rem .85rem;
    font-size: .8rem; font-weight: 700; color: var(--sp-ink-700);
    box-shadow: var(--sp-shadow-sm);
}
.sp-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acuk-green); }
.sp-chip .dot.warn { background: var(--acuk-orange); }

/* ---- Section headers ----------------------------------------------------- */

.sp-section { margin-top: 2.25rem; }
.sp-section:first-of-type { margin-top: 0; }
.sp-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: .9rem;
}
.sp-section-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.sp-section-head a { font-size: .85rem; font-weight: 700; color: var(--acuk-blue); white-space: nowrap; }

/* Collapsible variant: <details class="sp-section"> with a <summary class="sp-section-head"> */
details.sp-section > summary.sp-section-head {
    cursor: pointer; list-style: none; align-items: center;
}
details.sp-section > summary.sp-section-head::-webkit-details-marker { display: none; }
details.sp-section > summary.sp-section-head::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: .1rem;
    border-right: 2px solid var(--sp-ink-500); border-bottom: 2px solid var(--sp-ink-500);
    transform: rotate(45deg); transition: transform .2s var(--sp-ease);
}
details.sp-section[open] > summary.sp-section-head::after { transform: rotate(-135deg); }
details.sp-section:not([open]) > summary.sp-section-head { margin-bottom: 0; }
details.sp-section > summary.sp-section-head:hover h2 { color: var(--acuk-blue); }

/* ---- Cards -------------------------------------------------------------- */

.sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-sm);
    padding: 1.4rem;
}

.sp-grid { display: grid; gap: 1rem; }
.sp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .sp-grid.cols-3, .sp-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .sp-grid.cols-2, .sp-grid.cols-3, .sp-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ---- Course card ------------------------------------------------------- */

.sp-course {
    display: flex; flex-direction: column; gap: .9rem;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--acuk-blue);
    border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-sm);
    padding: 1.4rem;
}
.sp-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sp-course h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.sp-course .meta { color: var(--sp-ink-500); font-size: .85rem; margin-top: .2rem; }

.sp-badge {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: .3rem .6rem; border-radius: var(--sp-r-pill); white-space: nowrap;
}
.sp-badge.ok { background: rgba(22, 163, 74, .12); color: var(--acuk-green); }
.sp-badge.pending { background: rgba(246, 162, 30, .16); color: #b45309; }

.sp-course-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--sp-font); font-weight: 700; font-size: .92rem;
    padding: .7rem 1.3rem; border-radius: var(--sp-r-sm); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; transition: transform .15s var(--sp-ease), filter .15s var(--sp-ease);
    min-height: 44px;
}
.sp-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sp-btn-primary { background: var(--acuk-blue); color: #fff; }
.sp-btn-primary:hover { color: #fff; filter: brightness(1.06); }
.sp-btn-ghost { background: transparent; border-color: var(--sp-border); color: var(--sp-ink-700); }
.sp-btn-ghost:hover { border-color: var(--acuk-blue); color: var(--acuk-blue); }
.sp-btn-orange { background: var(--acuk-orange); color: #23180a; }
.sp-btn-orange:hover { color: #23180a; filter: brightness(1.04); }

@media (max-width: 480px) {
    .sp-course-actions { flex-direction: column; }
    .sp-course-actions .sp-btn { width: 100%; }
}

/* ---- Payment / plan progress ----------------------------------------------- */

.sp-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sp-plan-row .amt { font-family: var(--sp-font); font-weight: 800; font-size: 1.4rem; color: var(--sp-ink-900); font-variant-numeric: tabular-nums; }
.sp-plan-row .sub { color: var(--sp-ink-500); font-size: .82rem; }

.sp-progress { height: 10px; background: var(--sp-bg); border-radius: var(--sp-r-pill); overflow: hidden; }
.sp-progress > span { display: block; height: 100%; border-radius: var(--sp-r-pill); background: linear-gradient(90deg, var(--acuk-blue), #4472c4); }
.sp-progress.done > span { background: linear-gradient(90deg, var(--acuk-green), #22c55e); }

.sp-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .85rem; color: var(--sp-ink-500); flex-wrap: wrap; }

/* ---- Quick actions --------------------------------------------------------- */

.sp-action {
    display: flex; flex-direction: column; gap: .55rem;
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow-sm);
    padding: 1.1rem; text-decoration: none; color: var(--sp-ink-900);
    transition: transform .15s var(--sp-ease), box-shadow .15s var(--sp-ease);
}
.sp-action:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-md); text-decoration: none; color: var(--sp-ink-900); }
.sp-action.locked { opacity: .55; pointer-events: none; }

.sp-action .ico {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff;
    background: linear-gradient(135deg, var(--acuk-blue), #4472c4);
}
.sp-action.orange .ico { background: linear-gradient(135deg, var(--acuk-orange), #ffc766); color: #23180a; }
.sp-action.teal .ico { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.sp-action.rose .ico { background: linear-gradient(135deg, #e11d48, #fb7185); }
.sp-action .title { font-weight: 800; font-size: .95rem; }
.sp-action .desc { font-size: .8rem; color: var(--sp-ink-500); }
.sp-action .soon {
    align-self: flex-start; font-size: .62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; background: var(--sp-bg); color: var(--sp-ink-500);
    padding: .2rem .5rem; border-radius: var(--sp-r-pill);
}

/* ---- Module cards (the 4 primary tiles on the landing page) ------------- */

.sp-modules { margin-top: .25rem; }

.sp-module {
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-sm);
    padding: 1.5rem 1.35rem 1.25rem; text-decoration: none; color: var(--sp-ink-900);
    transition: transform .16s var(--sp-ease), box-shadow .16s var(--sp-ease);
    min-height: 178px;
}
.sp-module:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-md); text-decoration: none; color: var(--sp-ink-900); }
.sp-module.locked { opacity: .62; pointer-events: none; }

.sp-module .ico {
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff; margin-bottom: .35rem;
}
.sp-module .ico.blue   { background: linear-gradient(135deg, var(--acuk-blue), #4472c4); }
.sp-module .ico.orange { background: linear-gradient(135deg, var(--acuk-orange), #ffc766); color: #23180a; }
.sp-module .ico.teal   { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.sp-module .ico.rose   { background: linear-gradient(135deg, #e11d48, #fb7185); }

.sp-module .title { font-weight: 800; font-size: 1.02rem; }
.sp-module .desc { font-size: .82rem; color: var(--sp-ink-500); flex: 1; }
.sp-module .go {
    margin-top: .35rem; font-size: .8rem; font-weight: 800; color: var(--acuk-blue);
    display: inline-flex; align-items: center; gap: .4rem;
}
.sp-module .go.soon {
    color: var(--sp-ink-500); background: var(--sp-bg);
    padding: .25rem .6rem; border-radius: var(--sp-r-pill); align-self: flex-start;
    text-transform: uppercase; letter-spacing: .05em; font-size: .62rem;
}

@media (max-width: 900px) {
    .sp-modules { grid-template-columns: repeat(2, 1fr) !important; }
    .sp-module { min-height: 0; }
}
@media (max-width: 400px) {
    .sp-modules { grid-template-columns: 1fr !important; }
}

/* ---- Chart cards ("Your learning") --------------------------------------- */

.sp-chart-card { display: flex; flex-direction: column; }
.sp-chart-card h3 { font-size: .95rem; font-weight: 800; margin: 0; }
.sp-chart-card .cap { font-size: .78rem; color: var(--sp-ink-500); margin-top: .1rem; }
.sp-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.sp-chart-body { position: relative; height: 200px; }
.sp-chart-body canvas { max-width: 100%; }
.sp-chart-note { font-size: .72rem; color: var(--sp-ink-500); margin-top: .5rem; font-style: italic; }
.em-tag.muted { background: var(--sp-bg); color: var(--sp-ink-500); }

.sp-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .4rem; color: var(--sp-ink-500);
    border: 1px dashed var(--sp-border); border-radius: var(--sp-r-md); padding: 1rem;
}
.sp-empty .em-ico { font-size: 1.5rem; opacity: .5; }
.sp-empty p { margin: 0; font-size: .82rem; }

.em-tag {
    display: inline-block; white-space: nowrap;
    font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: rgba(246, 162, 30, .16); color: #b45309; padding: .2rem .55rem; border-radius: var(--sp-r-pill);
}

/* ---- Stat tiles --------------------------------------------------------- */

.sp-stat { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow-sm); padding: 1rem 1.1rem; }
.sp-stat .n { font-family: var(--sp-font); font-weight: 800; font-size: 1.7rem; color: var(--sp-ink-900); line-height: 1; }
.sp-stat .l { font-size: .78rem; color: var(--sp-ink-500); margin-top: .35rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* ---- Empty / no-course state ------------------------------------------- */

.sp-nostate { text-align: center; padding: 2.5rem 1.25rem; }
.sp-nostate h3 { font-size: 1.15rem; font-weight: 800; }
.sp-nostate p { color: var(--sp-ink-500); max-width: 420px; margin: .4rem auto 1.1rem; }

@media print {
    .sp-navbar, .sp-action, .sp-course-actions { display: none !important; }
}

/* =========================================================================
   Light / dark theme toggle
   `data-theme` is set on <html> (inline no-flash script + acuk-theme.js).
   Dark rules are scoped to `body.sp-body` so only the modern portal pages
   (dashboard, progress) are affected — legacy portal pages stay as-is.
   ========================================================================= */

.sp-theme-toggle { display: none; }

body.sp-body .sp-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; margin-left: auto; margin-right: .35rem;
    width: 38px; height: 38px;
    border: 1px solid var(--sp-border); border-radius: var(--sp-r-sm);
    background: var(--sp-surface); color: var(--sp-ink-700);
    font-size: 1rem; line-height: 1; cursor: pointer;
    transition: color .15s var(--sp-ease), border-color .15s var(--sp-ease), background .15s var(--sp-ease);
}
body.sp-body .sp-theme-toggle:hover { color: var(--acuk-blue); border-color: var(--acuk-blue); }
body.sp-body .sp-theme-toggle:focus-visible { outline: 2px solid var(--acuk-blue); outline-offset: 2px; }

/* Inline SVG icons (not Font Awesome — avoids the kit's async replacement
   showing both icons before it runs). Moon in light, sun in dark. */
body.sp-body .sp-theme-toggle .sp-ico { display: none; }
body.sp-body .sp-theme-toggle .sp-ico-moon { display: block; }
html[data-theme="dark"] body.sp-body .sp-theme-toggle .sp-ico-moon { display: none; }
html[data-theme="dark"] body.sp-body .sp-theme-toggle .sp-ico-sun { display: block; }

@media (min-width: 992px) {
    body.sp-body .sp-theme-toggle { margin-left: .75rem; margin-right: 0; }
}

/* ---- Dark palette (modern portal pages only) --------------------------- */

html[data-theme="dark"] body.sp-body {
    --sp-ink-900: #f1f5f9;
    --sp-ink-700: #cbd5e1;
    --sp-ink-500: #93a1b5;
    --sp-surface: #161b2e;
    --sp-bg: #0d111f;
    --sp-border: rgba(255, 255, 255, .10);

    --sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
    --sp-shadow-md: 0 12px 28px rgba(0, 0, 0, .55);
    --sp-shadow-lg: 0 24px 50px rgba(0, 0, 0, .65);
}

/* Top navbar — `.bg-white` utility carries !important, so match it */
html[data-theme="dark"] body.sp-body .sp-navbar,
html[data-theme="dark"] body.sp-body .sp-navbar.bg-white {
    background: rgba(22, 27, 46, .92) !important;
    border-bottom-color: var(--sp-border);
}
html[data-theme="dark"] body.sp-body .sp-navbar .navbar-toggler-icon {
    filter: invert(1) brightness(1.6);
}
html[data-theme="dark"] body.sp-body .sp-navbar .nav-link:hover {
    background: rgba(120, 156, 201, .18);
    color: #9db8dc !important;
}
html[data-theme="dark"] body.sp-body .sp-navbar .nav-item.active > .nav-link,
html[data-theme="dark"] body.sp-body .sp-navbar .nav-link.active {
    color: #9db8dc !important; background: rgba(120, 156, 201, .18);
}

/* Dropdown menu (Bootstrap defaults to white) */
html[data-theme="dark"] body.sp-body .sp-navbar .dropdown-menu {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
}
html[data-theme="dark"] body.sp-body .sp-navbar .dropdown-item { color: var(--sp-ink-700); }
html[data-theme="dark"] body.sp-body .sp-navbar .dropdown-item:hover {
    background: rgba(120, 156, 201, .16); color: #9db8dc;
}

/* Mobile bottom tab bar (hardcoded #fff background) */
html[data-theme="dark"] body.sp-body .sp-bottomnav {
    background: var(--sp-surface);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .5);
}

/* Amber "pending" text was tuned for a light card */
html[data-theme="dark"] body.sp-body .sp-badge.pending,
html[data-theme="dark"] body.sp-body .em-tag { color: #fbbf24; }

/* Subtle chips that used the page background as their fill */
html[data-theme="dark"] body.sp-body .sp-action .soon,
html[data-theme="dark"] body.sp-body .sp-module .go.soon,
html[data-theme="dark"] body.sp-body .em-tag.muted,
html[data-theme="dark"] body.sp-body .sp-progress {
    background: rgba(255, 255, 255, .07);
}

/* Generic Bootstrap text utilities that hardcode near-black */
html[data-theme="dark"] body.sp-body .text-dark { color: var(--sp-ink-900) !important; }
html[data-theme="dark"] body.sp-body .text-muted { color: var(--sp-ink-500) !important; }

/* =========================================================================
   Training schedule (/training-schedule + dashboard "next class" card)
   Built on the tokens above, so dark mode comes for free.
   ========================================================================= */

.sp-nextclass {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--acuk-blue), #4472c4);
    color: #fff; border-radius: var(--sp-r-lg); padding: 1.25rem 1.4rem;
    box-shadow: var(--sp-shadow-md);
}
.sp-nextclass .when {
    flex: 0 0 auto; text-align: center; line-height: 1.1;
    padding-right: 1.1rem; border-right: 1px solid rgba(255, 255, 255, .28);
}
.sp-nextclass .when .d { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-nextclass .when .m { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.sp-nextclass .body { flex: 1; min-width: 200px; }
.sp-nextclass .eyebrow { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.sp-nextclass .topic { font-size: 1.05rem; font-weight: 800; margin: .15rem 0; }
.sp-nextclass .meta { font-size: .82rem; opacity: .9; }
/* ---- Replay player + playlist --------------------------------------- */
/* .sp-player/.sp-replay-head/.sp-replay-empty are direct grid items (not
   nested in a wrapper) via named areas, not flex order - the sticky
   player's containing block needs to be this whole grid, tall enough to
   scroll past the playlist too, not just its own short column. */
.sp-replay-layout {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.5rem;
    align-items: start;
    grid-template-areas: "nav player" "nav head";
}
.sp-replay-nav { grid-area: nav; }
.sp-player { grid-area: player; }
.sp-replay-head { grid-area: head; }
.sp-replay-empty { grid-area: player; }
@media (max-width: 900px) {
    .sp-replay-layout { grid-template-columns: 1fr; gap: 1.1rem; grid-template-areas: "player" "head" "nav"; }
}

.sp-replay-nav {
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow-sm);
    padding: .5rem; max-height: 78vh; overflow-y: auto;
}
@media (max-width: 900px) { .sp-replay-nav { max-height: none; } }
.sp-replay-week + .sp-replay-week { margin-top: .5rem; }
.sp-replay-week .hd {
    font-size: .72rem; font-weight: 700; color: var(--sp-ink-500);
    padding: .5rem .6rem .35rem; display: flex; align-items: center; gap: .4rem;
}
.sp-replay-week .hd .n {
    font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    background: var(--sp-bg); color: var(--sp-ink-700); padding: .15rem .45rem; border-radius: var(--sp-r-pill);
}
.sp-replay-item {
    display: flex; gap: .6rem; align-items: center; padding: .55rem .6rem;
    border-radius: var(--sp-r-sm); text-decoration: none; color: var(--sp-ink-900);
}
.sp-replay-item:hover { background: var(--sp-bg); text-decoration: none; color: var(--sp-ink-900); }
.sp-replay-item.is-current { background: rgba(43, 86, 163, .1); }
.sp-replay-item .ico {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-bg); color: var(--sp-ink-500); font-size: .75rem;
}
.sp-replay-item.is-current .ico { background: var(--acuk-blue); color: #fff; }
.sp-replay-item .body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sp-replay-item .t {
    font-size: .84rem; font-weight: 700; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-replay-item .m { font-size: .72rem; color: var(--sp-ink-500); }
.sp-replay-item .m .done { color: var(--acuk-green); font-weight: 700; }

.sp-replay-next {
    margin: .6rem .4rem .2rem; padding: .6rem .6rem 0;
    border-top: 1px dashed var(--sp-border);
    font-size: .74rem; line-height: 1.4; color: var(--sp-ink-500);
}
.sp-replay-next i { margin-right: .35rem; opacity: .8; }

.sp-player video {
    width: 100%; display: block; background: #000;
    border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow-md);
    aspect-ratio: 16 / 9;
}
/* Mobile: the player stays pinned under the sticky top navbar while the
   class list / details below it scroll underneath, instead of scrolling
   out of view with everything else. 70px matches the navbar's rendered
   height (measured ~69px) plus a hair of breathing room. */
@media (max-width: 900px) {
    .sp-player {
        position: sticky; top: 70px; z-index: 20;
        background: var(--sp-bg); padding-bottom: .1rem;
    }
}
.sp-replay-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .3rem; min-height: 320px;
    background: var(--sp-surface); border: 1px dashed var(--sp-border);
    border-radius: var(--sp-r-md); padding: 2rem;
}
.sp-replay-empty i { font-size: 2rem; color: var(--sp-ink-500); margin-bottom: .4rem; }
.sp-replay-empty h2 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sp-replay-empty p { font-size: .88rem; color: var(--sp-ink-500); margin: 0; }

.sp-replay-head { margin-top: .9rem; }
.sp-replay-head .tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.sp-replay-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.sp-replay-head .meta { font-size: .85rem; color: var(--sp-ink-500); margin: .2rem 0 0; }
.sp-replay-head .meta a { color: var(--acuk-blue); }

.sp-nextclass .join-name-hint {
    margin-top: .5rem; padding: .4rem .6rem; border-radius: var(--sp-r-sm);
    background: rgba(255, 255, 255, .16); opacity: 1; line-height: 1.35;
}
.sp-nextclass .join-name-hint i { margin-right: .35rem; opacity: .85; }
.sp-nextclass .join-name-hint strong { font-weight: 800; }
.sp-nextclass .acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.sp-nextclass .sp-btn-primary { background: #fff; color: var(--acuk-blue); }
.sp-nextclass .sp-btn-primary:hover { color: var(--acuk-blue); }
.sp-nextclass .sp-btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.sp-nextclass .sp-btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---- Live / happening-now accent on the next-class banner ------------- */
.sp-nextclass.is-live {
    background: linear-gradient(135deg, #0f9d58, #16a34a);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .25), var(--sp-shadow-md);
}
.sp-nextclass.is-live .when { border-right-color: rgba(255, 255, 255, .35); }
.sp-nextclass .eyebrow .live-dot { margin-right: .35rem; }

.live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; vertical-align: middle;
    box-shadow: 0 0 0 0 currentColor; animation: sp-pulse 1.8s infinite;
}
@keyframes sp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- Weeks: collapsible <details> ------------------------------------- */
.sp-week { margin-top: 1.5rem; }
.sp-week:first-of-type { margin-top: .5rem; }
.sp-week[open] { margin-bottom: .5rem; }
.sp-week-head {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    list-style: none; cursor: pointer; padding: .5rem 0; margin-bottom: .5rem;
    border-bottom: 1px solid var(--sp-border);
}
.sp-week-head::-webkit-details-marker { display: none; }
.sp-week-head .n {
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: var(--acuk-blue); color: #fff; padding: .25rem .6rem; border-radius: var(--sp-r-pill);
}
.sp-week-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sp-week-head .chev { margin-left: auto; color: var(--sp-ink-500); transition: transform .2s var(--sp-ease); font-size: .8rem; }
.sp-week[open] .sp-week-head .chev { transform: rotate(180deg); }
.sp-week:not([open]) .sp-week-head { opacity: .72; }

.sp-sched { display: flex; flex-direction: column; gap: .7rem; padding-top: .3rem; }
.sp-sched-row {
    display: grid; grid-template-columns: 128px 1fr auto; gap: 1rem; align-items: center;
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow-sm); padding: .95rem 1.1rem;
    transition: border-color .15s var(--sp-ease);
}
.sp-sched-row.is-next { border-color: var(--acuk-blue); box-shadow: 0 0 0 1px var(--acuk-blue), var(--sp-shadow-sm); }
.sp-sched-row.is-live { border-color: var(--acuk-green); box-shadow: 0 0 0 2px rgba(22, 163, 74, .3), var(--sp-shadow-sm); }
.sp-sched-row.is-done { opacity: .62; box-shadow: none; }
.sp-sched-row .date { text-align: center; line-height: 1.15; }
.sp-sched-row .date .dd { font-size: 1.3rem; font-weight: 800; color: var(--sp-ink-900); font-variant-numeric: tabular-nums; }
.sp-sched-row .date .mo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-ink-500); }
.sp-sched-row .date .tbd { font-size: .8rem; font-weight: 700; color: var(--sp-ink-500); }
.sp-sched-row .main { min-width: 0; }
.sp-sched-row .tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
.sp-sched-row .topic { font-weight: 700; font-size: .96rem; color: var(--sp-ink-900); }
.sp-sched-row .time { font-size: .82rem; color: var(--sp-ink-500); margin-top: .15rem; }
.sp-sched-row .acts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.sp-sched-row .acts .sp-btn { padding: .5rem .9rem; font-size: .82rem; min-height: 0; }

.sp-type {
    display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: .22rem .55rem; border-radius: var(--sp-r-pill);
}
.sp-type.live { background: rgba(43, 86, 163, .13); color: var(--acuk-blue); }
.sp-type.workshop { background: rgba(246, 162, 30, .18); color: #b45309; }
.sp-type.recorded { background: rgba(15, 23, 42, .07); color: var(--sp-ink-700); }
.sp-type.presentation { background: rgba(22, 163, 74, .14); color: var(--acuk-green); }
.sp-type.project { background: rgba(139, 92, 246, .14); color: #7c3aed; }

.sp-phase {
    display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .22rem .55rem; border-radius: var(--sp-r-pill);
    background: var(--sp-bg); color: var(--sp-ink-500); border: 1px solid var(--sp-border);
}

.sp-status {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: .22rem .55rem; border-radius: var(--sp-r-pill);
}
.sp-status.upcoming { background: rgba(43, 86, 163, .1); color: var(--acuk-blue); }
.sp-status.live { background: var(--acuk-green); color: #fff; }
.sp-status.completed { background: var(--sp-bg); color: var(--sp-ink-500); }
.sp-status.current { background: var(--acuk-blue); color: #fff; }
.sp-status.live .live-dot { background: #fff; }

/* pre-recorded watch progress */
.sp-status.watch-not_watched { background: var(--sp-bg); color: var(--sp-ink-500); }
.sp-status.watch-watching { background: rgba(43, 86, 163, .12); color: var(--acuk-blue); }
.sp-status.watch-watched { background: rgba(22, 163, 74, .14); color: var(--acuk-green); }
.sp-status.watch-failed { background: rgba(246, 5, 8, .12); color: var(--acuk-red); }

/* live-session attendance */
.sp-status.att-attended { background: rgba(22, 163, 74, .14); color: var(--acuk-green); }
.sp-status.att-partial { background: rgba(246, 162, 30, .18); color: #b45309; }
.sp-status.att-absent { background: rgba(246, 5, 8, .12); color: var(--acuk-red); }

@media (max-width: 620px) {
    .sp-sched-row { grid-template-columns: 56px 1fr; gap: .8rem; padding: .85rem .9rem; }
    .sp-sched-row .date .dd { font-size: 1.1rem; }
    .sp-sched-row .date .mo { font-size: .64rem; }
    .sp-sched-row .acts { grid-column: 1 / -1; justify-content: stretch; gap: .5rem; }
    .sp-sched-row .acts .sp-btn { min-height: 42px; padding: .55rem 1rem; font-size: .85rem; flex: 1 1 auto; }
    .sp-sched-row .acts .sp-btn-ghost { flex: 0 0 auto; min-width: 46px; }

    /* Each week becomes its own bordered group so weeks don't blur together.
       Border only (no fill) — the session rows keep their own surface + shadow
       and sit visibly inside the group. */
    .sp-week, .sp-week:first-of-type { margin: 1.15rem 0 0; }
    .sp-week {
        border: 1px solid var(--sp-border);
        border-radius: var(--sp-r-md);
        background: var(--sp-bg);
        padding: 0 .8rem;
    }
    .sp-week[open] { margin-bottom: 1.15rem; padding-bottom: .85rem; }
    .sp-week.is-current { border-color: var(--acuk-blue); box-shadow: 0 0 0 1px var(--acuk-blue); }

    /* header: full-width tap target, divider only shows once expanded */
    .sp-week-head {
        position: relative; padding: .95rem 1.6rem .95rem 0; margin: 0;
        border-bottom: 0; cursor: pointer;
    }
    .sp-week[open] .sp-week-head { border-bottom: 1px solid var(--sp-border); margin-bottom: .7rem; }
    .sp-week:not([open]) .sp-week-head { opacity: 1; }
    .sp-week-head h2 { font-size: 1rem; }
    .sp-week-head .chev { position: absolute; right: 0; top: 1.1rem; margin-left: 0; font-size: .9rem; }
}

/* Next-class banner: stack cleanly on a phone */
@media (max-width: 560px) {
    .sp-nextclass { padding: 1.1rem; gap: .8rem; }
    .sp-nextclass .when {
        display: flex; align-items: baseline; gap: .4rem;
        padding-right: 0; border-right: 0;
    }
    .sp-nextclass .when .d { font-size: 1.3rem; }
    .sp-nextclass .when .m { font-size: .8rem; }
    .sp-nextclass .body { min-width: 100%; }
    .sp-nextclass .acts { width: 100%; }
    .sp-nextclass .acts .sp-btn { flex: 1 1 auto; }
}

/* Dark tweaks */
html[data-theme="dark"] body.sp-body .sp-type.workshop { color: #fbbf24; }
html[data-theme="dark"] body.sp-body .sp-type.recorded { background: rgba(255, 255, 255, .08); color: var(--sp-ink-700); }
html[data-theme="dark"] body.sp-body .sp-type.project { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
html[data-theme="dark"] body.sp-body .sp-phase { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] body.sp-body .sp-status.upcoming,
html[data-theme="dark"] body.sp-body .sp-status.watch-watching { background: rgba(120, 156, 201, .18); color: #9db8dc; }
html[data-theme="dark"] body.sp-body .sp-status.completed,
html[data-theme="dark"] body.sp-body .sp-status.watch-not_watched { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] body.sp-body .sp-status.watch-failed,
html[data-theme="dark"] body.sp-body .sp-status.att-absent { color: #f87171; }
html[data-theme="dark"] body.sp-body .sp-status.att-partial { color: #fbbf24; }
html[data-theme="dark"] body.sp-body .sp-nextclass .sp-btn-primary { background: #fff; color: var(--acuk-blue); }
html[data-theme="dark"] body.sp-body .sp-nextclass.is-live .sp-btn-primary { color: #0f9d58; }