/* ============================================================
   DISHA desktop layout v2
   Only active at >= 992px. Phones and the mobile apps see the
   original mobile design, untouched.
   ============================================================ */
@media (min-width: 992px) {

    :root {
        --dsk-sidebar-w: 248px;
        --dsk-sidebar-w-collapsed: 68px;
        /* Content width, in two tiers so every page agrees instead of each
           screen inventing its own cap (they had drifted to 1560/1500/1360/1240,
           which is why pages looked stretched and never lined up).
             --dsk-content-max  : normal reading/card pages. A comfortable
                                  measure — long single lines of text across a
                                  1500px+ pane are hard to read and leave cards
                                  awkwardly wide.
             --dsk-content-wide : screens that genuinely need width (multi-column
                                  card grids, the report tables, the dashboard). */
        --dsk-content-max: min(960px, 92%);
        --dsk-content-wide: min(1360px, 94%);
    }

    body { background: #eef1f7 !important; }

    .app-container {
        max-width: none !important;
        inset: 0 0 0 var(--dsk-sidebar-w) !important;
        left: var(--dsk-sidebar-w) !important;
        transform: none !important;
        width: auto !important;
        box-shadow: none !important;
        background: #eef1f7 !important;
        transition: left .22s ease;
    }
    body.dsk-collapsed .app-container { left: var(--dsk-sidebar-w-collapsed) !important; }

    .bottom-nav { display: none !important; }
    .app-back-fab { right: 34px !important; bottom: 30px !important; }

    .screen {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 26px clamp(20px, 5vw, 60px) 40px !important;
    }
    .screen > * {
        max-width: var(--dsk-content-max);
        width: 100%;
        /* Centred: at the capped reading width, pinning content to the left
           leaves a large empty band on the right, which reads as broken
           alignment rather than as a choice. */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #jrn-stage-page {
        max-width: none !important;
        left: var(--dsk-sidebar-w) !important;
        right: 0 !important;
        width: auto !important;
        transform: none !important;
        padding-left: clamp(20px, 5vw, 60px);
        padding-right: clamp(20px, 5vw, 60px);
    }
    body.dsk-collapsed #jrn-stage-page { left: var(--dsk-sidebar-w-collapsed) !important; }
    #jrn-stage-page > * { max-width: var(--dsk-content-max); margin-left: auto; margin-right: auto; }
    .jrn-sp-back { right: 34px !important; }

    .app-container [style*="max-width:480px"],
    .app-container [style*="max-width: 480px"] {
        max-width: var(--dsk-content-max) !important;
    }

    #dsk-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--dsk-sidebar-w);
        background: #ffffff;
        color: #26324d;
        border-right: 1px solid #e5e9f2;
        box-shadow: 2px 0 14px rgba(15, 23, 42, .04);
        z-index: 3000;
        display: flex;
        flex-direction: column;
        font-family: 'Segoe UI', Roboto, sans-serif;
        transition: width .22s ease;
        overflow: hidden;
    }
    body.dsk-collapsed #dsk-sidebar { width: var(--dsk-sidebar-w-collapsed); }

    #dsk-sidebar .dsk-brand {
        display: flex; align-items: center; gap: 12px;
        padding: 20px 18px 16px;
        border-bottom: 1px solid #edf0f7;
        white-space: nowrap;
    }
    #dsk-sidebar .dsk-brand-badge {
        flex: 0 0 auto;
        width: 38px; height: 38px; border-radius: 11px;
        background: linear-gradient(135deg, #fdbb2d, #f88b30);
        color: #14203f; font-weight: 900; font-size: 1.15rem;
        display: flex; align-items: center; justify-content: center;
    }
    #dsk-sidebar .dsk-brand-text { font-weight: 800; font-size: 1.06rem; color: #1a2a6c; letter-spacing: .4px; }
    #dsk-sidebar .dsk-brand-text small { display: block; font-weight: 500; font-size: .66rem; color: #8a93a6; letter-spacing: 1.6px; text-transform: uppercase; }
    body.dsk-collapsed #dsk-sidebar .dsk-brand-text { display: none; }

    #dsk-sidebar .dsk-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px 10px; }
    #dsk-sidebar .dsk-nav::-webkit-scrollbar { width: 5px; }
    #dsk-sidebar .dsk-nav::-webkit-scrollbar-thumb { background: rgba(16,26,63,.16); border-radius: 3px; }

    .dsk-item { margin-bottom: 2px; }
    .dsk-link {
        display: flex; align-items: center; gap: 13px;
        width: 100%;
        padding: 11px 13px;
        border: 0; background: none;
        color: #26324d !important; font-size: .95rem; font-weight: 700;
        border-radius: 10px; cursor: pointer;
        white-space: nowrap; text-align: left;
    }
    .dsk-link span { color: inherit !important; }
    .dsk-link:hover { background: #eef2fb; color: #1a2a6c !important; }
    .dsk-link.active { background: #fdbb2d; color: #14203f !important; }
    .dsk-link .dsk-ico { flex: 0 0 auto; width: 22px; text-align: center; font-size: 1.06rem; }
    .dsk-link .dsk-badge {
        margin-left: auto; background: #ff5a4e; color: #fff;
        font-size: .68rem; font-weight: 800; border-radius: 9px; padding: 2px 7px;
    }
    .dsk-link .dsk-caret { margin-left: auto; font-size: .68rem; opacity: .7; transition: transform .18s; }
    .dsk-item.open .dsk-caret { transform: rotate(90deg); }
    .dsk-link.active .dsk-badge { background: #14203f; color: #fdbb2d; }
    body.dsk-collapsed .dsk-link { justify-content: center; padding: 12px 0; }
    body.dsk-collapsed .dsk-link span:not(.dsk-ico) { display: none; }

    .dsk-sub { display: none; padding: 2px 0 6px 30px; }
    .dsk-item.open .dsk-sub { display: block; }
    body.dsk-collapsed .dsk-sub { display: none !important; }
    .dsk-sub .dsk-sublink {
        display: block; width: 100%;
        padding: 8px 12px; border: 0; background: none;
        color: #55617a !important; font-size: .85rem; font-weight: 600;
        border-radius: 8px; cursor: pointer; text-align: left;
        white-space: nowrap;
    }
    .dsk-sub .dsk-sublink:hover { background: #f1f5fb; color: #1a2a6c !important; }

    #dsk-sidebar .dsk-foot {
        flex: 0 0 auto;
        border-top: 1px solid #edf0f7;
        padding: 12px 10px;
    }
    #dsk-collapse-btn {
        display: flex; align-items: center; gap: 13px; justify-content: flex-start;
        width: 100%; padding: 10px 13px;
        border: 0; background: none; color: #55617a !important;
        font-size: .85rem; font-weight: 600; border-radius: 10px; cursor: pointer;
        white-space: nowrap;
    }
    #dsk-collapse-btn span { color: inherit !important; }
    #dsk-collapse-btn:hover { background: #f1f5fb; color: #1a2a6c !important; }
    body.dsk-collapsed #dsk-collapse-btn { justify-content: center; padding: 10px 0; }
    body.dsk-collapsed #dsk-collapse-btn span:not(.dsk-ico) { display: none; }
}

@media (max-width: 991.98px) {
    #dsk-sidebar { display: none !important; }
}

/* ============ journey roadmap: stepper + compact card + right panel ===== */
@media (min-width: 992px) {
    #screen-journey > * { max-width: var(--dsk-content-wide) !important; }

    /* hide the stacked mobile roadmap; keep the previous + current stage cards */
    #screen-journey .jrn-tl { display: flex !important; align-items: stretch; gap: 16px; padding: 0 0 10px !important; }
    #screen-journey .jrn-tl::before { display: none !important; }
    #screen-journey .jrn-tl-node { display: none !important; }
    #screen-journey .jrn-tl-item { display: none !important; }
    #screen-journey .jrn-tl-item.active {
        display: flex !important;
        margin: 4px 0 0 !important;
        width: calc(25% - 16px);
        min-width: 280px;
        max-width: none;
        flex: 0 0 auto;
    }
    #screen-journey .jrn-tl-item.active .jrn-phase { flex: 1; }
    /* the visible pair share the same height (the inline task list stays
       hidden, so this is just the compact header/foot height) */
    #screen-journey .jrn-tl-item.active,
    #screen-journey .jrn-tl-item.dsk-prev-stage { align-items: stretch !important; }
    #screen-journey .jrn-tl-item.active .jrn-phase-body,
    #screen-journey .jrn-tl-item.dsk-prev-stage .jrn-phase-body { display: none !important; }
    /* the completed stage just before the current one (tagged by desktop.js) */
    #screen-journey .jrn-tl-item.dsk-prev-stage {
        display: flex !important;
        margin: 4px 0 0 !important;
        width: calc(25% - 12px);
        max-width: none;
        flex: 0 0 auto;
        opacity: .95;
    }
    #screen-journey .jrn-tl-item.dsk-prev-stage .jrn-phase { flex: 1; }
    /* current-stage status line: bold and red */
    #screen-journey .jrn-tl-item.active .jrn-foot-sub {
        color: #dc2626 !important;
        font-weight: 800 !important;
    }
    /* compact card: progress text on top, Continue button below it */
    #screen-journey .jrn-tl-item.active .jrn-phase-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* remove the destination strip and pro-tip on desktop */
    #screen-journey div:has(> .jrn-destination) { display: none !important; }
    #screen-journey .jrn-destination { display: none !important; }
    #screen-journey div[style*="fff7e6"] { display: none !important; }

    /* stage detail opens as a RIGHT-SIDE panel instead of an overlay */
    #jrn-stage-page {
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: min(620px, 46vw) !important;
        max-width: none !important;
        transform: none !important;
        box-shadow: -18px 0 40px rgba(15, 23, 42, .18) !important;
        padding-left: 26px;
        padding-right: 26px;
        z-index: 3500 !important;
    }
    body.dsk-collapsed #jrn-stage-page { left: auto !important; }
    #jrn-stage-page > * { max-width: none; }
    .jrn-sp-back { right: 24px !important; }

    /* the stepper strip built by desktop.js */
    #dsk-journey-stepper {
        display: flex;
        align-items: flex-start;
        max-width: var(--dsk-content-wide);
        margin: 10px auto 20px 0;
        width: 100%;
    }
    .dsk-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
    .dsk-step::before {
        content: '';
        position: absolute;
        top: 16px; left: calc(-100% + 42px); width: calc(100% - 48px);
        height: 3px; border-radius: 2px;
        background: #dde3ef;
    }
    .dsk-step:first-child::before { display: none; }
    .dsk-step.done::before, .dsk-step.active::before { background: #22c55e; }
    .dsk-step-dot {
        width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: .95rem; z-index: 1;
        background: #e5e7eb; color: #9ca3af; border: 3px solid #f4f6fb;
    }
    .dsk-step.done .dsk-step-dot   { background: #22c55e; color: #fff; }
    .dsk-step.active .dsk-step-dot { background: #1a2a6c; color: #fff; box-shadow: 0 0 0 5px rgba(26,42,108,.15); }
    .dsk-step-label { margin-top: 8px; font-size: .84rem; font-weight: 700; color: #94a3b8; text-align: left; max-width: 190px; }
    .dsk-step.done .dsk-step-label   { color: #15803d; }
    .dsk-step.active .dsk-step-label { color: #15307a; }
}

/* ============ flow pages (onboarding, welcome, etc.) ============ */
@media (min-width: 992px) {
    body.dsk-flow { background: #eef1f7 !important; }
    body.dsk-flow .app-container {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        max-width: none !important;
        margin: 0 0 0 var(--dsk-sidebar-w) !important;
        min-height: 100vh;
        box-shadow: none !important;
        background: #eef1f7 !important;
        padding: 34px clamp(20px, 5vw, 60px) 50px !important;
        transition: margin-left .22s ease;
    }
    body.dsk-flow.dsk-collapsed .app-container { margin-left: var(--dsk-sidebar-w-collapsed) !important; }
    body.dsk-flow .app-container > * {
        max-width: var(--dsk-content-max);
        width: 100%;
        margin-left: auto !important;   /* centred, matching ".screen > *" */
        margin-right: auto !important;
    }
    body.dsk-flow .app-container > .bottom-nav { display: none !important; }
    body.dsk-flow [style*="max-width:480px"],
    body.dsk-flow [style*="max-width: 480px"] { max-width: var(--dsk-content-max) !important; }

    /* onboarding welcome: compact professional card */
    body.dsk-flow .welcome-screen.active {
        min-height: 0 !important;
        background: #fff !important;
        border-radius: 16px;
        box-shadow: 0 10px 34px rgba(15, 23, 42, .08);
        padding: 56px 48px !important;
        margin-top: 8vh !important;
        max-width: 620px !important;
        gap: 6px;
    }
    body.dsk-flow .welcome-screen .welcome-sub   { color: #64748b !important; }
    body.dsk-flow .welcome-screen .welcome-name  { color: #101a3f !important; font-size: 2.3rem !important; }
    body.dsk-flow .welcome-screen .welcome-brand { color: #b45309 !important; }
    body.dsk-flow .welcome-screen .btn-premium-cta {
        max-width: 340px;
        margin-top: 26px;
    }
    body.dsk-flow .disha-global-back-fab,
    body.dsk-flow .app-back-fab {
        left: auto !important;
        right: 34px !important;
        bottom: 30px !important;
        position: fixed !important;
    }

    /* setup steps: wizard card */
    body.dsk-flow .app-container > .screen {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 10px 34px rgba(15, 23, 42, .07);
        padding: 40px 48px 44px !important;
        max-width: 960px !important;
        margin-top: 14px !important;
        margin-bottom: 40px !important;
    }
    body.dsk-flow .app-container > .screen .section-title {
        font-size: 1.45rem;
        margin-bottom: 24px;
    }
    body.dsk-flow .app-container > .screen .btn-custom {
        width: auto !important;
        min-width: 230px;
        display: block;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    body.dsk-flow #top-nav {
        max-width: 960px !important;
        border-radius: 14px;
        overflow: hidden;
    }
    /* option cards in a responsive grid */
    body.dsk-flow .app-container > .screen > div:has(> .option-card),
    body.dsk-flow #interest-options,
    body.dsk-flow #career-options {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 12px;
        align-items: stretch;
    }
    body.dsk-flow .option-card { margin-bottom: 0 !important; }
    body.dsk-flow #interest-options .interest-empty,
    body.dsk-flow #career-options .interest-empty,
    body.dsk-flow #interest-options .career-group-head,
    body.dsk-flow #career-options .career-group-head {
        grid-column: 1 / -1;
    }

    /* ============================================================
       Standalone pages (assessment info / test / results / payment)
       Regular website layout: sidebar left, wide centered card.
       ============================================================ */
    body.dsk-page {
        margin-left: var(--dsk-sidebar-w) !important;
        background: #eef1f7 !important;
        --bottom-nav-height: 0px;
        padding-bottom: 40px !important;
        transition: margin-left .22s ease;
    }
    body.dsk-page.dsk-collapsed { margin-left: var(--dsk-sidebar-w-collapsed) !important; }
    body.dsk-page .bottom-nav { display: none !important; }
    body.dsk-page .disha-global-back-fab,
    body.dsk-page .app-back-fab { display: none !important; }

    body.dsk-page .wrap,
    body.dsk-page .app-dashboard {
        max-width: 940px !important;
        width: 100% !important;
        margin: 30px auto 10px !important;
        min-height: auto !important;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 14px 44px rgba(15, 23, 42, .10);
    }
    body.dsk-page .app {
        justify-content: center !important;
        min-height: auto !important;
    }
    body.dsk-page .dailog { max-width: 940px !important; }

    /* -- assessment test page: fit within one screen, no scrolling -- */
    body.dsk-page .app-dashboard { margin-top: 16px !important; }
    body.dsk-page .main-wrapper { padding-bottom: 10px !important; }
    body.dsk-page .app-quizz-module .content { padding: 14px 24px 8px !important; }
    body.dsk-page .quiz-summary { padding: 8px 14px; margin-bottom: 8px; }
    body.dsk-page .qs-top { margin-bottom: 6px; }
    body.dsk-page .qs-box { padding: 3px 6px; }
    body.dsk-page .qs-label { margin-top: 1px; }
    body.dsk-page .qs-track { margin-top: 7px; height: 5px; }
    body.dsk-page .timer { font-size: 1.1rem; padding: 5px 10px; margin-bottom: 8px; }
    body.dsk-page .questian { padding: 10px 14px; margin-bottom: 8px; }
    body.dsk-page .save-questian { padding: 4px 0 8px 10px; }
    body.dsk-page .options ul { padding-bottom: 18px !important; }
    body.dsk-page .questian-prev-next { border-top: 1px solid #e5e7eb; }
    body.dsk-page .options ul li { min-height: 58px; padding: 10px 14px; }
    body.dsk-page .questian-prev-next { bottom: 0; margin-bottom: 0; padding: 10px 14px; }
    body.dsk-page .questian-prev-next .btn { min-width: 44px; min-height: 44px; }
    body.dsk-page #btn_show_test_status { padding: 10px 18px; }

    /* -- weekly action plan (report) page: desktop grid layout -- */
    body.dsk-report .wrap {
        max-width: var(--dsk-content-wide) !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        margin: 0 auto !important;
        padding: 16px 24px 30px !important;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
        align-items: start;
    }
    body.dsk-report .wrap > * { grid-column: 1 / -1; min-width: 0; }
    body.dsk-report .wrap > .rd-assign { grid-column: 1; }
    body.dsk-report .wrap > .rd-prog2 { grid-column: 2; margin-top: 0 !important; }
    body.dsk-report .rd-header-inner { max-width: var(--dsk-content-wide); }
    body.dsk-report .tab-nav { max-width: var(--dsk-content-wide); }
    body.dsk-report .sec-div { font-size: .78rem; margin-top: 14px; }
    /* activity cards side by side when the week menu is showing */
    body.dsk-report #tasks-container:has(> .task-card:nth-child(2)) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 14px;
        align-items: stretch;
    }
    body.dsk-report #tasks-container:has(> .task-card:nth-child(2)) .task-card {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    body.dsk-report #tasks-container:has(> .task-card:nth-child(2)) .task-actions { margin-top: auto; }
    /* activity menu rows become tiles in a 3-column grid */
    body.dsk-report #tasks-container .rd-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    body.dsk-report #tasks-container .rd-card > * { grid-column: 1 / -1; min-width: 0; }
    body.dsk-report #tasks-container .rd-card > .rd-act { grid-column: auto; }
    body.dsk-report #tasks-container .rd-act {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-top: 0 !important;
        padding: 20px 14px 16px;
        height: 100%;
        transition: box-shadow .15s, border-color .15s;
    }
    body.dsk-report #tasks-container .rd-act:hover { border-color: #1a2a6c; box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
    body.dsk-report #tasks-container .rd-act .rd-act-main { flex: initial; }
    body.dsk-report #tasks-container .rd-act .rd-act-chev { display: none; }
    body.dsk-report #tasks-container .rd-act .rd-act-open { margin-top: auto; }
    /* compact tiles so all sections fit in one window */
    body.dsk-report #tasks-container .rd-card { padding: 14px 16px; gap: 10px; margin-bottom: 12px; }
    body.dsk-report #tasks-container .rd-act { padding: 12px 12px; gap: 6px; }
    body.dsk-report #tasks-container .rd-act .rd-act-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; }
    body.dsk-report #tasks-container .rd-act .rd-act-title { font-size: .95rem; }
    body.dsk-report #tasks-container .rd-act .rd-act-sub { font-size: .78rem; margin-top: 1px; }
    body.dsk-report #tasks-container .rd-act .rd-act-topic { font-size: .74rem; padding: 1px 8px; margin-top: 4px; }
    body.dsk-report #tasks-container .rd-act .rd-act-openbtn { padding: 6px 14px; font-size: .85rem; }
    body.dsk-report .rd-assign { padding: 10px 14px; }
    body.dsk-report .rd-assign-week { font-size: 1.25rem; }
    body.dsk-report .rd-assign-count { margin-top: 4px; }
    body.dsk-report .rd-sec-head { margin-bottom: 0 !important; }
    body.dsk-report .wrap { padding-top: 12px !important; }
    /* both sections side by side: 3 tiles + 2 tiles in one row */
    body.dsk-report #tasks-container:has(> .rd-card:nth-child(2)) {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 12px;
        align-items: stretch;
    }
    body.dsk-report #tasks-container:has(> .rd-card:nth-child(2)) > .rd-card { margin-bottom: 0; }
    body.dsk-report #tasks-container:has(> .rd-card:nth-child(2)) > .rd-card:nth-child(2) { grid-template-columns: repeat(2, 1fr); }
    /* account screen: contact & course fields in 3 columns, badges in 4 */
    #screen-account div[style*="border-radius:14px"]:has(#acct-view-name),
    #screen-account div[style*="border-left:4px solid #22c55e"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 22px;
        align-items: center;
    }
    #screen-account div[style*="border-radius:14px"]:has(#acct-view-name) > div:first-child,
    #screen-account div[style*="border-left:4px solid #22c55e"] > div:first-child {
        grid-column: 1 / -1;
    }
    #screen-account div[style*="border-radius:14px"]:has(#acct-view-name) > div,
    #screen-account div[style*="border-left:4px solid #22c55e"] > div {
        border-bottom: none !important;
    }
    #screen-account div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    #screen-account div[style*="flex-direction:column"]:has(> div[style*="c7d2fe"]) {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px !important;
    }

    /* course tab: section cards side by side (search + finder move to Ask Mentor) */
    #screen-course-tab #vl-home > div:has(> .vl-section-card) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        align-items: stretch;
        padding: 14px 0 20px !important;
    }
    /* grouped explore: two group cards first, then at most three cards per group */
    #screen-course-tab #vl-home #vl-groups,
    #screen-course-tab #vl-home .vl-group-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        align-items: stretch;
    }
    #screen-course-tab #vl-home #vl-group-learn .vl-group-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    #screen-course-tab #vl-home .vl-group-back {
        margin: 0 0 16px !important;
        padding: 10px 18px !important;
        font-size: .9rem !important;
    }
    #screen-course-tab #vl-home .vl-group-back:hover { background: #f3f6fc !important; }
    #screen-course-tab #vl-home .vl-section-card {
        margin: 0 !important;
        height: 100%;
        box-sizing: border-box;
        border-radius: 18px !important;
        display: flex;
        flex-direction: column;
    }
    #screen-course-tab #vl-home .vl-section-hdr { padding: 24px 24px 10px !important; gap: 16px !important; }
    #screen-course-tab #vl-home .vl-section-icon { width: 58px !important; height: 58px !important; font-size: 1.8rem !important; border-radius: 16px !important; }
    #screen-course-tab #vl-home .vl-section-title { font-size: 1.15rem !important; }
    #screen-course-tab #vl-home .vl-section-desc { font-size: .84rem !important; line-height: 1.45 !important; }
    /* student-friendly "what's inside" note (added by desktop.js) */
    #screen-course-tab #vl-home .dsk-vl-more {
        margin: 4px 24px 20px;
        padding-top: 12px;
        border-top: 1.5px dashed #e5e9f2;
        font-size: .86rem;
        line-height: 1.6;
        color: #475569;
    }
    #screen-course-tab #vl-home .dsk-vl-more b { color: #1a2a6c; }

    /* course topics list: thumbnail cards side by side (images added by desktop.js) */
    #vl-topics-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 16px 2px 26px;
        overflow: visible !important;
        align-items: stretch;
    }
    #vl-topics-list > div[style*="text-align:center"] { grid-column: 1 / -1; }
    #vl-topics-list .vl-list-item {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1.5px solid #e8ecf5 !important;
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
        transition: transform .15s, box-shadow .15s, border-color .15s;
        height: 100%;
        box-sizing: border-box;
    }
    #vl-topics-list .vl-list-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
        border-color: #c7d2fe !important;
    }
    #vl-topics-list .dsk-topic-thumb {
        width: 100%;
        aspect-ratio: 1672 / 941; /* same ratio as the source images: full picture, no cropping */
        background-size: cover;
        background-position: center;
        background-color: #eef2ff;
        flex: 0 0 auto;
    }
    #vl-topics-list .vl-list-item-icon,
    #vl-topics-list .vl-list-arrow { display: none !important; }
    #vl-topics-list .vl-list-item > div[style*="flex:1"] { padding: 13px 16px 15px; }
    #vl-topics-list .vl-list-title { font-size: .96rem !important; }
    #vl-topics-list .vl-list-sub { font-size: .74rem !important; margin-top: 3px; }

    /* course subtopics list: same thumbnail-card grid as topics (images added by desktop.js) */
    #vl-subtopics-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 16px 2px 26px;
        overflow: visible !important;
        align-items: stretch;
    }
    #vl-subtopics-list > div[style*="text-align:center"] { grid-column: 1 / -1; }
    #vl-subtopics-list .vl-list-item {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1.5px solid #e8ecf5 !important;
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
        transition: transform .15s, box-shadow .15s, border-color .15s;
        height: 100%;
        box-sizing: border-box;
    }
    #vl-subtopics-list .vl-list-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
        border-color: #c7d2fe !important;
    }
    #vl-subtopics-list .dsk-topic-thumb {
        width: 100%;
        aspect-ratio: 1672 / 941;
        background-size: cover;
        background-position: center;
        background-color: #eef2ff;
        flex: 0 0 auto;
    }
    #vl-subtopics-list .vl-list-item-icon,
    #vl-subtopics-list .vl-list-arrow { display: none !important; }
    #vl-subtopics-list .vl-list-item > div:not([class]) { padding: 13px 16px 15px; }
    #vl-subtopics-list .vl-list-title { font-size: .96rem !important; }
    #vl-subtopics-list .vl-list-sub { font-size: .74rem !important; margin-top: 3px; }

    /* --- Careers of the Future: readable desktop type + card thumbnails --- */
    #vl-fusion .fus-tab { font-size: .78rem !important; padding: 14px 8px !important; }
    #vl-fusion .fus-sec-lbl h3 { font-size: 1.3rem !important; }
    #vl-fusion .fus-sec-lbl p { font-size: .92rem !important; line-height: 1.6 !important; }
    #vl-fusion .fus-hero p { font-size: .92rem !important; max-width: 640px !important; }
    #vl-fusion .fus-concept h3 { font-size: 1.15rem !important; }
    #vl-fusion .fus-concept p { font-size: .9rem !important; }
    #vl-fusion .collar-card .cc-badge { font-size: .68rem !important; }
    #vl-fusion .collar-card h4 { font-size: 1.05rem !important; }
    #vl-fusion .collar-card p { font-size: .85rem !important; }
    #vl-fusion .collar-card .cc-eg { font-size: .78rem !important; }
    #vl-fusion .ca-label { font-size: .98rem !important; }
    #vl-fusion .ca-desc { font-size: .88rem !important; line-height: 1.6 !important; }
    #vl-fusion .ca-eg-tag { font-size: .78rem !important; }
    #vl-fusion .fus-card h4 { font-size: 1.18rem !important; }
    #vl-fusion .fus-card > p, #vl-fusion .fus-card-xhead p { font-size: .9rem !important; }
    #vl-fusion .fus-card-tag { font-size: .68rem !important; }
    #vl-fusion .fus-card-meta { font-size: .76rem !important; }
    #vl-fusion .fus-xhint { font-size: .74rem !important; }
    #vl-fusion .fus-detail h5 { font-size: .95rem !important; }
    #vl-fusion .fus-detail p { font-size: .88rem !important; line-height: 1.6 !important; }
    #vl-fusion .fus-path-step { font-size: .85rem !important; }
    #vl-fusion .fus-eq-pill { font-size: .8rem !important; }
    #vl-fusion .fus-f-pill, #vl-fusion .fus-f-result { font-size: .8rem !important; }
    #vl-fusion .fus-f-eq { font-size: .78rem !important; }
    #vl-fusion .fus-formula h4 { font-size: .95rem !important; }
    #vl-fusion .fus-callout p { font-size: .9rem !important; }
    #vl-fusion .fus-field-chip .ff-name { font-size: .68rem !important; }
    #vl-fusion .fus-result-card h4 { font-size: 1.05rem !important; }
    #vl-fusion .fus-result-card p { font-size: .85rem !important; }
    /* cards grouped into a 2-column grid by desktop.js */
    #vl-fusion .dsk-fus-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin: 0 16px 14px;
        align-items: start;
    }
    #vl-fusion .dsk-fus-grid .fus-card { margin: 0 !important; box-sizing: border-box; min-width: 0; }
    /* thumbnails added by desktop.js */
    #vl-fusion .fus-card-xhead { display: flex !important; align-items: center; gap: 16px; }
    #vl-fusion .fus-card-xhead > div:has(> h4) { flex: 1 1 auto; min-width: 0; text-align: left; }
    #vl-fusion .collar-acc-head { display: flex !important; align-items: center; gap: 14px; text-align: left; }
    #vl-fusion .collar-acc-head .ca-label { flex: 1 1 auto; text-align: left; font-size: 1.02rem !important; }
    #vl-fusion .collar-acc-head .dsk-fus-thumb { width: 130px; }
    #vl-fusion .dsk-fus-thumb {
        width: 170px;
        aspect-ratio: 1672 / 941;
        border-radius: 12px;
        border: 2px solid #0F1419;
        background-size: cover;
        background-position: center;
        background-color: #eef2ff;
        flex: 0 0 auto;
    }
    #vl-fusion .fus-card > .dsk-fus-thumb { float: left; margin: 0 16px 8px 0; }

    /* ---- Ask Mentor: desktop layout (wide, no phone column) ---- */
    #screen-ask-mentor #askm-root {
        max-width: var(--dsk-content-max) !important;
        width: 100% !important;
        margin: 0 auto !important;   /* centred, matching ".screen > *" */
    }
    /* the wizard mounts inside an inner .askm-wrap capped at 560px for phones - widen it */
    #askm-root .askm-wrap {
        max-width: var(--dsk-content-max) !important;
        width: 100% !important;
    }
    /* wizard: options side by side, larger type */
    #askm-root .askm-top .askm-title b { font-size: 1.15rem; }
    #askm-root .askm-step h2 { font-size: 1.7rem; }
    #askm-root .askm-step p.sub { font-size: 1rem; }
    #askm-root .askm-opts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    #askm-root .askm-opt { margin-bottom: 0; font-size: 1rem; height: 100%; box-sizing: border-box; }
    /* option thumbnails (hidden on phones via askmentor.css) */
    #askm-root .askm-oimg {
        display: block;
        width: 96px;
        aspect-ratio: 1672 / 941;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        background-color: #eaf2fb;
        flex: 0 0 auto;
    }
    /* options with an image become big square picture tiles, 3 per row */
    #askm-root .askm-opts:has(.askm-oimg) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    #askm-root .askm-opt:has(.askm-oimg) {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 0 18px;
        border-radius: 16px;
        overflow: hidden;
    }
    #askm-root .askm-opt:has(.askm-oimg) .askm-oimg {
        width: 100%;
        aspect-ratio: 1672 / 941;
        border-radius: 0;
    }
    #askm-root .askm-opt:has(.askm-oimg) .dot {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    }
    #askm-root .askm-opt.sel:has(.askm-oimg) .dot { background: var(--askm); }
    #askm-root .askm-opt:has(.askm-oimg) .tx { padding: 14px 18px 0; }
    #askm-root .askm-opt:has(.askm-oimg) .tx b { font-size: 1.05rem; }
    #askm-root .askm-foot { max-width: 660px; }
    /* results: bigger hero, every tab visible, answer items in two columns */
    #askm-root .askm-rhead { min-height: 280px; }
    #askm-root .askm-rcopy h2 { font-size: 2rem; }
    #askm-root .askm-rcopy p { font-size: .95rem; max-width: 780px; }
    #askm-root .askm-meta .m b { font-size: .95rem; }
    #askm-root .askm-meta .m span { font-size: .74rem; }
    #askm-root .askm-ptabs { flex-wrap: wrap; overflow: visible; padding-bottom: 10px; }
    #askm-root .askm-ptab { font-size: .85rem; padding: 9px 16px; }
    #askm-root .askm-pcard {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        align-items: start;
        padding: 20px 24px;
    }
    #askm-root .askm-pcard > * { grid-column: 1 / -1; min-width: 0; }
    #askm-root .askm-pcard > .askm-ic { grid-column: auto; margin: 0; height: 100%; box-sizing: border-box; }
    #askm-root .askm-pcard h3 { font-size: 1.35rem; }
    #askm-root .askm-pcard > p { font-size: .95rem; line-height: 1.6; }
    #askm-root .askm-ic b { font-size: 1rem; }
    #askm-root .askm-ic p { font-size: .9rem; line-height: 1.55; }
    #askm-root .askm-note { font-size: .86rem; }
    #askm-root .askm-empty { font-size: .92rem; }
    #askm-root .askm-guide p { font-size: .98rem; }
    /* parent answer sheet on desktop: cards side by side, calmer hero */
    #askm-root .askm-vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #askm-root .askm-suit { grid-template-columns: 1fr 1fr; }
    #askm-root .askm-lines p { font-size: 1rem; }
    #askm-root .askm-jobrow { flex-direction: row; align-items: baseline; gap: 12px; }
    #askm-root .askm-jobrow b { flex: 0 0 220px; }
    #askm-root .askm-left .askm-rhead { aspect-ratio: 16 / 10; }

    /* ---- Ask Mentor answer page: real website layout ----
       Left: sticky course identity panel. Right: tabs + content,
       flowing immediately with no dead space. */
    #askm-root .askm-body {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    #askm-root .askm-left {
        flex: 0 0 370px;
        position: sticky;
        top: 12px;
    }
    #askm-root .askm-main { flex: 1 1 auto; min-width: 0; }
    #askm-root .askm-main .askm-pcard { margin: 0 0 16px !important; padding: 22px 26px; }
    #askm-root .askm-chips { margin: 2px 0 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #askm-root .askm-snavbar { padding: 2px 0 12px; }
    #askm-root .askm-duo { grid-template-columns: 1fr 1fr; }
    /* left identity card: compact, not a stretched banner */
    #askm-root .askm-left .askm-rhead {
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
        margin: 4px 0 0 !important;
        border-radius: 18px;
    }
    #askm-root .askm-left .askm-rcopy h2 { font-size: 1.45rem; }
    #askm-root .askm-left .askm-rcopy p { font-size: .85rem; }
    /* quick facts stacked under the image as tidy rows */
    #askm-root .askm-left .askm-meta {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 12px 0 0 !important;
    }
    #askm-root .askm-left .askm-meta .m {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        text-align: left;
        padding: 12px 16px;
    }
    #askm-root .askm-left .askm-meta .m b { font-size: .95rem; }
    #askm-root .askm-left .askm-meta .m span { margin: 0; font-size: .78rem; }
    /* tabs directly above the content - no gap */
    #askm-root .askm-main .askm-ptabs { padding: 8px 0 12px; margin: 0; }
    #askm-root .askm-main .askm-pcard { margin: 0 !important; padding: 22px 26px; }
    /* footer: normal buttons, right aligned - no full-width mobile bar */
    #askm-root .askm-main .askm-foot {
        position: static !important;
        background: none !important;
        padding: 16px 0 6px !important;
        justify-content: flex-end;
    }
    #askm-root .askm-main .askm-foot .askm-next {
        flex: 0 0 auto !important;
        min-width: 280px;
    }

    /* Ask Mentor: course search + Course Finder tools (moved here by desktop.js) */
    #dsk-askm-tools { margin-bottom: 10px; }
    #dsk-askm-tools .dsk-askm-tools-head {
        font-size: .8rem;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .6px;
        margin: 10px 2px 8px;
    }
    #dsk-askm-tools .vl-search-box { margin: 0 0 12px !important; }
    #dsk-askm-tools .vl-section-card { margin: 0 0 8px !important; }

    /* leaders lab: arena detail sheet - full-height panel beside the sidebar */
    #fll-arena-sheet {
        left: var(--dsk-sidebar-w) !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    body.dsk-collapsed #fll-arena-sheet { left: var(--dsk-sidebar-w-collapsed) !important; }
    /* use the full panel width (small symmetric margins only) and scale the type up */
    #fll-arena-sheet > div {
        max-width: var(--dsk-content-wide);
        margin-left: auto !important;   /* centred, matching ".screen > *" */
        margin-right: auto !important;
        zoom: 1.15;
    }
    /* readable desktop type inside the sheet */
    #fll-arena-sheet [style*="font-size:0.8rem"] { font-size: .95rem !important; }
    #fll-arena-sheet #fll-d-name { font-size: 1.45rem !important; }
    #fll-arena-sheet #fll-d-tagline { font-size: .95rem !important; }
    #fll-arena-sheet #fll-d-what { font-size: 1rem !important; line-height: 1.75 !important; }
    #fll-arena-sheet #fll-d-how { font-size: .96rem !important; line-height: 1.65 !important; }
    #fll-arena-sheet div[style*="font-size:0.96rem"] { font-size: 1.2rem !important; }
    #fll-arena-sheet [style*="font-size:0.84rem"] { font-size: 1rem !important; }
    #fll-arena-sheet [style*="font-size:0.82rem"] { font-size: .95rem !important; }
    #fll-arena-sheet [style*="font-size:0.78rem"], #fll-arena-sheet [style*="font-size:0.76rem"] { font-size: .9rem !important; }
    #fll-arena-sheet [style*="font-size:0.72rem"], #fll-arena-sheet [style*="font-size:0.7rem"] { font-size: .88rem !important; }
    #fll-arena-sheet [style*="font-size:0.68rem"], #fll-arena-sheet [style*="font-size:0.66rem"] { font-size: .84rem !important; }
    #fll-arena-sheet [style*="font-size:0.63rem"], #fll-arena-sheet [style*="font-size:0.6rem"] { font-size: .8rem !important; }

    /* leaders lab: arena detail sheet - smaller sticky image, text scrolls under it */
    #fll-arena-sheet #fll-step-details > div:first-child { z-index: 3 !important; }
    #fll-arena-sheet div:has(> #fll-d-image) {
        position: sticky;
        top: 61px; /* just below the sticky Back header */
        z-index: 2;
        box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
    }
    #fll-arena-sheet #fll-d-image {
        width: 100% !important;
        height: 240px !important;
        object-fit: contain; /* show the full illustration, never crop it */
        background: #eef3ff;
    }

    /* leaders lab: arena card image thumbnails (added by desktop.js) */
    #fll-arena-grid .dsk-arena-thumb {
        width: 120px;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        background-color: #eef2ff;
        flex: 0 0 auto;
    }

    /* leaders lab: competitive arenas in 3 columns */
    #fll-arena-grid > div[style*="display:grid"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        align-items: stretch;
    }
    #fll-arena-grid > div[style*="display:grid"] > div { height: 100%; }

    /* virtual internship module: wide panel, sidebar stays visible */
    body.dsk-report #vi-modal { left: var(--dsk-sidebar-w) !important; }
    body.dsk-report.dsk-collapsed #vi-modal { left: var(--dsk-sidebar-w-collapsed) !important; }
    body.dsk-report #vi-modal > div { max-width: 1140px !important; }
    body.dsk-report #vi-sections iframe { height: calc(100vh - 62px) !important; }

    /* weekly activity module: wide desktop panel, sidebar stays visible */
    body.dsk-report #wa-overlay { left: var(--dsk-sidebar-w) !important; }
    body.dsk-report.dsk-collapsed #wa-overlay { left: var(--dsk-sidebar-w-collapsed) !important; }
    body.dsk-report #wa-phone {
        max-width: 880px !important;
        width: 100% !important;
        height: calc(100vh - 48px) !important;
        max-height: none !important;
        margin: 24px auto;
        border-radius: 18px !important;
        box-shadow: 0 18px 60px rgba(8, 80, 65, .25);
    }
    body.dsk-report .wa-hero { padding: 34px 40px 28px; }
    body.dsk-report #wa-body > * { padding-left: 40px; padding-right: 40px; }
    body.dsk-report #wa-body > .wa-hero { padding: 34px 40px 28px; }
    body.dsk-report #wa-footer { padding: 14px 40px 20px; }

    /* "How this works" popup: wide, explanations side by side */
    body.dsk-report .rd-hiw-box { max-width: 1020px; }
    body.dsk-report .rd-hiw-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    body.dsk-report .rd-hiw-body > p { grid-column: 1 / -1; margin-bottom: 2px !important; }
    body.dsk-report .rd-hiw-item {
        border: 1.5px solid #e6ebf5;
        border-radius: 14px;
        padding: 14px 16px !important;
        margin-bottom: 0 !important;
        background: #f8faff;
    }
    body.dsk-report .rd-hiw-item p { font-size: .85rem; line-height: 1.5; }
    body.dsk-report .rd-hiw-ok { width: auto; padding: 12px 46px; display: block; margin: 18px auto 0; }

    /* -- result page: tabbed sections -- */
    #dsk-result-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
    #dsk-result-tabs .dsk-rtab { border: 1.5px solid #dbe3f0; background: #fff; color: #334155; border-radius: 999px; padding: 9px 18px; font-size: .85rem; font-weight: 800; cursor: pointer; }
    #dsk-result-tabs .dsk-rtab:hover { border-color: #1a2a6c; }
    #dsk-result-tabs .dsk-rtab.active { background: #1a2a6c; border-color: #1a2a6c; color: #fdbb2d; }
    #dsk-result-tabs .dsk-rtab-pdf { margin-left: auto; border: 0; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-radius: 10px; padding: 10px 18px; font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(22,163,74,.3); }
    .dsk-tab-hidden { display: none !important; }
}

/* ============================================================
   Certificate / assessment report page - desktop design
   (2026-07-08). certificate.phtml carries body.pg-certificate;
   the dsk-page machinery already gives it the sidebar + 940px
   card. This block turns the narrow mobile column into a real
   report layout: full-width banner, big stats, two-column report
   cards and side-by-side career sections. Mobile untouched.
   ============================================================ */
@media (min-width: 992px) {
    body.pg-certificate .page-actions { max-width: 940px; margin: 26px auto 0; padding: 0; justify-content: flex-end; gap: 10px; }
    body.pg-certificate .page-actions .btn-print,
    body.pg-certificate .page-actions .btn-back-top { flex: 0 0 auto; padding: 12px 26px; }
    body.pg-certificate .wrap { margin-top: 12px !important; }
    body.pg-certificate .result-header { padding: 40px 44px 46px; }
    body.pg-certificate .result-badge { font-size: .74rem; }
    body.pg-certificate .result-title { font-size: 2rem; }
    body.pg-certificate .result-sub { font-size: .95rem; }
    body.pg-certificate .congrats-badge { font-size: .88rem; padding: 7px 20px; margin-top: 14px; }
    body.pg-certificate .stats-row { padding: 24px 28px 0; gap: 16px; }
    body.pg-certificate .stat-box { padding: 16px 10px; }
    body.pg-certificate .stat-num { font-size: 1.8rem; }
    body.pg-certificate .stat-lbl { font-size: .68rem; }
    body.pg-certificate .content { padding: 22px 28px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
    body.pg-certificate .content > * { grid-column: 1 / -1; }
    body.pg-certificate .content > .cwl-section { grid-column: auto; height: 100%; }
    body.pg-certificate #v2-result-mount { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    body.pg-certificate #v2-result-mount > * { margin-bottom: 0 !important; }
    body.pg-certificate #v2-result-mount > :nth-child(odd):last-child { grid-column: 1 / -1; }
    body.pg-certificate .sec-title { font-size: .78rem; margin-top: 26px; }
    body.pg-certificate .info-box { margin-top: 24px; }
    body.pg-certificate .btn-cta,
    body.pg-certificate .btn-back { max-width: 460px; justify-self: center; width: 100%; }
}

/* ============================================================
   v2 report icons & career thumbnails (2026-07-08)
   v2_charts.js and the PHP watch-list emit small emoji icons
   (.v2-ticon), delta chips (.v2-delta) and photo thumbnails
   (.cwl-thumb / .v2-wthumb). Icons and photos show on desktop
   only; the delta chips show everywhere (they are data, not
   decoration). Mobile keeps its existing look otherwise.
   ============================================================ */
.v2-ticon  { display: none; }
.cwl-thumb { display: none; }
.v2-wthumb { display: none; }
@media (min-width: 992px) {
    .v2-ticon  { display: inline-block; margin-right: 6px; }
    .cwl-card-icon { overflow: hidden; position: relative; }
    .cwl-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
    .cwl-card-icon.noimg .cwl-thumb { display: none; }
    .cwl-card-icon:not(.noimg) .cwl-emoji { display: none; }
    .v2-wthumb { display: block; }
    /* bigger photo tiles on the career watch-list cards */
    .cwl-card .cwl-card-icon { width: 62px; height: 62px; border-radius: 12px; }
    .cwl-card { padding: 10px 12px; }
}

/* ============================================================
   Print / Save-as-PDF: full report as one continuous document
   ============================================================ */
@media print {
    #dsk-sidebar, .bottom-nav, #dsk-result-tabs, .btn-cta, .btn-back,
    .disha-global-back-fab, .app-back-fab, .info-box { display: none !important; }
    body, body.dsk-page { margin-left: 0 !important; background: #fff !important; padding-bottom: 0 !important; }
    .dsk-tab-hidden { display: block !important; }
    body.dsk-page .wrap { box-shadow: none !important; margin: 0 auto !important; max-width: 100% !important; border-radius: 0; }
    .v2-card { break-inside: avoid; }
}

/* ============================================================
   HOME dashboard (desktop web only, >= 992px) - 2026-07 redesign
   A desktop.js-built dashboard (.dsk-dash) replaces the narrow
   mobile home column with the approved layout: top greeting bar,
   left-aligned hero, left programme cards, right rail (Your
   Progress + What's New + Mentor). Mobile / Android / iOS
   (< 992px) hide .dsk-dash entirely and keep the original view.
   ============================================================ */
.dsk-dash { display: none; }              /* hidden on mobile / apps */

@media (min-width: 992px) {
    /* hide the original mobile home content, show the dashboard */
    #screen-home.active > .infographic-header,
    #screen-home.active > .features-grid,
    #screen-home.active > .btn-row,
    #screen-home.active > .monthly-banner { display: none !important; }

    #screen-home.active {
        display: block !important;
        left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
        padding: 0 !important; overflow: hidden !important; background: #eef1f7 !important;
    }
    /* The dashboard is a true full-height app layout (main pane + right rail),
       so it opts out of the normal reading width and uses the wide tier instead
       of stretching edge to edge on large monitors. Centred, so the rail does
       not drift far from the content on ultrawide screens. */
    #screen-home.active > .dsk-dash { max-width: var(--dsk-content-wide) !important; width: auto !important; margin: 0 auto !important; }

    .dsk-dash {
        display: flex; flex-direction: column; height: 100%;
        padding: 14px clamp(18px, 2.4vw, 30px) 16px;
        font-family: 'Segoe UI', Roboto, system-ui, Arial, sans-serif;
    }
    .dsk-dash * { box-sizing: border-box; }

    /* top bar */
    .dsk-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
    .dsk-topbar .hi h1 { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin: 0; }
    .dsk-topbar .hi p { color: #64748b; font-size: .83rem; margin: 2px 0 0; }
    .dsk-topbar .acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    .dsk-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e6eaf2; border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: .8rem; color: #1e2a5a; }
    .dsk-pill i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
    .dsk-ic { width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid #e6eaf2; display: grid; place-items: center; font-size: 1rem; color: #334155; text-decoration: none; cursor: pointer; }
    .dsk-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#ff8a3d,#ff5f6d); color: #fff; font-weight: 800; display: grid; place-items: center; }

    .dsk-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; flex: 1; min-height: 0; }
    .dsk-left { display: flex; flex-direction: column; min-height: 0; }

    /* hero */
    .dsk-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 26px; color: #fff; flex: none;
        background: radial-gradient(1000px 260px at 92% -45%, rgba(253,187,45,.26), transparent), linear-gradient(120deg,#1e2a5a,#24337a); }
    .dsk-hero .eyebrow { color: #fdbb2d; font-weight: 800; font-size: .68rem; letter-spacing: 1.6px; text-transform: uppercase; }
    .dsk-hero h2 { font-size: 1.55rem; line-height: 1.14; font-weight: 900; margin: 8px 0 6px; max-width: 560px; }
    .dsk-hero h2 em { font-style: normal; color: #fdbb2d; }
    .dsk-hero p { color: #c9d2ee; font-size: .86rem; max-width: 520px; line-height: 1.45; }
    .dsk-hero .cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#ff8a3d,#ff5f6d); color: #fff; font-weight: 800; font-size: .88rem; padding: 11px 20px; border-radius: 11px; border: 0; cursor: pointer; }
    .dsk-hero .badges { margin-top: 14px; display: flex; gap: 24px; flex-wrap: wrap; }
    .dsk-hero .badges div { font-size: .76rem; color: #aeb9df; line-height: 1.2; }
    .dsk-hero .badges b { display: block; color: #fff; font-size: 1.02rem; font-weight: 800; }

    .dsk-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 2px 9px; }
    .dsk-sec h3 { font-size: 1rem; font-weight: 800; color: #1e293b; }
    .dsk-sec span { font-size: .8rem; color: #64748b; }

    /* programme cards */
    .dsk-cards { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; gap: 12px; flex: 1; min-height: 0; }
    .dsk-c { background: #fff; border: 1px solid #e6eaf2; border-radius: 14px; padding: 14px 15px; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 6px 18px rgba(16,26,51,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
    .dsk-c:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,26,51,.12); border-color: #cdd6ea; }
    .dsk-c .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
    .dsk-c .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
    .dsk-c .ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .dsk-c .num { font-weight: 900; font-size: .9rem; color: #c3ccdf; }
    .dsk-c h4 { font-size: .9rem; font-weight: 800; color: #1e2a5a; margin: 0 0 3px; line-height: 1.15; }
    .dsk-c p { font-size: .77rem; color: #64748b; line-height: 1.4; margin: 0; }
    .dsk-c.i1 .ico { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
    .dsk-c.i2 .ico { background: linear-gradient(135deg,#0ea5e9,#22c1c3); }
    .dsk-c.i3 .ico { background: linear-gradient(135deg,#f59e0b,#f97316); }
    .dsk-c.i4 .ico { background: linear-gradient(135deg,#10b981,#22c55e); }
    .dsk-c.i5 .ico { background: linear-gradient(135deg,#ec4899,#f43f5e); }
    .dsk-c.i6 .ico { background: linear-gradient(135deg,#3b82f6,#6366f1); }

    /* right rail */
    .dsk-rail { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
    .dsk-panel { background: #fff; border: 1px solid #e6eaf2; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(16,26,51,.05); }
    .dsk-panel h4 { font-size: .92rem; font-weight: 800; color: #1e293b; margin: 0 0 3px; }
    .dsk-panel .muted { color: #64748b; font-size: .79rem; }
    .dsk-prog-ring { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
    .dsk-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(#fdbb2d 0 0deg, #eef1f7 0 360deg); }
    .dsk-ring i { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 900; color: #1e2a5a; font-style: normal; font-size: .82rem; }
    .dsk-steps { display: flex; flex-direction: column; gap: 7px; }
    .dsk-st { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: #1e293b; }
    .dsk-st .k { width: 19px; height: 19px; border-radius: 50%; background: #eef1f7; display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: #64748b; flex: none; }
    .dsk-st.done .k { background: #22c55e; color: #fff; }
    .dsk-st.now .k { background: #fdbb2d; color: #241a02; }
    .dsk-btn { margin-top: 14px; width: 100%; background: linear-gradient(135deg,#ff8a3d,#ff5f6d); color: #fff; border: 0; border-radius: 10px; padding: 11px; font-weight: 800; font-size: .85rem; cursor: pointer; }
    .dsk-news { background: linear-gradient(120deg,#1e2a5a,#3244a0); color: #fff; border: 0; }
    .dsk-news h4 { color: #fff; } .dsk-news .muted { color: #fff; opacity: .82; }
    .dsk-tag { display: inline-block; background: #fdbb2d; color: #241a02; font-weight: 900; font-size: .6rem; letter-spacing: 1px; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; }
    .dsk-dash .dsk-link { color: #2b3a7a !important; font-weight: 800; font-size: .8rem; margin-top: 10px; display: inline-block; cursor: pointer; }
    .dsk-news .dsk-link { color: #ffd78a !important; }
    .dsk-mentor { display: flex; align-items: center; gap: 11px; }
    .dsk-mentor .mav { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#22c1c3,#0ea5e9); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
}

/* HOME dashboard - compact sizing so the whole thing fits one screen */
@media (min-width: 992px) {
    .dsk-dash { padding: 12px clamp(16px, 2.2vw, 26px) 12px; overflow: hidden; }
    .dsk-topbar { margin-bottom: 9px; }
    .dsk-topbar .hi h1 { font-size: 1.12rem; }
    .dsk-grid { gap: 13px; }
    .dsk-hero { padding: 15px 22px; }
    .dsk-hero h2 { font-size: 1.36rem; margin: 5px 0 5px; }
    .dsk-hero p { font-size: .82rem; }
    .dsk-hero .cta { margin-top: 11px; padding: 9px 16px; }
    .dsk-hero .badges { margin-top: 11px; gap: 18px; }
    .dsk-hero .badges b { font-size: .96rem; }
    .dsk-sec { margin: 10px 2px 7px; }
    .dsk-cards { gap: 10px; }
    .dsk-c { padding: 11px 13px; }
    .dsk-c .top { margin-bottom: 7px; }
    .dsk-c .ico { width: 32px; height: 32px; }
    .dsk-c h4 { font-size: .87rem; }
    .dsk-c p { font-size: .74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .dsk-rail { gap: 11px; }
    .dsk-panel { padding: 13px 14px; }
    .dsk-prog-ring { margin: 9px 0 3px; gap: 12px; }
    .dsk-ring { width: 56px; height: 56px; }
    .dsk-ring i { width: 43px; height: 43px; font-size: .78rem; }
    .dsk-steps { gap: 5px; }
    .dsk-st { font-size: .8rem; }
    .dsk-btn { margin-top: 11px; padding: 9px; }
}

/* ============================================================
   HOME dashboard - fill the empty space (2026-07-08)
   Blue hero grows to ~half the height with vertically-centred
   content; the six programme cards split the remaining ~half as
   two uniform, filled rows; the right rail spreads its panels
   down the full column so there is no dead space at the bottom.
   Desktop web only (>= 992px); mobile / Android / iOS untouched.
   ============================================================ */
@media (min-width: 992px) {
    /* left column now splits ~50 / ~50 between hero and cards */
    .dsk-hero {
        flex: 1 1 0; min-height: 0;
        display: flex; flex-direction: column; justify-content: center;
        padding: clamp(22px, 3vh, 40px) clamp(24px, 2.2vw, 38px);
    }
    .dsk-hero .eyebrow { font-size: .72rem; }
    .dsk-hero h2 { font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.12; margin: 10px 0 8px; max-width: 640px; }
    .dsk-hero p  { font-size: clamp(.86rem, 1vw, .98rem); max-width: 580px; }
    .dsk-hero .cta { margin-top: clamp(14px, 2vh, 22px); padding: 12px 22px; font-size: .92rem; }
    .dsk-hero .badges { margin-top: clamp(16px, 2.4vh, 26px); gap: 30px; }
    .dsk-hero .badges b { font-size: 1.1rem; }
    .dsk-hero .badges div { font-size: .8rem; }

    /* programme cards fill the remaining half as two uniform rows,
       content vertically centred so no card is left hollow */
    .dsk-cards { flex: 1 1 0; min-height: 0; grid-auto-rows: 1fr; }
    .dsk-c { padding: clamp(14px, 1.6vw, 20px) clamp(15px, 1.6vw, 20px); justify-content: center; }
    .dsk-c .top { margin-bottom: clamp(8px, 1.4vh, 14px); }
    .dsk-c .ico { width: 40px; height: 40px; }
    .dsk-c .ico svg { width: 22px; height: 22px; }
    .dsk-c h4 { font-size: .96rem; margin-bottom: 5px; }
    .dsk-c p  { font-size: .8rem; -webkit-line-clamp: 3; }

    /* right rail: spread the three panels down the full height */
    .dsk-rail { justify-content: space-between; }

    /* whole rail panels are clickable (journey / what's new / mentor) */
    .dsk-panel[data-go] { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
    .dsk-panel[data-go]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,26,51,.12); border-color: #cdd6ea; }
}

/* ============================================================
   Course video lists -> compact module-card grid (desktop only)
   Restyles #vl-videos-list (.vl-video-card) from full-width
   "long box" rows into a responsive card grid. Markup and the
   playVideoByKey() click handler are untouched; mobile is
   completely unaffected (rules live inside min-width:992px).
   ============================================================ */
@media (min-width: 992px) {
    #vl-videos-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 18px;
        align-content: start;
        padding: 18px 6px 48px;
    }
    #vl-videos-list .vl-video-card {
        background: #fff;
        border: 1px solid #e4e8f2;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(16,29,64,.06), 0 8px 22px rgba(16,29,64,.07);
        display: flex;
        flex-direction: column;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    #vl-videos-list .vl-video-card:hover {
        transform: translateY(-3px);
        border-color: #d3dbef;
        box-shadow: 0 2px 6px rgba(16,29,64,.10), 0 16px 36px rgba(16,29,64,.15);
    }
    #vl-videos-list .vl-video-card:active { background: #fff; }

    /* top row -> stacked: full-width 16:9 thumbnail, then title block */
    #vl-videos-list .vl-video-card-top {
        display: block;
        padding: 0;
        position: relative;
    }
    #vl-videos-list .vl-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        background: #1a2a6c;
        position: relative;
    }
    #vl-videos-list .vl-thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* draw a play affordance on the thumbnail; hide the original small btn */
    #vl-videos-list .vl-play-btn { display: none; }
    #vl-videos-list .vl-video-card[onclick] .vl-thumb::before {
        content: "";
        position: absolute; top: 50%; left: 50%;
        width: 50px; height: 50px;
        transform: translate(-50%, -50%);
        background: rgba(255,255,255,.92);
        border-radius: 50%;
        box-shadow: 0 6px 16px rgba(0,0,0,.28);
    }
    #vl-videos-list .vl-video-card[onclick] .vl-thumb::after {
        content: "";
        position: absolute; top: 50%; left: 50%;
        transform: translate(-38%, -50%);
        border-style: solid;
        border-width: 9px 0 9px 15px;
        border-color: transparent transparent transparent #1a2a6c;
    }

    /* title block (the div immediately after the thumbnail) = card body head */
    #vl-videos-list .vl-thumb + div { padding: 13px 15px 0; }
    #vl-videos-list .vl-video-title {
        font-size: .92rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #vl-videos-list .vl-video-dur { margin-top: 4px; }

    /* description -> clamped 3-line summary (kills the full-width long box) */
    #vl-videos-list .vl-video-desc-box {
        margin: 0;
        padding: 8px 15px 0;
        background: none;
        border-left: 0;
        border-radius: 0;
    }
    #vl-videos-list .vl-video-desc {
        font-size: .78rem;
        line-height: 1.55;
        color: #5b6376;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #vl-videos-list .vl-video-desc.dsk-open {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    #vl-videos-list .dsk-vid-more {
        display: inline-block;
        margin: 7px 15px 14px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: #3556d4;
        font-weight: 700;
        font-size: .74rem;
    }
    #vl-videos-list .dsk-vid-more:hover { text-decoration: underline; }
    /* cards without a description still get bottom breathing room */
    #vl-videos-list .vl-video-card > .vl-video-card-top:last-child { padding-bottom: 14px; }
}

/* ============================================================
   Ask Mentor page starts with its own content only (desktop).
   The old "Quick course & career lookup" tools (course search +
   Course Finder card) are removed from the desktop view.
   ============================================================ */
@media (min-width: 992px) {
    /* Keep the course search visible on desktop (feature parity with mobile).
       Only the Course Finder card is intentionally moved to the Ask Mentor tab. */
    #dsk-askm-tools,
    #screen-course-tab .vl-section-card[onclick*="vlOpenFinderChoice"] {
        display: none !important;
    }
    #screen-course-tab .vl-search-box { max-width: 640px; }
}

/* ============================================================
   One-item-at-a-time carousel for course drill lists (desktop).
   When desktop.js adds .dsk-carousel to a list, it overrides the
   card grid and shows a single centered item with Prev/Next.
   Fully reversible - remove the class/JS to return to the grid.
   ============================================================ */
@media (min-width: 992px) {
    #vl-videos-list.dsk-carousel,
    #vl-topics-list.dsk-carousel,
    #vl-subtopics-list.dsk-carousel {
        display: block !important;
        grid-template-columns: none !important;
        padding: 26px 6px 46px;
    }
    /* hide every item except the current one */
    #vl-videos-list.dsk-carousel > .vl-video-card,
    #vl-topics-list.dsk-carousel > .vl-list-item,
    #vl-subtopics-list.dsk-carousel > .vl-list-item { display: none !important; }
    #vl-videos-list.dsk-carousel > .vl-video-card.dsk-cur,
    #vl-topics-list.dsk-carousel > .vl-list-item.dsk-cur,
    #vl-subtopics-list.dsk-carousel > .vl-list-item.dsk-cur {
        display: flex !important;
        width: 100%;
        max-width: var(--dsk-cw, 560px);
        margin: 0 auto !important;
    }
    .dsk-carousel-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        max-width: var(--dsk-cw, 560px);
        margin: 22px auto 0;
    }
    .dsk-carousel-btn {
        border: 1px solid #d3dbef;
        background: #fff;
        color: #1a2a6c;
        font-weight: 700;
        font-size: .82rem;
        padding: 10px 18px;
        border-radius: 10px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .dsk-carousel-btn:hover { background: #1a2a6c; color: #fff; border-color: #1a2a6c; }
    .dsk-carousel-count {
        font-weight: 800;
        color: #5b6376;
        font-size: .85rem;
        min-width: 64px;
        text-align: center;
    }
}