/**
 * OCJS student UI v2 — unified app shell.
 *
 * Scope: everything here lives under body.ocjs-v2 so v1 pages are untouched.
 * Design language: white canvas, hairline dividers, pill interactives,
 * 20-24px cards (meta-DESIGN.md). Brand tones derive from --ov2-accent via
 * color-mix so the school color re-themes everything.
 *
 * DO NOT rename ocjs-* classes referenced here — most are part of the
 * portal.js DOM contract (see project memory). ov2-* classes are v2-only
 * chrome and free to change.
 */

body.ocjs-v2 {
    --ov2-accent: #E62538;
    --ov2-accent-soft: color-mix(in srgb, var(--ov2-accent) 8%, #fff);
    --ov2-accent-softer: color-mix(in srgb, var(--ov2-accent) 4%, #fff);
    --ov2-accent-glow: color-mix(in srgb, var(--ov2-accent) 35%, transparent);
    --ov2-ink: #0f172a;
    --ov2-body: #475569;
    --ov2-muted: #94a3b8;
    --ov2-line: #e2e8f0;
    --ov2-line-soft: #f1f5f9;
    --ov2-bg: #f8fafc;
    --ov2-sidebar-w: 372px;
    --ov2-topbar-h: 64px;
    --ov2-radius: 20px;
    --ov2-pill: 100px;
    --ov2-font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--ov2-bg) !important;
}

/* ═══════════ SHELL: SIDEBAR ═══════════ */

body.ocjs-v2 .ov2-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ov2-sidebar-w);
    background: #fff;
    border-right: 1px solid var(--ov2-line);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    font-family: var(--ov2-font);
    box-sizing: border-box;
}

body.ocjs-v2 .ov2-sidebar__logo {
    /* Exactly the topbar height so the two divider lines meet as one.
       Literal fallback: if the variable ever goes missing (CSS optimizers),
       both bars still land on the same 64px line. */
    height: var(--ov2-topbar-h, 64px);
    min-height: var(--ov2-topbar-h, 64px);
    display: flex;
    align-items: center;
    padding: 0 22px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--ov2-line);
    flex-shrink: 0;
}

body.ocjs-v2 .ov2-sidebar__logo img {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

body.ocjs-v2 .ov2-sidebar__mobile-close {
    display: none;
}

body.ocjs-v2 .ov2-sidebar__body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--ov2-line) transparent;
}

body.ocjs-v2 .ov2-sidebar__footer {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--ov2-line-soft);
}

/* Nav rows — Redi-style pills */
body.ocjs-v2 .ov2-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.ocjs-v2 .ov2-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: var(--ov2-pill);
    color: var(--ov2-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

body.ocjs-v2 .ov2-nav a i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

body.ocjs-v2 .ov2-nav a:hover {
    background: var(--ov2-line-soft);
    color: var(--ov2-ink);
}

body.ocjs-v2 .ov2-nav a.is-active {
    background: var(--ov2-accent);
    color: #fff;
    box-shadow: 0 6px 14px -6px var(--ov2-accent-glow);
}

body.ocjs-v2 .ov2-nav__logout { color: #dc2626 !important; }
body.ocjs-v2 .ov2-nav__logout:hover { background: #fef2f2 !important; color: #b91c1c !important; }

/* ═══════════ SHELL: TOPBAR ═══════════ */

body.ocjs-v2 .ov2-topbar {
    position: fixed;
    top: 0;
    left: var(--ov2-sidebar-w);
    right: 0;
    height: var(--ov2-topbar-h, 64px);
    min-height: var(--ov2-topbar-h, 64px);
    /* Seamless with the content below — no divider, same canvas tone. */
    background: var(--ov2-bg);
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    z-index: 1000;
    font-family: var(--ov2-font);
    box-sizing: border-box;
}

body.ocjs-v2 .ov2-topbar:empty { display: none; }

body.ocjs-v2 .ov2-topbar__greeting {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    color: var(--ov2-body);
    letter-spacing: -0.16px;
    min-width: 0;
}

body.ocjs-v2 .ov2-topbar__greeting strong {
    color: var(--ov2-accent);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ocjs-v2 .ov2-topbar__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.ocjs-v2 .ov2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ov2-line);
    border-radius: var(--ov2-pill);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ov2-body);
    text-decoration: none;
    white-space: nowrap;
}

body.ocjs-v2 .ov2-chip--clock strong {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--ov2-ink);
}

body.ocjs-v2 .ov2-chip--user:hover { background: var(--ov2-line-soft); }

body.ocjs-v2 .ov2-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

/* Hamburger — hidden on desktop */
body.ocjs-v2 .ov2-topbar__menu,
body.ocjs-v2 .ov2-float-toggle {
    display: none;
    background: var(--ov2-line-soft);
    border: 1px solid var(--ov2-line);
    width: 40px;
    height: 40px;
    border-radius: var(--ov2-pill);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}

body.ocjs-v2 .ov2-ham { display: flex; flex-direction: column; gap: 5px; width: 18px; }
body.ocjs-v2 .ov2-ham span { display: block; height: 2px; background: var(--ov2-ink); border-radius: 2px; }
body.ocjs-v2 .ov2-ham span:first-child { width: 18px; }
body.ocjs-v2 .ov2-ham span:nth-child(2) { width: 13px; }
body.ocjs-v2 .ov2-ham span:last-child { width: 16px; }

/* ═══════════ PAGE OFFSETS ═══════════ */
/* Canvas templates hard-reset body padding with !important, so the offset
   goes on the content siblings instead of body. */


@media (min-width: 1025px) {
    /* General pages: everything in the canvas root except the shell itself.
       width is recalculated — a plain margin-left on a 100%-wide block shoves
       it past the right edge of the viewport. */
    body.ocjs-v2 #ocjs-canvas-root > *:not(.ov2-sidebar):not(.ov2-topbar):not(script):not(style) {
        margin-left: var(--ov2-sidebar-w);
        width: calc(100% - var(--ov2-sidebar-w));
        max-width: calc(100% - var(--ov2-sidebar-w));
        padding-top: var(--ov2-topbar-h);
        box-sizing: border-box;
    }

    /* Course pages: one wrapper, one rule. The lesson variant gets its
       top offset from the repositioned lesson header instead. */
    body.ocjs-v2 .ov2-canvas {
        margin-left: var(--ov2-sidebar-w) !important;
        width: calc(100% - var(--ov2-sidebar-w)) !important;
        max-width: calc(100% - var(--ov2-sidebar-w)) !important;
        box-sizing: border-box;
        padding-top: 0 !important;
        /* NOTE: no overflow here. `overflow-x: clip` (or hidden/auto) on this
           ancestor makes it the scroll box for `position: sticky` descendants,
           which prevents the lesson audio player from sticking to the viewport.
           Horizontal-overflow clipping is handled at the body level instead. */
    }
}

/* No shell, no offset. A logged-out visitor gets no sidebar rendered (see
   OCJS_Portal::render_portal_header), so the offsets above would reserve a
   blank column down the left of the login and registration screens. Declared
   after them, and outside the media query, so it wins at every width. */
body.ocjs-v2--no-shell #ocjs-canvas-root > *,
body.ocjs-v2--no-shell .ov2-canvas {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
}

/* Keep horizontal overflow contained WITHOUT breaking window-level sticky.
   Clipping on <body> (the scroll container itself) is safe for sticky, unlike
   clipping on an intermediate ancestor such as .ov2-canvas. */
body.ocjs-v2 {
    overflow-x: clip;
}

/* v1 grid on .ocjs-portal-layout must not apply — the sidebar is not a grid
   column any more, it is the fixed shell. */
body.ocjs-v2 .ocjs-portal-layout.ov2-canvas {
    display: block;
    grid-template-columns: none;
}

/* ═══════════ FULL-SCREEN EXAM MODE ═══════════
   While a student is taking the exam (exam.js adds .ocjs-exam-active to
   <body>), hide the portal sidebar + topbar and let the exam use the whole
   viewport, distraction-free. Removed again on the start / results screens. */
body.ocjs-exam-active .ov2-sidebar,
body.ocjs-exam-active .ov2-topbar,
body.ocjs-exam-active .ov2-float-toggle,
body.ocjs-exam-active .ocjs-sidebar-toggle {
    display: none !important;
}
/* Both offset rules above have to be undone, not just the course one. The
   exam page is a plain shortcode page, so it is matched by the
   `#ocjs-canvas-root > *` rule rather than `.ov2-canvas` — with only the
   latter reset the sidebar disappeared but its column did not, leaving a dead
   strip down the left and the content pushed off the right edge. */
body.ocjs-exam-active.ocjs-v2 .ov2-canvas,
body.ocjs-exam-active.ocjs-v2 #ocjs-canvas-root > *:not(.ov2-sidebar):not(.ov2-topbar):not(script):not(style):not(#ocjs-exam-app) {
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-top: 0 !important;
}

/* The exam container is excluded from the reset above and handled here, so it
   keeps the max-width authored in portal.css and simply re-centres in the
   space the hidden sidebar gave back. Letting the blanket
   `max-width: none` reach it stretched the card across the viewport and fanned
   the 50 question buttons into one long row. */
body.ocjs-exam-active #ocjs-exam-app {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    box-sizing: border-box;
}

/* Belt and braces: if the theme wraps the_content() in its own element, the
   exam app is no longer a direct child of the canvas root and the reset above
   lands on that wrapper instead. Neutralise the offset on any ancestor of the
   exam between the two, so the dead left column cannot come back through a
   theme change. */
body.ocjs-exam-active.ocjs-v2 #ocjs-canvas-root > *:has(#ocjs-exam-app) {
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-top: 0 !important;
}
body.ocjs-exam-active .ocjs-portal-main__content {
    max-width: 900px;   /* keep the exam readable / centered on wide screens */
    margin: 0 auto;
    padding: 28px 24px 64px;
}

/* ═══════════ COURSE SIDEBAR (outline mode) ═══════════ */
/* The outline markup is the portal.js contract — restyle only. */

body.ocjs-v2 .ov2-sidebar--outline .ov2-sidebar__body { padding: 0; }

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ov2-line-soft);
    background: #fff;
    min-height: 0;
    box-shadow: none;
    flex-shrink: 0;
}

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar-back {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ov2-pill);
    background: var(--ov2-line-soft);
    color: var(--ov2-ink);
    text-decoration: none;
    flex-shrink: 0;
    font-size: 13px;
}

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar-back:hover { background: var(--ov2-line); }

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar__title {
    font-family: var(--ov2-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.14px;
    color: var(--ov2-ink);
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--ov2-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
}

body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar__content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
}

/* Unit headers */
body.ocjs-v2 .ocjs-sidebar-unit { border: none; }

body.ocjs-v2 .ocjs-sidebar-unit__header {
    background: transparent !important;
    border: none !important;
    padding: 12px 12px 6px !important;
    color: var(--ov2-muted) !important;
    font-family: var(--ov2-font);
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em !important;
}

body.ocjs-v2 .ocjs-sidebar-unit.is-active .ocjs-sidebar-unit__header {
    color: var(--ov2-accent) !important;
    background: transparent !important;
    border-left: none !important;
}

body.ocjs-v2 .ocjs-sidebar-unit--accordion .ocjs-sidebar-unit__header {
    cursor: pointer;
    border-radius: 10px;
}

body.ocjs-v2 .ocjs-sidebar-unit--accordion .ocjs-sidebar-unit__header:hover {
    background: var(--ov2-line-soft) !important;
}

/* Lesson rows — pill style, active = brand fill */
body.ocjs-v2 .ocjs-sidebar-lesson__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: var(--ov2-pill) !important;
    font-family: var(--ov2-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ov2-body) !important;
    text-decoration: none;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s;
}

body.ocjs-v2 .ocjs-sidebar-lesson__link:hover {
    background: var(--ov2-line-soft) !important;
    transform: none;
}

body.ocjs-v2 .ocjs-sidebar-lesson.is-current .ocjs-sidebar-lesson__link {
    background: var(--ov2-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px var(--ov2-accent-glow) !important;
}

body.ocjs-v2 .ocjs-sidebar-lesson.is-current .ocjs-sidebar-lesson__link .dashicons,
body.ocjs-v2 .ocjs-sidebar-lesson.is-current .ocjs-sidebar-lesson__title {
    color: #fff !important;
}

body.ocjs-v2 .ocjs-sidebar-lessons { padding: 2px 0 8px; margin: 0; list-style: none; }
body.ocjs-v2 .ocjs-sidebar-lesson { list-style: none; }

/* Sidebar account footer (v1 appnav) restyles to the v2 nav look */
body.ocjs-v2 .ocjs-sidebar-appnav {
    border-top: 1px solid var(--ov2-line-soft);
    background: transparent;
}

/* ═══════════ LESSON PAGE: header becomes the topbar ═══════════ */
/* .ocjs-lesson-view__header carries the status chip and
   #ocjs-daily-remaining-wrap portal.js reads — reposition, don't rebuild. */

@media (min-width: 1025px) {
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header {
        position: fixed;
        top: 0;
        left: var(--ov2-sidebar-w);
        right: 0;
        height: var(--ov2-topbar-h);
        margin: 0;
        padding: 0 28px;
        background: #fff;
        border-bottom: 1px solid var(--ov2-line);
        border-radius: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        gap: 14px;
        z-index: 1000;
        box-sizing: border-box;
    }

    body.ocjs-v2 .ov2-canvas--lesson .ocjs-portal-main {
        padding-top: var(--ov2-topbar-h);
    }

    /* The lesson header is fixed at the top (64px) on desktop, so the sticky
       audio player must pin just BELOW it — otherwise it slides under the
       header. Add a small gap. */
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-tts {
        top: calc(var(--ov2-topbar-h) + 10px);
    }
}

/* ═══════════ CONTENT SURFACES ═══════════ */

body.ocjs-v2 .ocjs-portal-main {
    background: var(--ov2-bg);
    min-height: 100vh;
    /* v1 sets `.ocjs-portal-main { overflow-y: auto }` for an inner scroll
       panel. In v2 the WINDOW scrolls, and that overflow makes this element a
       scroll container — which breaks `position: sticky` on the audio player
       (any non-visible overflow ancestor captures the sticky). Force visible. */
    overflow: visible;
}

body.ocjs-v2 .ocjs-portal-main__content {
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 32px 64px;
    box-sizing: border-box;
}

/* My Courses — restyled to shell language */
body.ocjs-v2 .ocjs-course-selector {
    margin: 16px auto 48px;
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ocjs-selector__header h2 {
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ov2-ink);
}

body.ocjs-v2 .ocjs-cs-card {
    border: 1px solid var(--ov2-line);
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

body.ocjs-v2 .ocjs-cs-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cs-primary, var(--ov2-accent)) 25%, transparent);
    box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--cs-primary, var(--ov2-accent)) 25%, transparent);
}

/* ═══════════ MOBILE ═══════════ */

@media (max-width: 1024px) {
    body.ocjs-v2 .ov2-sidebar {
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 6px 0 32px rgba(15, 23, 42, 0.18);
        width: 98vw !important;
        max-width: none !important;
    }

    /* portal.js toggles is-open on .ocjs-portal-sidebar; the nav-mode shell
       also carries that class so one code path drives both. */
    body.ocjs-v2 .ov2-sidebar.is-open { transform: translateX(0); }

    body.ocjs-v2 .ov2-sidebar__mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-left: auto;
        padding: 0;
        border: 1px solid var(--ov2-line);
        border-radius: 50%;
        background: var(--ov2-line-soft);
        color: var(--ov2-ink);
        font-size: 17px;
        cursor: pointer;
    }

    body.ocjs-v2 .ov2-topbar {
        left: 0;
        padding: 0 14px;
        gap: 10px;
    }

    body.ocjs-v2 .ov2-topbar__menu { display: flex; }
    body.ocjs-v2 .ov2-float-toggle {
        display: flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 999;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
        background: #fff;
    }

    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header { padding-left: 64px; }
    body.ocjs-v2 .ov2-topbar__chip--clock span { display: none; }
    body.ocjs-v2 .ov2-chip--user span:last-child {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.ocjs-v2 .ocjs-portal-main__content { padding: 18px 14px 48px; }

    body.ocjs-v2 .ov2-sidebar--outline .ocjs-sidebar-close { display: block; }
}

@media (max-width: 480px) {
    body.ocjs-v2 .ov2-chip--clock { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.ocjs-v2 .ov2-sidebar,
    body.ocjs-v2 .ocjs-cs-card,
    body.ocjs-v2 .ov2-nav a { transition: none; }
}

/* ═══════════ SPACING PASS (feedback round 1) ═══════════ */

/* Dashboard mode: content clears the fixed topbar. */
@media (min-width: 1025px) {
    body.ocjs-v2 .ov2-canvas:not(.ov2-canvas--lesson) .ocjs-portal-main {
        padding-top: var(--ov2-topbar-h);
    }
}

/* The v1 dashboard wrappers stack their own padding on top of the v2
   content wrapper — collapse the duplicates. */
body.ocjs-v2 .ocjs-portal-main__content {
    /* Full-bleed like the topbar — same 28px side padding, no centering cap. */
    max-width: none;
    margin: 0;
    padding: 20px 28px 56px;
}

body.ocjs-v2 .ocjs-dashboard__main {
    padding: 8px 0 0;
}

body.ocjs-v2 .ocjs-cta-card {
    padding: 40px 44px;
    min-height: 170px;
    margin-bottom: 22px;
}

body.ocjs-v2 .ocjs-summary-grid { margin-bottom: 22px; }

/* Outline sidebar: the course head sits tighter under the logo. */
body.ocjs-v2 .ov2-sidebar--outline .ov2-course-head { padding: 12px 14px; }

/* ═══════════ DASHBOARD BODY — Redi-clean pass (meta-DESIGN) ═══════════ */

/* CTA hero: flat brand surface, no gradient, no floating bubbles.
   One color, one message, one button. */
body.ocjs-v2 .ocjs-cta-card {
    background: var(--ocjs-primary, #E62538);
    border-radius: 24px;
    padding: 34px 38px;
    min-height: 0;
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ocjs-primary, #E62538) 45%, transparent);
}

body.ocjs-v2 .ocjs-cta-card::before,
body.ocjs-v2 .ocjs-cta-card::after { display: none; }

body.ocjs-v2 .ocjs-cta-card__content h3 { font-size: 23px; margin-bottom: 6px; }
body.ocjs-v2 .ocjs-cta-card__content p { font-size: 14.5px; margin-bottom: 20px; opacity: 0.9; }
body.ocjs-v2 .ocjs-cta-card .ocjs-button--primary { padding: 13px 26px; font-size: 14px; }
body.ocjs-v2 .ocjs-cta-card__icon { opacity: 0.5; }

/* Edit buttons: quiet ghost pills — the hero is the only loud element.
   (v1 renders these with inline styles, hence the !importants.) */
body.ocjs-v2 .ocjs-dashboard__cta + div > a,
body.ocjs-v2 a[href*="student-info"],
body.ocjs-v2 a[href*="parent-verification"] {
    background: #fff !important;
    color: var(--ov2-ink, #0f172a) !important;
    border: 1px solid var(--ov2-line, #e2e8f0) !important;
    border-radius: 100px !important;
    box-shadow: none !important;
}

body.ocjs-v2 a[href*="student-info"] i,
body.ocjs-v2 a[href*="parent-verification"] i { color: var(--ocjs-primary, #E62538); }

body.ocjs-v2 a[href*="student-info"]:hover,
body.ocjs-v2 a[href*="parent-verification"]:hover {
    background: var(--ov2-line-soft, #f1f5f9) !important;
}

/* Stat tiles: calmer — hairline, soft shadow, no hover stripe/lift. */
body.ocjs-v2 .ocjs-summary-item {
    border: 1px solid var(--ov2-line, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.ocjs-v2 .ocjs-summary-item::before { display: none; }

/* Stat tiles are static readouts — no hover state at all. Every v1 hover
   (lift, tinted border, icon fill swap, per-variant colors) is pinned back
   to the rest state. */
body.ocjs-v2 .ocjs-summary-item,
body.ocjs-v2 .ocjs-summary-item:hover {
    transform: none;
    transition: none;
    border-color: var(--ov2-line, #e2e8f0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.ocjs-v2 .ocjs-summary-item:hover .ocjs-summary-item__icon {
    background: inherit;
    transform: none;
}

body.ocjs-v2 .ocjs-summary-item .ocjs-summary-item__icon,
body.ocjs-v2 .ocjs-summary-item:hover .ocjs-summary-item__icon {
    transition: none;
}

body.ocjs-v2 .ocjs-summary-item:hover .ocjs-summary-item__icon { background: var(--ocjs-primary-soft); }
body.ocjs-v2 .ocjs-summary-item:hover .ocjs-summary-item__icon .dashicons { color: var(--ocjs-primary); }
body.ocjs-v2 .ocjs-summary-item--completed:hover .ocjs-summary-item__icon { background: #f0fdf4; }
body.ocjs-v2 .ocjs-summary-item--completed:hover .ocjs-summary-item__icon .dashicons { color: #16a34a; }
body.ocjs-v2 .ocjs-summary-item--expiry:hover .ocjs-summary-item__icon { background: #eff6ff; }
body.ocjs-v2 .ocjs-summary-item--expiry:hover .ocjs-summary-item__icon .dashicons { color: #2563eb; }
body.ocjs-v2 .ocjs-summary-item--expiry-warning:hover .ocjs-summary-item__icon { background: #fffbeb; }
body.ocjs-v2 .ocjs-summary-item--expiry-warning:hover .ocjs-summary-item__icon .dashicons { color: #d97706; }
body.ocjs-v2 .ocjs-summary-item--expired:hover .ocjs-summary-item__icon { background: #fef2f2; }
body.ocjs-v2 .ocjs-summary-item--expired:hover .ocjs-summary-item__icon .dashicons { color: #dc2626; }

/* Syllabus: a proper card with a header, like Redi's section cards. */
body.ocjs-v2 .ocjs-dashboard__syllabus-intro {
    background: #fff;
    border: 1px solid var(--ov2-line, #e2e8f0);
    border-radius: 20px;
    padding: 26px 30px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.ocjs-v2 .ocjs-dashboard__syllabus-intro h4 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ov2-ink, #0f172a);
    border: none;
    padding: 0 0 4px;
    margin: 0 0 10px;
}

body.ocjs-v2 .ocjs-dashboard__syllabus-desc {
    color: var(--ov2-body, #475569);
    font-size: 14.5px;
    line-height: 1.65;
    padding: 0;
    margin: 0 0 8px;
}

/* When the course has its own description, drop the boilerplate intro —
   the two texts were printing back-to-back. */
body.ocjs-v2 .ocjs-dashboard__syllabus-intro:has(.ocjs-dashboard__content p) .ocjs-dashboard__syllabus-desc {
    display: none;
}

body.ocjs-v2 .ocjs-dashboard__content {
    color: var(--ov2-body, #475569);
    font-size: 14.5px;
    line-height: 1.65;
}

/* Dev zone: keep the identity, lose the noise. */
body.ocjs-v2 .ocjs-dev-video-stats {
    background: #fff;
    border: 1px dashed #c7d2fe;
    box-shadow: none;
}

/* ═══════════ OUTLINE — quiet pass ═══════════ */
/* Status lives in the small icons; text stays neutral ink. Only the
   current lesson is loud (brand pill). Unit labels are quiet section
   markers, not headings competing with the content. */

body.ocjs-v2 .ocjs-sidebar-unit__header {
    color: var(--ov2-muted) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}

body.ocjs-v2 .ocjs-sidebar-unit.is-active .ocjs-sidebar-unit__header {
    color: var(--ov2-ink) !important;
}

body.ocjs-v2 .ocjs-sidebar-unit__toggle {
    color: var(--ov2-muted) !important;
    font-size: 14px;
    /* Dashicons carry a fixed 20px box — shrink it so the glyph centers
       on the flex row instead of riding high. */
    width: 14px;
    height: 14px;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* No tinted block behind the lesson group. */
body.ocjs-v2 .ocjs-sidebar-unit,
body.ocjs-v2 .ocjs-sidebar-unit__content,
body.ocjs-v2 .ocjs-sidebar-module,
body.ocjs-v2 .ocjs-sidebar-lessons {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Lesson titles: neutral, whatever the status — the icon tells the story. */
body.ocjs-v2 .ocjs-sidebar-lesson__title,
body.ocjs-v2 .ocjs-sidebar-lesson--completed .ocjs-sidebar-lesson__title,
body.ocjs-v2 .ocjs-sidebar-lesson--in_progress .ocjs-sidebar-lesson__title,
body.ocjs-v2 .ocjs-sidebar-lesson--needs_review .ocjs-sidebar-lesson__title {
    color: var(--ov2-body) !important;
    font-weight: 600;
}

body.ocjs-v2 .ocjs-sidebar-lesson__status .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Current lesson stays the single loud element. */
body.ocjs-v2 .ocjs-sidebar-lesson.is-current .ocjs-sidebar-lesson__title {
    color: #fff !important;
}

body.ocjs-v2 .ocjs-sidebar-lesson__link { padding: 9px 12px !important; }

/* ═══════════ LESSON DETAIL — meta-DESIGN pass ═══════════ */

/* Header: seamless with the canvas, same as the dashboard topbar. */
@media (min-width: 1025px) {
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header {
        background: var(--ov2-bg);
        border-bottom: none;
    }
}

body.ocjs-v2 .ocjs-lesson-view__header { box-shadow: none; }

body.ocjs-v2 .ocjs-lesson-view__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.16px;
    color: var(--ov2-ink);
}

/* Back button: quiet ghost pill — the page has one primary action and it
   is "Mark as Complete", not "go back". */
body.ocjs-v2 .ocjs-lesson-view__back {
    background: #fff !important;
    color: var(--ov2-ink) !important;
    border: 1px solid var(--ov2-line) !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
}

body.ocjs-v2 .ocjs-lesson-view__back:hover {
    background: var(--ov2-line-soft) !important;
    transform: none !important;
}

body.ocjs-v2 .ocjs-lesson-view__back .dashicons { color: var(--ocjs-primary); }

/* Header chips: white surface + hairline, like the topbar chips. */
body.ocjs-v2 .ocjs-daily-remaining {
    background: #fff;
    border: 1px solid var(--ov2-line);
    border-radius: 100px;
}

/* Lesson body: one clean white card on the canvas. */
body.ocjs-v2 .ocjs-lesson-view__body {
    background: #fff;
    /* Borderless, Redi-style: the soft shadow alone lifts the card. */
    border: none;
    border-radius: 24px;
    padding: 36px 40px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
}

body.ocjs-v2 .ocjs-lesson-view__body-wrap {
    /* Side gutters come from .ocjs-portal-main__content (28px) alone —
       stacking another 28px here pushed the card in past the header. */
    max-width: none;
    margin: 0;
    padding: 24px 0 56px;
}

/* Audio player: hairline instead of heavy shadow. */
body.ocjs-v2 .ocjs-tts {
    border: 1px solid var(--ov2-line);
    box-shadow: none;
    background: var(--ov2-bg);
}

/* Body copy rhythm. */
body.ocjs-v2 .ocjs-lesson-view__content {
    color: var(--ov2-body);
    font-size: 15px;
    line-height: 1.7;
}

body.ocjs-v2 .ocjs-lesson-view__content h2,
body.ocjs-v2 .ocjs-lesson-view__content h3 {
    color: var(--ov2-ink);
    letter-spacing: -0.02em;
}

/* Caption band picks up the v2 tokens so it sits with this theme's
   surfaces instead of the base stylesheet's fixed greys. */
body.ocjs-v2 .ocjs-lesson-view__content figcaption,
body.ocjs-v2 .ocjs-lesson-view__content .wp-element-caption {
    background: var(--ov2-bg);
    border-color: var(--ov2-line, #e2e8f0);
    /* --ov2-muted (#94a3b8) is placeholder-grey and drops under 4.5:1
       at this size; the body token stays legible while still reading
       as secondary to the prose. */
    color: var(--ov2-body, #475569);
}

@media (max-width: 1024px) {
    body.ocjs-v2 .ocjs-lesson-view__body { padding: 22px 18px; border-radius: 18px; }
    body.ocjs-v2 .ocjs-lesson-view__body-wrap { padding: 14px 0 40px; }
}

/* ═══════════ COMPLETED BANNER — meta pass + contrast fix ═══════════ */

/* Flat soft-success surface: no gradient, hairline, calm. Green is
   semantic (success) and stays green regardless of school brand. */
body.ocjs-v2 .ocjs-lesson-view__completed-actions {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 18px;
    padding: 18px 22px;
}

body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-completed-message {
    font-size: 14px;
    color: #166534;
}

/* Contrast guard: the button label is ALWAYS white, rest and hover alike.
   Something in the old cascade painted it red-on-red mid-hover. */
body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary,
body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary:hover,
body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary:focus,
body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary:active {
    color: #fff !important;
    background: var(--ocjs-primary, #E62538) !important;
}

body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary .dashicons {
    color: #fff !important;
}

body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary:hover {
    transform: translateY(-1px);
    /* Clearly darker on hover — the earlier 6% dim was invisible. */
    background: color-mix(in srgb, var(--ocjs-primary, #E62538) 78%, #000) !important;
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--ocjs-primary, #E62538) 60%, transparent);
}

body.ocjs-v2 .ocjs-lesson-view__completed-actions .ocjs-button--primary:active {
    transform: translateY(0);
}

/* ═══════════ OUTLINE UTILITY PASS: progress, counts, durations ═══════ */

body.ocjs-v2 .ov2-course-progress {
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--ov2-line-soft);
    flex-shrink: 0;
}

body.ocjs-v2 .ov2-course-progress__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
}

body.ocjs-v2 .ov2-course-progress__label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ov2-muted);
}

body.ocjs-v2 .ov2-course-progress__count {
    font-size: 12px;
    color: var(--ov2-body);
}

body.ocjs-v2 .ov2-course-progress__count strong { color: var(--ov2-accent); font-weight: 800; }

body.ocjs-v2 .ov2-course-progress__bar {
    height: 6px;
    background: var(--ov2-line-soft);
    border-radius: 100px;
    overflow: hidden;
}

body.ocjs-v2 .ov2-course-progress__fill {
    height: 100%;
    border-radius: 100px;
    background: var(--ov2-accent);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Per-unit counter chip; green when the unit is finished. */
body.ocjs-v2 .ov2-unit-count {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ov2-muted);
    background: var(--ov2-line-soft);
    border-radius: 100px;
    padding: 2px 8px;
    flex-shrink: 0;
}

body.ocjs-v2 .ov2-unit-count.is-done {
    color: #166534;
    background: #f0fdf4;
}

/* Lesson duration, right-aligned and quiet. */
body.ocjs-v2 .ocjs-sidebar-lesson__link { justify-content: flex-start; }
body.ocjs-v2 .ocjs-sidebar-lesson__title { flex: 1; min-width: 0; }

body.ocjs-v2 .ov2-lesson-mins {
    font-size: 11px;
    font-weight: 600;
    color: var(--ov2-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

body.ocjs-v2 .ocjs-sidebar-lesson.is-current .ov2-lesson-mins {
    color: rgba(255, 255, 255, 0.85);
}

/* Sidebar right edge: exactly one hairline. The aside carries the v1
   .ocjs-portal-sidebar class too (mobile-toggle contract), whose old border
   was doubling the edge. */
body.ocjs-v2 .ov2-sidebar,
body.ocjs-v2 .ocjs-portal-sidebar.ov2-sidebar {
    border: none !important;
    border-right: 1px solid var(--ov2-line) !important;
    box-shadow: none;
}

body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar-nav {
    border: none !important;
}

@media (max-width: 1024px) {
    body.ocjs-v2 .ov2-sidebar {
        box-shadow: 6px 0 32px rgba(15, 23, 42, 0.18);
    }
}

/* The "thick edge" next to the 1px border is the always-visible thin
   scrollbar track hugging the sidebar's right side. Hide it until the
   list is actually being scrolled/hovered. */
body.ocjs-v2 .ov2-sidebar__body,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

body.ocjs-v2 .ov2-sidebar__body:hover,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content:hover {
    scrollbar-color: var(--ov2-line) transparent;
}

body.ocjs-v2 .ov2-sidebar__body::-webkit-scrollbar,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content::-webkit-scrollbar { width: 6px; }

body.ocjs-v2 .ov2-sidebar__body::-webkit-scrollbar-track,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content::-webkit-scrollbar-track { background: transparent; }

body.ocjs-v2 .ov2-sidebar__body::-webkit-scrollbar-thumb,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 100px;
}

body.ocjs-v2 .ov2-sidebar__body:hover::-webkit-scrollbar-thumb,
body.ocjs-v2 .ov2-sidebar .ocjs-sidebar__content:hover::-webkit-scrollbar-thumb {
    background: var(--ov2-line);
}

/* ═══════════ CTA CARD — icon badge + button icon rhythm ═══════════ */

/* Corner icon: a soft circular badge instead of a floating ghost glyph. */
body.ocjs-v2 .ocjs-cta-card__icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1;
}

body.ocjs-v2 .ocjs-cta-card__icon i {
    font-size: 34px;
    color: rgba(255, 255, 255, 0.9);
}

body.ocjs-v2 .ocjs-cta-card__icon .dashicons { display: none; }

/* Button icon: breathing room and a slight nudge on hover. */
body.ocjs-v2 .ocjs-cta-card .ocjs-button--primary {
    gap: 10px;
}

body.ocjs-v2 .ocjs-cta-card .ocjs-button--primary i {
    font-size: 13px;
    transition: transform 0.15s;
}

body.ocjs-v2 .ocjs-cta-card .ocjs-button--primary:hover i {
    transform: translateX(3px);
}

/* Course title row: same left rhythm as the list items below it
   (content pad 10px + row pad ~16px ≈ 26px), stronger type. */
body.ocjs-v2 .ov2-sidebar--outline .ov2-course-head {
    padding: 16px 16px 14px 26px;
}

body.ocjs-v2 .ov2-sidebar--outline .ov2-course-head .ocjs-sidebar__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--ov2-ink);
}

/* Unit headers and footer share the same 26px left edge. */
body.ocjs-v2 .ocjs-sidebar-unit__header { padding-left: 16px !important; }
body.ocjs-v2 .ov2-sidebar__footer .ov2-nav a { padding-left: 14px; }

/* Lesson row: icon sits tight to the text and dead-center vertically.
   The v1 status span carried its own width/margins; the dashicon glyph
   box also floats without an explicit line-height. */
body.ocjs-v2 .ocjs-sidebar-lesson__link {
    gap: 9px;
    align-items: center;
}

body.ocjs-v2 .ocjs-sidebar-lesson__status {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.ocjs-v2 .ocjs-sidebar-lesson__status .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    display: block;
}

/* ═══════════ MY COURSES — clean pass ═══════════ */

/* Page header: left-aligned with the content, not floating centered. */
body.ocjs-v2 .ocjs-course-selector {
    max-width: none;
    margin: 8px 0 48px;
    padding: 0 28px;
}

body.ocjs-v2 .ocjs-selector__header {
    text-align: left;
    margin-bottom: 22px;
}

body.ocjs-v2 .ocjs-selector__header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ov2-ink);
    margin: 0 0 2px;
}

body.ocjs-v2 .ocjs-selector__header p {
    color: var(--ov2-muted);
    font-size: 13px;
}

body.ocjs-v2 .ocjs-selector__grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    max-width: 1100px;
}

/* Card: borderless white, soft shadow. */
body.ocjs-v2 .ocjs-cs-card {
    border: none;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.ocjs-v2 .ocjs-cs-card:hover {
    transform: translateY(-2px);
    border: none;
    box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.12);
}

/* Cover: the giant tinted slab shrinks to a quiet, short band; the red
   progress strip on it duplicated the bar below — gone. */
body.ocjs-v2 .ocjs-cs-cover {
    height: 84px;
    background: color-mix(in srgb, var(--cs-primary, #E62538) 5%, #fafbfc) !important;
}

body.ocjs-v2 .ocjs-cs-cover-icon i,
body.ocjs-v2 .ocjs-cs-cover-icon {
    font-size: 30px;
    color: color-mix(in srgb, var(--cs-primary, #E62538) 55%, #fff);
}

body.ocjs-v2 .ocjs-cs-prog-track { display: none; }

/* Body rhythm */
body.ocjs-v2 .ocjs-cs-body { padding: 20px 22px 22px; }

body.ocjs-v2 .ocjs-cs-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ov2-ink);
}

body.ocjs-v2 .ocjs-cs-stat { color: var(--ov2-muted); font-size: 12.5px; }
body.ocjs-v2 .ocjs-cs-stat i { color: var(--ov2-muted); }
body.ocjs-v2 .ocjs-cs-stat strong { color: var(--ov2-ink); }

body.ocjs-v2 .ocjs-cs-pct-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ov2-muted);
}

body.ocjs-v2 .ocjs-cs-pct-val { font-weight: 800; }

body.ocjs-v2 .ocjs-cs-bar { height: 5px; }

/* Button: brand pill with icon rhythm and a real hover. */
body.ocjs-v2 .ocjs-cs-btn {
    gap: 9px;
    padding: 12px 0;
    font-size: 13.5px;
    transition: filter 0.15s;
}

body.ocjs-v2 .ocjs-cs-card:hover .ocjs-cs-btn {
    filter: none;
    background: color-mix(in srgb, var(--cs-primary, #E62538) 82%, #000);
}

/* ═══════════ TYPE PASS: Inter everywhere, weights capped ═══════════ */
/* Nothing heavier than 700 — the 800/900 cuts read as shouting. Small
   uppercase labels keep 700 (they need it at that size); titles and big
   numerals settle at 700; body stays 400-600. */

body.ocjs-v2,
body.ocjs-v2 .ocjs-portal-main,
body.ocjs-v2 .ocjs-lesson-view,
body.ocjs-v2 .ocjs-dashboard__main,
body.ocjs-v2 .ocjs-course-selector,
body.ocjs-v2 button,
body.ocjs-v2 input,
body.ocjs-v2 select,
body.ocjs-v2 textarea {
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ov2-topbar__greeting strong,
body.ocjs-v2 .ov2-course-head .ocjs-sidebar__title,
body.ocjs-v2 .ocjs-selector__header h2,
body.ocjs-v2 .ocjs-cs-title,
body.ocjs-v2 .ocjs-cs-pct-val,
body.ocjs-v2 .ocjs-dashboard__title,
body.ocjs-v2 .ocjs-dashboard__syllabus-intro h4,
body.ocjs-v2 .ocjs-lesson-view__title,
body.ocjs-v2 .ocjs-cta-card__content h3,
body.ocjs-v2 .ov2-chip--clock strong,
body.ocjs-v2 .ov2-course-progress__count strong {
    font-weight: 700 !important;
}

body.ocjs-v2 .ocjs-summary-val,
body.ocjs-v2 .ocjs-progress-val {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

body.ocjs-v2 .ocjs-summary-label,
body.ocjs-v2 .ocjs-progress-label,
body.ocjs-v2 .ocjs-sidebar-unit__header,
body.ocjs-v2 .ocjs-cs-pct-label,
body.ocjs-v2 .ov2-course-progress__label {
    font-weight: 700 !important;
}

body.ocjs-v2 .ocjs-dashboard__badge { font-weight: 700; }

/* General pages: the canvas template paints its container #f0f2f5 with
   !important, a slightly darker gray than the topbar's canvas tone — the
   mismatch drew a visible seam under the topbar. Outrank it (same
   !important, higher specificity) so header and content share one surface. */
body.ocjs-v2 #ocjs-canvas-root.ocjs-canvas-container,
body.ocjs-v2 .ocjs-canvas-container {
    background: var(--ov2-bg) !important;
}

/* ═══════════ MY PROFILE — modern pass ═══════════ */

/* Hero: flat brand, calmer height, same language as the dashboard CTA. */
body.ocjs-v2 .ocjs-mp-hero {
    background: var(--mp-primary, #E62538);
    border-radius: 24px;
    padding: 30px 34px;
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--mp-primary, #E62538) 45%, transparent);
}

body.ocjs-v2 .ocjs-mp-hero::before,
body.ocjs-v2 .ocjs-mp-hero::after { display: none; }

body.ocjs-v2 .ocjs-mp-hero-name {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 22px;
}

body.ocjs-v2 .ocjs-mp-avatar {
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    font-weight: 700;
}

body.ocjs-v2 .ocjs-mp-hero-badge {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
}

/* Cards: borderless white + soft shadow, like every other v2 surface. */
body.ocjs-v2 .ocjs-mp-card {
    border: none;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.ocjs-v2 .ocjs-mp-card-header {
    border-bottom: 1px solid var(--ov2-line-soft);
    padding: 18px 24px;
}

body.ocjs-v2 .ocjs-mp-card-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.015em;
    color: var(--ov2-ink);
}

body.ocjs-v2 .ocjs-mp-card-icon {
    border-radius: 12px;
    background: color-mix(in srgb, var(--mp-primary, #E62538) 8%, #fff);
}

/* Inputs: 10px radius, hairline, brand focus ring. */
body.ocjs-v2 .ocjs-mp-form-group label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ov2-muted);
}

body.ocjs-v2 .ocjs-mp-form-group input {
    border: 1px solid var(--ov2-line);
    border-radius: 10px;
    font-family: var(--ov2-font);
    color: var(--ov2-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.ocjs-v2 .ocjs-mp-form-group input:focus {
    border-color: var(--mp-primary, #E62538);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-primary, #E62538) 12%, transparent);
}

body.ocjs-v2 .ocjs-mp-form-group input:disabled {
    background: var(--ov2-line-soft);
    color: var(--ov2-muted);
}

body.ocjs-v2 .ocjs-mp-hint { color: var(--ov2-muted); font-size: 12px; }

/* Buttons: pill (already), calm hover consistent with the rest. */
body.ocjs-v2 .ocjs-mp-btn--primary:hover {
    transform: none;
    background: color-mix(in srgb, var(--mp-primary, #E62538) 82%, #000);
}

/* ═══════════ SUPPORT CHAT — dock into the shell ═══════════ */
/* support.css pins the app full-screen for the old 70px header
   (fixed, left:0, 100vw, z-index 9999 — ON TOP of the sidebar). In v2 it
   docks beside the sidebar, under the topbar, below the shell layers. */
body.ocjs-v2 .ocjs-support-app {
    top: var(--ov2-topbar-h, 64px) !important;
    left: var(--ov2-sidebar-w, 340px) !important;
    right: 0 !important;
    width: auto !important;
    height: calc(100vh - var(--ov2-topbar-h, 64px)) !important;
    z-index: 900 !important;
}

/* v2 polish: pill buttons, calmer bubbles. */
body.ocjs-v2 .ocjs-support-app .button {
    border-radius: 100px !important;
}

body.ocjs-v2 .ocjs-support-app .support-header {
    border-bottom: 1px solid var(--ov2-line) !important;
}

@media (max-width: 1024px) {
    body.ocjs-v2 .ocjs-support-app {
        left: 0 !important;
        width: 100vw !important;
    }
}

/* ═══════════ NEXT-LESSON REDIRECT CARD — modern pass ═══════════ */
/* JS-injected (portal.js) — restyle only, classes stay. Flat soft-success
   surface, brand "Go now" pill, quiet countdown. */
body.ocjs-v2 .ocjs-next-lesson-card {
    background: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px 20px !important;
    gap: 14px;
}

body.ocjs-v2 .ocjs-next-lesson-card__icon {
    background: #16a34a !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.ocjs-v2 .ocjs-next-lesson-card__icon .dashicons { color: #fff !important; }

body.ocjs-v2 .ocjs-next-lesson-card__title {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #166534 !important;
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ocjs-next-lesson-card__subtitle {
    color: #15803d !important;
    font-size: 13px !important;
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ocjs-next-lesson-card__progress {
    background: #dcfce7 !important;
    border-radius: 100px !important;
    height: 5px !important;
    overflow: hidden;
}

body.ocjs-v2 .ocjs-next-lesson-card__progress-bar {
    background: #16a34a !important;
    border-radius: 100px !important;
}

/* Countdown ring: quiet — the number matters, the ornament doesn't. */
body.ocjs-v2 .ocjs-ring-track { stroke: #dcfce7 !important; }
body.ocjs-v2 .ocjs-ring-progress { stroke: #16a34a !important; }
body.ocjs-v2 .ocjs-next-lesson-card__ring-num {
    color: #166534 !important;
    font-weight: 700 !important;
    font-family: var(--ov2-font);
}

/* "Go now": brand pill, white label, real hover — consistent with every
   other primary action. */
body.ocjs-v2 .ocjs-next-lesson-card__skip {
    background: var(--ocjs-primary, #E62538) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--ov2-font);
    box-shadow: none !important;
    transition: background 0.15s, transform 0.15s;
}

body.ocjs-v2 .ocjs-next-lesson-card__skip:hover {
    background: color-mix(in srgb, var(--ocjs-primary, #E62538) 82%, #000) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body.ocjs-v2 .ocjs-next-lesson-card__skip .dashicons { color: #fff !important; }

/* ═══════════ GATE / EMPTY-STATE CARD — modern pass ═══════════ */
body.ocjs-v2 .ocjs-gate-card {
    border: none !important;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    padding: 44px 40px;
}

body.ocjs-v2 .ocjs-gate-icon-wrap {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
}

body.ocjs-v2 .ocjs-gate-icon-wrap i { font-size: 30px; }

body.ocjs-v2 .ocjs-gate-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 20px;
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ocjs-gate-msg {
    font-family: var(--ov2-font);
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
}

body.ocjs-v2 .ocjs-gate-btn {
    border-radius: 100px !important;
    padding: 12px 26px !important;
    font-family: var(--ov2-font);
    transition: filter 0.15s, transform 0.15s !important;
}

body.ocjs-v2 .ocjs-gate-btn:hover {
    filter: brightness(0.85) !important;
    transform: translateY(-1px);
}

/* ═══════════ MODULE ROWS (module-based courses) ═══════════ */
/* Contract classes (portal.js accordion) — restyle only. Module header is
   a clean row: number chip, title, chevron; lessons nest underneath. */
body.ocjs-v2 .ocjs-sidebar-module { margin: 0 0 2px; }

body.ocjs-v2 .ocjs-sidebar-module__header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background 0.15s;
}

body.ocjs-v2 .ocjs-sidebar-module__header:hover { background: var(--ov2-line-soft); }

body.ocjs-v2 .ocjs-sidebar-module__number {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--ov2-line-soft);
    color: var(--ov2-body);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

body.ocjs-v2 .ocjs-sidebar-module__title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ov2-ink);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ocjs-v2 .ocjs-sidebar-module__toggle {
    color: var(--ov2-muted);
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Active module: brand-tinted number chip. */
body.ocjs-v2 .ocjs-sidebar-module.is-active .ocjs-sidebar-module__number {
    background: var(--ov2-accent);
    color: #fff;
}

body.ocjs-v2 .ocjs-sidebar-module.is-active .ocjs-sidebar-module__title {
    color: var(--ov2-ink);
}

/* Lessons nest under the module with a subtle guide line. */
body.ocjs-v2 .ocjs-sidebar-module .ocjs-sidebar-lessons {
    margin-left: 24px;
    padding-left: 8px;
    border-left: 1px solid var(--ov2-line-soft) !important;
}

/* ═══════════ UNIT HEADERS — main category weight ═══════════ */
/* Units are the top level; with numbered module rows underneath they need
   more presence: a soft band, ink text, clear separation between units. */
body.ocjs-v2 .ocjs-sidebar-unit { margin-top: 12px; }
body.ocjs-v2 .ocjs-sidebar-unit:first-child { margin-top: 2px; }

body.ocjs-v2 .ocjs-sidebar-unit__header {
    background: var(--ov2-line-soft) !important;
    border-radius: 12px !important;
    padding: 11px 14px 11px 16px !important;
    color: var(--ov2-ink) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 6px;
}

body.ocjs-v2 .ocjs-sidebar-unit.is-active .ocjs-sidebar-unit__header {
    background: color-mix(in srgb, var(--ov2-accent) 7%, #fff) !important;
    color: var(--ov2-accent) !important;
}

/* Count chip reads on the band. */
body.ocjs-v2 .ov2-unit-count {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.ocjs-v2 .ocjs-sidebar-unit.is-active .ov2-unit-count:not(.is-done) {
    color: var(--ov2-accent);
}

/* Lesson content links: the palette's secondary tone, not browser blue.
   --ocjs-primary-dark is the school's secondary color when set. */
body.ocjs-v2 .ocjs-lesson-view__content a,
body.ocjs-v2 .ocjs-lesson-view__description a {
    /* Links sit INSIDE prose — same ink and weight as the copy around them;
       only a quiet underline marks them. Hover brings the brand color in. */
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-color: #cbd5e1;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
    word-break: break-word;
}

body.ocjs-v2 .ocjs-lesson-view__content a:hover,
body.ocjs-v2 .ocjs-lesson-view__description a:hover {
    color: var(--ocjs-primary-dark, #cc1f30);
    text-decoration-color: currentColor;
}

/* ═══════════ TRAINING PAUSED OVERLAY — modern pass ═══════════ */
/* JS-injected (showFocusLostOverlay) — restyle only. The amber warning
   dashicon becomes the animated clock illustration from assets/img. */
body.ocjs-v2 .ocjs-focus-lost {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.ocjs-v2 .ocjs-focus-lost__card {
    border: none;
    border-radius: 28px;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
    padding: 40px 44px 36px;
    max-width: 440px;
    font-family: var(--ov2-font);
}

body.ocjs-v2 .ocjs-focus-lost__icon {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
    background: url("../img/Stop-Sign.svg") center / contain no-repeat;
    border-radius: 0;
    box-shadow: none;
}

body.ocjs-v2 .ocjs-focus-lost__icon .dashicons { display: none; }

body.ocjs-v2 .ocjs-focus-lost__title {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--ov2-ink);
    margin-bottom: 8px;
}

body.ocjs-v2 .ocjs-focus-lost__msg {
    color: var(--ov2-body);
    font-size: 14px;
    line-height: 1.6;
    max-width: 34ch;
    margin: 0 auto 26px;
}

body.ocjs-v2 #ocjs-focus-lost-resume {
    border-radius: 100px;
    padding: 13px 30px;
    font-weight: 700;
    font-size: 14px;
}

body.ocjs-v2 #ocjs-focus-lost-resume:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ocjs-primary, #E62538) 82%, #000);
    color: #fff;
}

/* ═══════════ NO TRUNCATION — education titles wrap, never clip ═══════ */
/* Module/lesson names are curriculum content; "…Transportation Syste…"
   is unacceptable. Titles wrap to as many lines as they need. */
body.ocjs-v2 .ocjs-sidebar-module__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
}

body.ocjs-v2 .ocjs-sidebar-module__header { align-items: flex-start; }
body.ocjs-v2 .ocjs-sidebar-module__number { margin-top: 1px; }
body.ocjs-v2 .ocjs-sidebar-module__toggle { margin-top: 4px; }

body.ocjs-v2 .ocjs-sidebar-lesson__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4;
}

body.ocjs-v2 .ocjs-sidebar-lesson__link { align-items: flex-start; }
body.ocjs-v2 .ocjs-sidebar-lesson__status { margin-top: 2px; }
body.ocjs-v2 .ov2-lesson-mins { margin-top: 2px; }

/* ═══════════ CHECKPOINT MODAL — meta-DESIGN pass ═══════════ */

body.ocjs-v2 .ocjs-overlay--checkpoint {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.ocjs-v2 .ocjs-modal--checkpoint {
    border: none;
    border-radius: 24px;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
    font-family: var(--ov2-font);
    max-width: 480px;
    overflow: hidden;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__header {
    padding: 18px 26px;
    border-bottom: 1px solid var(--ov2-line-soft);
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ov2-ink);
    margin: 0;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__body { padding: 20px 26px 26px; }

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__intro {
    color: var(--ov2-muted);
    font-size: 13px;
    margin: 0 0 14px;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__prompt {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ov2-ink);
    letter-spacing: -0.15px;
}

/* Choices: selectable cards; the picked one carries the brand. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice {
    border: 1px solid var(--ov2-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice:hover {
    background: var(--ov2-line-soft);
    border-color: var(--ov2-line);
    transform: none;
    box-shadow: none;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice:has(input:checked) {
    border-color: var(--ocjs-primary, #E62538);
    background: var(--ocjs-primary-softer, #fdf5f6);
    box-shadow: inset 0 0 0 1px var(--ocjs-primary, #E62538);
}

/* Submit: full-width brand pill. */
body.ocjs-v2 .ocjs-modal--checkpoint button[type="submit"] {
    width: 100%;
    border-radius: 100px;
    padding: 14px 24px;
    font-weight: 700;
}

/* Feedback callout: flat tint + text icon; explanation sits inside on a
   white surface so the "why" reads as its own thing. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__feedback,
body.ocjs-v2 .ocjs-question-card__feedback {
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}

body.ocjs-v2 .ocjs-feedback--success {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
    color: #166534 !important;
}

body.ocjs-v2 .ocjs-feedback--error {
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
    color: #b91c1c !important;
}

body.ocjs-v2 .ocjs-feedback--success::before { content: "✓  "; font-weight: 800; }
body.ocjs-v2 .ocjs-feedback--error::before { content: "✕  "; font-weight: 800; }

body.ocjs-v2 .ocjs-answer-explain {
    background: #fff;
    border: 1px solid var(--ov2-line-soft);
    border-radius: 10px;
    color: var(--ov2-body);
    font-weight: 500;
}

/* ═══════════ CHECKPOINT MODAL — polish round 2 ═══════════ */

/* Gentle entry: the modal settles in instead of popping. */
@keyframes ov2-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

body.ocjs-v2 .ocjs-modal--checkpoint {
    max-width: 500px;
    animation: ov2-modal-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    body.ocjs-v2 .ocjs-modal--checkpoint { animation: none; }
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__body { padding: 22px 28px 28px; }

/* Question card: quieter surface, roomier. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question {
    background: var(--ov2-bg);
    border: 1px solid var(--ov2-line-soft);
    border-radius: 18px;
    padding: 18px 20px;
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__prompt { margin: 0 0 14px; }

/* Choice rows: brand radio, comfy height. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice {
    padding: 13px 16px;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ov2-ink);
}

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice input[type="radio"] {
    accent-color: var(--ocjs-primary, #E62538);
    width: 18px;
    height: 18px;
}

/* Feedback: the ✓/✕ marker gets its own beat before the sentence. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__feedback { margin-top: 16px; }
body.ocjs-v2 .ocjs-feedback--success::before,
body.ocjs-v2 .ocjs-feedback--error::before { margin-right: 6px; }

body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-answer-explain {
    margin-top: 12px;
    padding: 13px 16px;
    font-size: 13px;
}

/* Submit gets breathing room above. */
body.ocjs-v2 .ocjs-modal--checkpoint button[type="submit"] { margin-top: 16px; }

/* ═══════════ CHECKPOINT MODAL — round 3: icon badges, bigger, no side bar ═ */

/* Bigger stage. */
body.ocjs-v2 .ocjs-modal--checkpoint { max-width: 620px; width: calc(100vw - 48px); }
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__header { padding: 20px 32px; }
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__body { padding: 26px 32px 32px; }
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question { padding: 22px 24px; }
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__prompt { font-size: 16px; }
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-question__choice { padding: 15px 18px; font-size: 14.5px; }

/* Feedback: proper icon badge (Font Awesome, filled circle) instead of the
   text glyph. Badge sits fixed top-left; the sentence wraps beside it. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-modal__feedback,
body.ocjs-v2 .ocjs-question-card__feedback.ocjs-feedback--success,
body.ocjs-v2 .ocjs-question-card__feedback.ocjs-feedback--error {
    position: relative;
    padding: 16px 18px 16px 58px;
    border-radius: 16px;
    font-size: 14px;
}

body.ocjs-v2 .ocjs-feedback--success::before,
body.ocjs-v2 .ocjs-feedback--error::before {
    /* The theme ships FA *Pro* — its family name differs from the CDN Free
       build. Chain both so the glyph renders wherever either is loaded. */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    margin: 0;
}

body.ocjs-v2 .ocjs-feedback--success::before {
    content: "\f00c"; /* check */
    background: #16a34a;
    box-shadow: 0 4px 10px -3px rgba(22, 163, 74, 0.5);
}

body.ocjs-v2 .ocjs-feedback--error::before {
    content: "\f00d"; /* xmark */
    background: #dc2626;
    box-shadow: 0 4px 10px -3px rgba(220, 38, 38, 0.5);
}

/* Explanation: clean white card, hairline all around — the colored side bar
   is gone; the icon above already carries the verdict. */
body.ocjs-v2 .ocjs-answer-explain {
    border: 1px solid var(--ov2-line) !important;
    border-radius: 12px !important;
    margin-left: 0;
}

/* Continue / Next Question / Rewatch — explicit advance button after the
   verdict, full-width pill like Submit. */
body.ocjs-v2 .ocjs-modal--checkpoint .ocjs-continue-btn {
    width: 100%;
    border-radius: 100px;
    padding: 14px 24px;
    font-weight: 700;
    margin-top: 14px;
}

/* ═══════════ UNIT ASSESSMENT (DTO 0051) ═══════════ */

body.ocjs-v2 .ocjs-ua { max-width: 100%; margin: 0; padding: 24px 0 64px; font-family: var(--ov2-font); }

/* Back button on its own line, then the label + title stacked below it —
   a clean, left-aligned header instead of a button floating beside a
   two-line title. */
body.ocjs-v2 .ocjs-ua__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}
body.ocjs-v2 .ocjs-ua__back {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ov2-line); border-radius: 100px;
    padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--ov2-ink);
    text-decoration: none; flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.ocjs-v2 .ocjs-ua__back:hover { background: var(--ov2-line-soft); border-color: #c2c9d4; }
body.ocjs-v2 .ocjs-ua__back i { color: var(--ocjs-primary); }
body.ocjs-v2 .ocjs-ua__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ocjs-primary);
    margin-bottom: 4px;
}
body.ocjs-v2 .ocjs-ua__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ov2-ink); margin: 0; line-height: 1.2; }

/* Minimal header — just the back button, no title (the unit name now lives
   inside the card / intro below). */
body.ocjs-v2 .ocjs-ua__head--minimal { margin-bottom: 18px; }

/* Unit name shown inside each verdict card (Locked / Passed / Review). */
body.ocjs-v2 .ocjs-ua__card-eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ocjs-primary);
    margin-top: 4px;
}
body.ocjs-v2 .ocjs-ua__card-unit {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ov2-ink); margin: 4px 0 10px; line-height: 1.25;
}

/* Active-assessment intro (before the questions) — left aligned. */
body.ocjs-v2 .ocjs-ua__intro { margin-bottom: 16px; }
body.ocjs-v2 .ocjs-ua__intro .ocjs-ua__card-eyebrow { margin-top: 0; }
body.ocjs-v2 .ocjs-ua__intro-title {
    font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ov2-ink); margin: 4px 0 0; line-height: 1.2;
}

/* ═══════════ CELEBRATION SCREEN (unit passed) ═══════════ */
body.ocjs-v2 .ocjs-ua__celebrate {
    position: relative;
    background: #fff;
    border: 1px solid var(--ocjs-primary-border);
    border-radius: 28px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 10px 40px var(--ocjs-primary-glow);
    overflow: hidden;
}
/* Soft brand glow behind the trophy. */
body.ocjs-v2 .ocjs-ua__celebrate::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--ocjs-primary-soft), transparent 55%);
    pointer-events: none;
}
body.ocjs-v2 .ocjs-ua__celebrate > * { position: relative; }

body.ocjs-v2 .ocjs-ua__celebrate-icon {
    width: 84px; height: 84px; margin: 0 auto 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ocjs-primary), var(--ocjs-primary-bright));
    color: #fff; font-size: 36px;
    box-shadow: 0 8px 24px var(--ocjs-primary-glow);
    animation: ocjs-ua-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ocjs-ua-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

body.ocjs-v2 .ocjs-ua__celebrate .ocjs-ua__card-eyebrow { margin-top: 0; }
body.ocjs-v2 .ocjs-ua__celebrate-title {
    font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ov2-ink); margin: 6px 0 8px; line-height: 1.15;
}
body.ocjs-v2 .ocjs-ua__celebrate-sub {
    font-size: 15px; color: var(--ov2-body); margin: 0 auto 28px;
    max-width: 460px; line-height: 1.55;
}
body.ocjs-v2 .ocjs-ua__celebrate-sub strong { color: var(--ov2-ink); }

body.ocjs-v2 .ocjs-ua__celebrate-stats {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 14px; margin-bottom: 30px;
}
body.ocjs-v2 .ocjs-ua__celebrate-stat {
    flex: 1 1 130px; max-width: 180px;
    background: var(--ov2-bg, #f8fafc);
    border: 1px solid var(--ov2-line);
    border-radius: 16px; padding: 18px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
body.ocjs-v2 .ocjs-ua__celebrate-stat-value {
    font-size: 24px; font-weight: 800; color: var(--ocjs-primary); line-height: 1.1;
}
body.ocjs-v2 .ocjs-ua__celebrate-stat-value--unlock { font-size: 22px; }
body.ocjs-v2 .ocjs-ua__celebrate-stat-label {
    font-size: 12px; font-weight: 600; color: var(--ov2-muted);
}

body.ocjs-v2 .ocjs-ua__celebrate-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px; font-size: 15px; font-weight: 700;
    border-radius: 14px;
}

/* Full-viewport confetti overlay — non-interactive, above content. */
body.ocjs-v2 .ocjs-ua__confetti-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
}

@media (max-width: 600px) {
    body.ocjs-v2 .ocjs-ua__celebrate { padding: 36px 20px; }
    body.ocjs-v2 .ocjs-ua__celebrate-title { font-size: 24px; }
}

body.ocjs-v2 .ocjs-ua__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
body.ocjs-v2 .ocjs-ua__chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--ov2-line); border-radius: 100px;
    padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ov2-body);
}
body.ocjs-v2 .ocjs-ua__chip i { color: var(--ocjs-primary); font-size: 11px; }
body.ocjs-v2 .ocjs-ua__chip--warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
body.ocjs-v2 .ocjs-ua__chip--warn i { color: #d97706; }

/* Question blocks */
body.ocjs-v2 .ocjs-ua__q {
    display: flex; gap: 16px;
    background: #fff; border-radius: 20px; padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    margin-bottom: 14px;
}
body.ocjs-v2 .ocjs-ua__q-num {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
    background: var(--ocjs-primary-soft); color: var(--ocjs-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
body.ocjs-v2 .ocjs-ua__q-body { flex: 1; min-width: 0; }
body.ocjs-v2 .ocjs-ua__q-prompt { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--ov2-ink); margin: 3px 0 14px; }
/* Prompts are rich text: keep authored bold/italic/lists readable inside the
   heading-weight container without letting paste artefacts add stray gaps. */
body.ocjs-v2 .ocjs-ua__q-prompt > p:first-child { margin-top: 0; }
body.ocjs-v2 .ocjs-ua__q-prompt > p:last-child { margin-bottom: 0; }
body.ocjs-v2 .ocjs-ua__q-prompt p { margin: 0 0 8px; }
body.ocjs-v2 .ocjs-ua__q-prompt ul,
body.ocjs-v2 .ocjs-ua__q-prompt ol { margin: 6px 0 8px; padding-left: 22px; font-weight: 500; }
body.ocjs-v2 .ocjs-ua__q-prompt li { margin: 2px 0; }
body.ocjs-v2 .ocjs-ua__q-prompt strong,
body.ocjs-v2 .ocjs-ua__q-prompt b { font-weight: 800; }
body.ocjs-v2 .ocjs-ua__q-prompt a { color: var(--ov2-primary, #2563eb); text-decoration: underline; }

body.ocjs-v2 .ocjs-ua__choices { display: flex; flex-direction: column; gap: 8px; }
body.ocjs-v2 .ocjs-ua__choice {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--ov2-line); border-radius: 14px;
    padding: 13px 16px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--ov2-ink);
    transition: border-color 0.15s, background 0.15s;
}
body.ocjs-v2 .ocjs-ua__choice:hover { background: var(--ov2-line-soft); }
body.ocjs-v2 .ocjs-ua__choice:has(input:checked) {
    border-color: var(--ocjs-primary);
    background: var(--ocjs-primary-softer);
    box-shadow: inset 0 0 0 1px var(--ocjs-primary);
}
body.ocjs-v2 .ocjs-ua__choice input[type="radio"] { accent-color: var(--ocjs-primary); width: 18px; height: 18px; }
body.ocjs-v2 .ocjs-ua__short { width: 100%; border: 1px solid var(--ov2-line); border-radius: 10px; padding: 12px 14px; font-family: var(--ov2-font); }

/* ═══════════ EXAM QUESTION CARD — reuse the ocjs-ua__ design ═══════════
   The exam wraps its question in .ocjs-exam-card > .ocjs-exam-body which now
   also carries .ocjs-ua__q. Neutralise the old exam card so the ocjs-ua__q
   card is the only visible one, and give the choices the clean radio + single
   border (no inner "double frame") treatment like the lessons. */
body.ocjs-v2 .ocjs-exam-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
body.ocjs-v2.ocjs-exam-active #ocjs-exam-app {
    width: min(980px, calc(100% - 40px));
    max-width: 980px;
    margin-top: 56px !important;
    margin-bottom: 56px !important;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-header-meta {
    margin-bottom: 12px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-attempts-badge,
body.ocjs-v2.ocjs-exam-active .ocjs-exam-timer-badge {
    min-height: 38px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .94);
    border-color: rgba(148, 163, 184, .24);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-header {
    margin-bottom: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--ov2-line, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .045);
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-progress {
    margin-bottom: 10px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-panel {
    margin-bottom: 16px;
    padding: 16px 18px 13px;
    border-radius: 18px;
    border-color: var(--ov2-line, #e2e8f0);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .05);
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-grid {
    grid-template-columns: repeat(auto-fill, 40px);
    justify-content: start;
    gap: 8px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-cell {
    width: 40px;
    height: 40px;
    min-height: 40px;
    aspect-ratio: auto;
    border-radius: 10px;
}

body.ocjs-v2 .ocjs-ua__q--exam {
    margin-bottom: 16px;
    padding: 26px 28px;
    border: 1px solid var(--ov2-line, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .055);
}

body.ocjs-v2.ocjs-exam-active .ocjs-ua__q--exam > .ocjs-ua__q-num {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ocjs-primary) 12%, transparent);
}

body.ocjs-v2.ocjs-exam-active .ocjs-wordbank-instructions {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-wordbank-current {
    min-height: 46px;
    border-radius: 12px;
    background: rgba(248, 250, 252, .88);
}

body.ocjs-v2.ocjs-exam-active .ocjs-wordbank-display {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(248, 250, 252, .9);
}

body.ocjs-v2.ocjs-exam-active .ocjs-wordbank-tags {
    gap: 9px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-wordbank-tag--clickable {
    min-height: 36px;
    padding: 7px 14px;
}

body.ocjs-v2.ocjs-exam-active .ocjs-exam-footer {
    margin-top: 18px;
    padding: 0 4px;
}

/* Word Bank rows with the same shared pool are one exam page. The range badge
   needs a little more room than the single-question number badge. */
body.ocjs-v2 .ocjs-ua__q--wordbank-group > .ocjs-ua__q-num {
    width: auto;
    min-width: 48px;
    padding: 0 8px;
}

body.ocjs-v2 .ocjs-wordbank-group__question {
    border-radius: 0;
}

/* Flat list row: active state uses tint + number badge, without a rounded
   outline around the left and right edges. */
body.ocjs-v2 .ocjs-wordbank-group__question.is-active {
    background: var(--ocjs-primary-softer);
    box-shadow: none;
}

body.ocjs-v2 .ocjs-wordbank-group__question.is-active .ocjs-wordbank-group__number {
    background: var(--ocjs-primary);
}

body.ocjs-v2 .ocjs-wordbank-group__answer:focus-visible,
body.ocjs-v2 .ocjs-wordbank-group__question.is-active .ocjs-wordbank-group__answer {
    border-color: var(--ocjs-primary);
    outline-color: color-mix(in srgb, var(--ocjs-primary) 12%, transparent);
}

@media (max-width: 640px) {
    body.ocjs-v2.ocjs-exam-active #ocjs-exam-app {
        width: calc(100% - 24px);
        margin-top: 26px !important;
        margin-bottom: 32px !important;
        padding: 0;
    }

    body.ocjs-v2.ocjs-exam-active .ocjs-exam-header {
        padding: 13px 14px;
        border-radius: 14px;
    }

    body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-panel {
        padding: 12px;
    }

    body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-grid {
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
        gap: 6px;
    }

    body.ocjs-v2.ocjs-exam-active .ocjs-exam-nav-cell {
        width: 100%;
        height: 34px;
        min-height: 34px;
    }

    body.ocjs-v2 .ocjs-ua__q--exam {
        padding: 18px 14px;
        gap: 10px;
        border-radius: 17px;
    }

    body.ocjs-v2 .ocjs-ua__q--wordbank-group > .ocjs-ua__q-num {
        min-width: 42px;
        padding: 0 6px;
    }
}

/* ═══════════ MOBILE POLISH — compact shell, dashboard and lessons ═══════════ */

@media (max-width: 700px) {
    body.ocjs-v2 {
        --ov2-topbar-h: 60px;
    }

    /* The v1 mobile selector hides every sidebar toggle with !important.
       Keep one clear menu button in the shell and suppress the duplicate FAB. */
    body.ocjs-v2 .ov2-topbar__menu.ocjs-sidebar-toggle {
        display: flex !important;
        position: absolute;
        top: 50%;
        left: 12px;
        width: 40px;
        height: 40px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
        transform: translateY(-50%);
        z-index: 2;
    }

    body.ocjs-v2 .ov2-float-toggle.ocjs-sidebar-toggle {
        display: none !important;
    }

    body.ocjs-v2 .ov2-topbar {
        padding: 0 12px 0 64px;
        gap: 9px;
        border-bottom: 1px solid var(--ov2-line-soft);
    }

    /* Date is useful on desktop but competes with navigation and identity on
       phones. The account remains visible and the full email stays accessible. */
    body.ocjs-v2 .ov2-chip--clock {
        display: none;
    }

    body.ocjs-v2 .ov2-topbar__greeting {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
    }

    body.ocjs-v2 .ov2-topbar__greeting > span {
        display: none;
    }

    body.ocjs-v2 .ov2-topbar__greeting strong {
        display: block;
        max-width: 100%;
    }

    body.ocjs-v2 .ov2-topbar__meta {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 46vw;
        margin-left: auto;
    }

    body.ocjs-v2 .ov2-chip--user {
        min-width: 0;
        max-width: 100%;
        padding: 8px 12px;
    }

    body.ocjs-v2 .ov2-chip--user span:last-child {
        display: block;
        max-width: 128px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The late v2 desktop spacing rules otherwise override the earlier mobile
       gutters. One 12px outer gutter gives cards and videos room to breathe. */
    body.ocjs-v2 .ocjs-portal-main__content {
        padding: 12px 12px 40px;
    }

    body.ocjs-v2 .ocjs-dashboard__main {
        padding: 0;
    }

    /* Both wrappers sit below a fixed shell bar. Reserve its exact height;
       the content wrapper's 12px top gutter supplies the breathing room. */
    body.ocjs-v2 .ov2-canvas,
    body.ocjs-v2 .ov2-canvas--lesson {
        padding-top: var(--ov2-topbar-h) !important;
    }
}

@media (max-width: 640px) {
    /* Dashboard hero: keep the useful icon, but remove almost a screenful of
       excess height from the desktop card treatment. */
    body.ocjs-v2 .ocjs-cta-card {
        padding: 20px 18px 22px;
        gap: 10px;
        margin-bottom: 14px;
        border-radius: 20px;
    }

    body.ocjs-v2 .ocjs-cta-card__icon {
        display: flex;
        order: -1;
        width: 56px;
        height: 56px;
    }

    body.ocjs-v2 .ocjs-cta-card__icon i {
        font-size: 25px;
    }

    body.ocjs-v2 .ocjs-cta-card__content {
        width: 100%;
    }

    body.ocjs-v2 .ocjs-cta-card__content h3 {
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 1.25;
    }

    body.ocjs-v2 .ocjs-cta-card__content p {
        margin-bottom: 14px;
        font-size: 13.5px;
    }

    body.ocjs-v2 .ocjs-cta-card .ocjs-button--primary {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: 11px 16px;
        border-radius: 12px;
    }

    /* The two profile actions fit comfortably side-by-side at normal phone
       widths. Their dedicated classes replace the old inline-style selector. */
    body.ocjs-v2 .ocjs-dashboard__profile-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    body.ocjs-v2 .ocjs-dashboard__profile-action {
        width: auto !important;
        min-width: 0;
        min-height: 42px;
        justify-content: center;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        line-height: 1.25;
        text-align: center;
    }

    body.ocjs-v2 .ocjs-summary-grid {
        gap: 8px;
        margin-bottom: 18px;
    }

    body.ocjs-v2 .ocjs-summary-item {
        min-width: 0;
        padding: 14px 10px;
        border-radius: 14px;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 10px;
    }

    body.ocjs-v2 .ocjs-summary-val {
        font-size: 26px;
    }

    body.ocjs-v2 .ocjs-summary-label {
        font-size: 9px;
        letter-spacing: 0.09em;
    }

    body.ocjs-v2 .ocjs-summary-item__progress-wrap {
        gap: 7px;
        margin-top: 7px;
    }

    /* Retain both developer metrics on one compact row instead of stacking
       two large cards vertically. */
    body.ocjs-v2 .ocjs-dev-video-stats {
        margin: 0 0 18px;
        padding: 14px;
        border-radius: 14px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__header {
        gap: 8px;
        margin-bottom: 10px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__tag {
        padding: 3px 8px;
        font-size: 9.5px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__title {
        font-size: 12.5px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__item {
        min-width: 0;
        gap: 8px;
        padding: 10px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__item .dashicons {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__val {
        font-size: 18px;
    }

    body.ocjs-v2 .ocjs-dev-video-stats__lbl {
        font-size: 8.5px;
        letter-spacing: 0.04em;
    }

    /* Lesson header becomes a predictable two-row grid below the shell bar.
       Three columns on a lesson screen: menu, back, then the chip strip
       taking whatever is left. */
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header {
        position: sticky;
        top: var(--ov2-topbar-h);
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 7px 8px;
        padding: 8px 12px;
        background: var(--ov2-bg);
        border-bottom: 1px solid var(--ov2-line-soft);
        z-index: 20;
    }

    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header .ov2-float-toggle {
        grid-column: 1;
        grid-row: 1;
    }

    body.ocjs-v2 .ocjs-lesson-view__back {
        grid-column: 2;
        grid-row: 1;
        padding: 6px 10px !important;
        font-size: 11.5px;
    }

    body.ocjs-v2 .ocjs-lesson-view__status-wrap {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        justify-content: flex-end;
        gap: 5px;
    }

    body.ocjs-v2 .ocjs-lesson-view__status,
    body.ocjs-v2 .ocjs-daily-remaining {
        padding: 4px 8px;
        font-size: 10px;
    }

    body.ocjs-v2 .ocjs-lesson-view__title {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 7px 2px 3px;
        margin: 0;
        border-top: 1px solid var(--ov2-line-soft);
        font-size: 13.5px;
        line-height: 1.35;
    }

    body.ocjs-v2 .ocjs-lesson-view__body-wrap {
        padding: 10px 0 32px;
    }

    body.ocjs-v2 .ocjs-lesson-view__body {
        padding: 18px;
        border-radius: 18px;
    }

    /* The old child margin and the parent gap added together, creating a
       conspicuous blank band between videos. Keep spacing in one place. */
    body.ocjs-v2 .ocjs-lesson-view__videos {
        gap: 20px;
        margin-bottom: 20px;
    }

    body.ocjs-v2 .ocjs-lesson-view__videos > .ocjs-lesson-view__video {
        margin-bottom: 0;
    }

    body.ocjs-v2 .ocjs-lesson-view__video-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 9px;
    }

    body.ocjs-v2 .ocjs-lesson-view__video-counter {
        flex-shrink: 0;
        padding: 3px 8px;
        font-size: 10.5px;
    }

    body.ocjs-v2 .ocjs-lesson-view__video-name {
        min-width: 0;
        font-size: 13.5px;
        line-height: 1.35;
    }

    body.ocjs-v2 .ocjs-video-container {
        border-radius: 12px;
        box-shadow: 0 5px 18px rgba(15, 23, 42, 0.16);
    }

    body.ocjs-v2 .ocjs-video-resources {
        margin-top: 10px;
        padding: 11px 12px;
    }

    body.ocjs-v2 .ocjs-video-resources__title {
        margin-bottom: 6px;
        font-size: 13px;
    }

    body.ocjs-v2 .ocjs-video-resources__name {
        font-size: 12.5px;
        line-height: 1.35;
    }

    body.ocjs-v2 .ocjs-video-resources__url {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: normal;
        font-size: 11px;
    }

    body.ocjs-v2 .ocjs-video-warning {
        align-items: flex-start;
        margin-top: 10px;
        padding: 11px 12px;
        border-radius: 10px;
        font-size: 12.5px;
        line-height: 1.45;
        text-align: left;
    }
}

@media (max-width: 400px) {
    body.ocjs-v2 .ov2-topbar__meta {
        max-width: 42vw;
    }

    body.ocjs-v2 .ov2-chip--user span:last-child {
        max-width: 86px;
    }

    body.ocjs-v2 .ocjs-dashboard__profile-actions {
        grid-template-columns: 1fr;
    }

    body.ocjs-v2 .ocjs-lesson-view__back {
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0 !important;
    }

    body.ocjs-v2 .ocjs-lesson-view__back-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.ocjs-v2 .ocjs-lesson-view__status,
    body.ocjs-v2 .ocjs-daily-remaining {
        padding-inline: 6px;
    }
}

/* Clean custom radio (no native dark ring) for every ocjs-ua choice. */
body.ocjs-v2 .ocjs-ua__choice:has(input:checked) { box-shadow: none; }
body.ocjs-v2 .ocjs-ua__choice input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; margin: 0;
    border: 1.5px solid #cbd5e1; border-radius: 50%;
    background: #fff; box-shadow: none; cursor: pointer;
    position: relative; flex-shrink: 0;
    transition: border-color 0.15s ease;
}
body.ocjs-v2 .ocjs-ua__choice input[type="radio"]:checked { border-color: var(--ocjs-primary); }
body.ocjs-v2 .ocjs-ua__choice input[type="radio"]:checked::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ocjs-primary); transform: translate(-50%, -50%);
}

/* Question navigator grid — align the selected/answered cells to the brand. */
body.ocjs-v2 .ocjs-exam-nav-cell--current {
    background: var(--ocjs-primary);
    border-color: var(--ocjs-primary);
    color: #fff;
}
body.ocjs-v2 .ocjs-exam-nav-cell--answered {
    border-color: var(--ocjs-primary);
    color: var(--ocjs-primary);
}

body.ocjs-v2 .ocjs-ua__submit { width: 100%; border-radius: 100px; padding: 15px 24px; font-weight: 700; margin-top: 8px; }
body.ocjs-v2 .ocjs-ua__submit:disabled { opacity: 0.5; cursor: not-allowed; }
body.ocjs-v2 .ocjs-ua__hint { text-align: center; color: var(--ov2-muted); font-size: 12.5px; margin-top: 10px; }

/* Verdict card + results sheet */
body.ocjs-v2 .ocjs-ua__card {
    background: #fff; border-radius: 24px; padding: 36px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    text-align: center; margin-bottom: 18px;
}
body.ocjs-v2 .ocjs-ua__card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ov2-ink); margin: 14px 0 6px; }
body.ocjs-v2 .ocjs-ua__verdict-icon {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
}
body.ocjs-v2 .ocjs-ua__verdict-icon.is-pass { background: #16a34a; box-shadow: 0 8px 20px -6px rgba(22,163,74,0.5); }
body.ocjs-v2 .ocjs-ua__verdict-icon.is-fail { background: #dc2626; box-shadow: 0 8px 20px -6px rgba(220,38,38,0.5); }
body.ocjs-v2 .ocjs-ua__verdict-icon.is-review { background: #d97706; box-shadow: 0 8px 20px -6px rgba(217,119,6,0.5); }
body.ocjs-v2 .ocjs-ua__score { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ov2-ink); }
body.ocjs-v2 .ocjs-ua__score span { font-size: 14px; font-weight: 600; color: var(--ov2-muted); letter-spacing: 0; }

/* Pass celebration — shows only after the unit assessment is passed */
body.ocjs-v2 .ocjs-ua__celebrate p { color: var(--ov2-muted); font-size: 14px; margin: 0 0 20px; }
body.ocjs-v2 .ocjs-ua__stats {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
body.ocjs-v2 .ocjs-ua__stat {
    min-width: 110px; padding: 14px 18px;
    background: var(--ov2-line-soft); border-radius: 16px;
    display: flex; flex-direction: column; gap: 2px;
}
body.ocjs-v2 .ocjs-ua__stat-value { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ov2-ink); }
body.ocjs-v2 .ocjs-ua__stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov2-muted); }

body.ocjs-v2 .ocjs-ua__sheet { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
body.ocjs-v2 .ocjs-ua__result {
    display: flex; gap: 14px;
    background: #fff; border-radius: 18px; padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    border: 1px solid transparent;
}
body.ocjs-v2 .ocjs-ua__result.is-wrong { border-color: #fee2e2; }
body.ocjs-v2 .ocjs-ua__result.is-correct { border-color: #dcfce7; }
body.ocjs-v2 .ocjs-ua__result-icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff; margin-top: 2px;
}
body.ocjs-v2 .ocjs-ua__result.is-correct .ocjs-ua__result-icon { background: #16a34a; }
body.ocjs-v2 .ocjs-ua__result.is-wrong .ocjs-ua__result-icon { background: #dc2626; }
body.ocjs-v2 .ocjs-ua__result-body { flex: 1; min-width: 0; }
body.ocjs-v2 .ocjs-ua__result-prompt { font-weight: 600; font-size: 14px; color: var(--ov2-ink); margin: 0 0 8px; line-height: 1.5; }
body.ocjs-v2 .ocjs-ua__result-prompt > p:first-child { margin-top: 0; }
body.ocjs-v2 .ocjs-ua__result-prompt > p:last-child { margin-bottom: 0; }
body.ocjs-v2 .ocjs-ua__result-prompt p { margin: 0 0 6px; }
body.ocjs-v2 .ocjs-ua__result-prompt ul,
body.ocjs-v2 .ocjs-ua__result-prompt ol { margin: 4px 0 6px; padding-left: 20px; font-weight: 500; }
body.ocjs-v2 .ocjs-ua__result-line { font-size: 13px; color: var(--ov2-body); margin: 0 0 4px; }
body.ocjs-v2 .ocjs-ua__result-line.is-key { color: #166534; }
body.ocjs-v2 .ocjs-ua__result .ocjs-answer-explain { margin-top: 8px; }

body.ocjs-v2 .ocjs-ua__next { width: 100%; border-radius: 100px; padding: 15px 24px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
body.ocjs-v2 .ocjs-ua__retry-note { text-align: center; font-size: 13px; color: var(--ov2-body); margin: 4px 0 12px; }
body.ocjs-v2 .ocjs-ua__retry-note.is-review { color: #b45309; font-weight: 600; }

/* Review-required list */
body.ocjs-v2 .ocjs-ua__review-list { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
body.ocjs-v2 .ocjs-ua__review-list a {
    display: flex; align-items: center; gap: 11px;
    border: 1px solid var(--ov2-line); border-radius: 14px;
    padding: 13px 16px; font-size: 13.5px; font-weight: 600;
    color: var(--ov2-ink); text-decoration: none;
}
body.ocjs-v2 .ocjs-ua__review-list a:hover { background: var(--ov2-line-soft); }
body.ocjs-v2 .ocjs-ua__review-list a i { color: #d97706; }

/* Sidebar row */
body.ocjs-v2 .ocjs-sidebar-ua {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 8px; padding: 10px 12px;
    border: 1px dashed var(--ov2-line); border-radius: 14px;
    font-size: 13px; font-weight: 600; color: var(--ov2-body);
    text-decoration: none; font-family: var(--ov2-font);
    transition: border-color 0.15s, background 0.15s;
}
body.ocjs-v2 .ocjs-sidebar-ua:hover { background: var(--ov2-line-soft); }
body.ocjs-v2 .ocjs-sidebar-ua i { color: var(--ocjs-primary); }
body.ocjs-v2 .ocjs-sidebar-ua.is-passed { border-style: solid; border-color: #dcfce7; background: #f0fdf4; color: #166534; }
body.ocjs-v2 .ocjs-sidebar-ua.is-passed i { color: #16a34a; }
body.ocjs-v2 .ocjs-sidebar-ua__badge {
    margin-left: auto; background: #dcfce7; color: #166534;
    border-radius: 100px; padding: 2px 9px; font-size: 10.5px; font-weight: 700;
}

/* Result-sheet explanations: tinted + labeled, anchored to their line. */
body.ocjs-v2 .ocjs-ua__why {
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ov2-body);
    margin: 6px 0 12px;
}

body.ocjs-v2 .ocjs-ua__why-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

body.ocjs-v2 .ocjs-ua__why.is-wrong {
    background: #fef2f2;
    border: 1px solid #fee2e2;
}
body.ocjs-v2 .ocjs-ua__why.is-wrong .ocjs-ua__why-label { color: #b91c1c; }

body.ocjs-v2 .ocjs-ua__why.is-right {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}
body.ocjs-v2 .ocjs-ua__why.is-right .ocjs-ua__why-label { color: #166534; }


/* ═══════════ AUDIO PLAYER: pin below the sticky lesson header ═══════════ */
/* Desktop already offsets .ocjs-tts past the fixed header. On mobile the
   header is itself sticky and two rows tall, so the player's own `top: 12px`
   parked it OVER the lesson title (see the overlap in the phone screenshots).
   Anchor it to the header instead. --ov2-lesson-head-h is the measured height
   of that strip; the fallback covers the first paint before JS measures. */
/* The shell bar is hidden on mobile lesson screens (see the section below),
   so the header alone is what the player must clear. */
@media (max-width: 1024px) {
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-tts {
        top: calc(var(--ov2-lesson-head-h, 84px) + 6px);
    }
}

/* ═══════════ MOBILE LESSON: one bar instead of three ═══════════ */
/* On a lesson screen the shell topbar has no content of its own — the whole
   60px strip existed just to hold the hamburger, and the lesson's own chip
   strip and title stacked below it. That cost three rows before a single word
   of the lesson. Collapse them: the shell bar goes away, the lesson header
   rides at the very top, and the hamburger sits INSIDE it beside the chips. */

@media (max-width: 1024px) {
    /* Hide the shell bar on lesson screens only — dashboards still need it
       for the greeting and account menu. The marker class comes from PHP
       (render_shell) rather than a sibling/:has selector, so the rule does
       not depend on DOM order or :has support. */
    body.ocjs-v2 .ov2-topbar--lesson-hidden {
        display: none;
    }

    /* Reclaim the height the hidden bar was reserving. */
    body.ocjs-v2 .ov2-canvas--lesson {
        padding-top: 0 !important;
    }

    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__header {
        top: 0;
    }

    /* Bring back the FAB toggle that the shell-bar rule disabled. It is laid
       out as a real grid cell below (NOT fixed/absolute) so it reserves its
       own width — overlaying it and padding the header instead pushed the
       back button onto a second row. Excluded during an exam: this rule is
       more specific than the exam lockdown above and would otherwise hand
       the student a way out of the exam shell. */
    body.ocjs-v2:not(.ocjs-exam-active) .ov2-canvas--lesson .ov2-float-toggle.ocjs-sidebar-toggle {
        display: inline-flex !important;
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--ov2-line);
        border-radius: 11px;
        box-shadow: none;
        z-index: auto;
    }
}

/* The title no longer needs a separator rule above it: with the shell bar
   gone the header is the topmost element, and the extra line read as clutter. */
@media (max-width: 640px) {
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__title {
        border-top: none;
        padding-top: 4px;
    }
}

/* ═══════════ MOBILE LESSON: keep the chip strip on ONE row ═══════════ */
/* Three chips (status, daily limit, countdown) plus the menu and back
   buttons do not fit across a phone at full width — the countdown wrapped to
   a second row. Below 560px the status chip drops to its icon: the colour and
   glyph already carry the meaning, and the label stays for screen readers. */

@media (max-width: 560px) {
    /* With the countdown moved down to the completion button, the strip is
       back to two chips and the status label fits again. Keep it readable —
       an icon-only pill was ambiguous. */
    body.ocjs-v2 .ocjs-lesson-view__status {
        padding: 4px 8px;
        gap: 4px;
        font-size: 9.5px;
        letter-spacing: 0.03em;
    }

    body.ocjs-v2 .ocjs-lesson-view__status .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
        line-height: 14px;
    }

    /* One row, no wrapping: the chips shrink instead of stacking. */
    body.ocjs-v2 .ov2-canvas--lesson .ocjs-lesson-view__status-wrap {
        flex-wrap: nowrap;
        gap: 4px;
    }

    body.ocjs-v2 .ocjs-daily-remaining {
        padding: 4px 7px;
        font-size: 10px;
    }

    /* "Daily Limit:" is the first thing to go if the two chips ever crowd —
       the calendar icon plus the countdown carry the meaning on their own. */
    body.ocjs-v2 .ocjs-daily-remaining__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Back button: arrow only (its label is already visually hidden at
       480px; do it earlier so the row never has to wrap). */
    body.ocjs-v2 .ocjs-lesson-view__back {
        padding: 6px 8px !important;
    }
    body.ocjs-v2 .ocjs-lesson-view__back-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ═══════════ LESSON FOOTER: countdown above the completion button ═══════════ */
/* The timer lives in .ocjs-lesson-view__actions, directly above Mark as
   Complete — the student reads the remaining time and acts on it in one
   place. Styled to match the v2 card language rather than v1's grey slab. */

body.ocjs-v2 .ocjs-lesson-view__actions .ocjs-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--ov2-line);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ov2-body);
}

body.ocjs-v2 .ocjs-lesson-view__actions .ocjs-timer .dashicons {
    color: var(--ocjs-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

body.ocjs-v2 .ocjs-lesson-view__actions .ocjs-timer__value {
    margin-left: auto;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 700;
}

/* Requirement met — quiet green, same vocabulary as the completed chip. */
body.ocjs-v2 .ocjs-lesson-view__actions .ocjs-timer.is-complete {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
body.ocjs-v2 .ocjs-lesson-view__actions .ocjs-timer.is-complete .dashicons {
    color: #16a34a;
}