/* =====================================================================
       interview-questions -- UI RESTYLE 2026-08-26

       Layout is deliberately unchanged: the same hero row, the same
       col-lg-3 question index + col-lg-9 answer column. This block only
       repaints that structure onto assets/css/jobaaj-ui.css, which
       pin/header.php already loads on every page, so the page finally
       speaks the same visual language as interview-resources.php and the
       homepage instead of the old #373e3f / #f2f6fd palette.

       Tokens (--ui-*) come from jobaaj-ui.css. The pre-existing class
       names (.navv, .iconn, .title, .ScrollStyle, .sticky-sidebar,
       .sidebar-data1) are kept and redefined so the markup churn stays
       small; genuinely new pieces are namespaced .iq-*.

       Previous version: interview-questions.php.bak-ui-20260826
    ===================================================================== */

    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    #main_content {
        font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        color: var(--ui-ink);
        padding-left: 0;
        padding-right: 0;
        background: var(--ui-bg);
    }

    /* .container-fluid pads 0 .75rem and .row cancels it with a matching
       negative margin. Zeroing the padding above without zeroing the margin
       here would push both rows 12px past each edge of the viewport and give
       the page a horizontal scrollbar on phones. Columns keep their own
       gutter padding, so nothing inside moves. */
    #main_content > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* ---------------------------------------------------------------
       HERO BAND  (was a flat #373e3f slab with white text)
       The site header is .navbar-absolute-top and overlays the top of
       the page rather than pushing it down, so the band clears it
       itself via --ui-header-offset. That replaces the old inline
       margin-top:6rem, which left a white gutter above a dark slab.
    --------------------------------------------------------------- */
    .navv {
        position: relative;
        overflow: hidden;
        padding: calc(var(--ui-header-offset) + 4px) clamp(16px, 4vw, 56px) 30px;
        background: linear-gradient(180deg, var(--ui-blue-50) 0%, var(--ui-bg) 100%);
        border-bottom: 1px solid var(--ui-grey-200);
    }

    /* Same dotted wash as .ir-hero on interview-resources.php. */
    .navv::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, #C7D3F0 1.5px, transparent 1.5px);
        background-size: 18px 18px;
        opacity: .45;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
                mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
        pointer-events: none;
    }

    .navv > * { position: relative; z-index: 1; }

    @media (max-width: 991.98px) {
        .navv { padding-top: 84px; padding-bottom: 24px; }
    }

    .iq-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ui-bg);
        border: 1px solid var(--ui-grey-200);
        color: var(--ui-grey-600);
        box-shadow: var(--ui-shadow-sm);
        text-decoration: none;
        transition: color .18s ease, border-color .18s ease;
    }

    .iq-back:hover { color: var(--ui-blue-600); border-color: var(--ui-blue-500); }
    .iq-back .bi { font-size: 18px; line-height: 1; }

    /* Was an <h3 style="color:white">. The page had no <h1> at all. */
    .iq-title {
        font-size: clamp(23px, 3.4vw, 38px);
        font-weight: 800;
        letter-spacing: -.025em;
        line-height: 1.15;
        color: var(--ui-ink);
        margin: 0 0 8px;
    }

    /* Was line-height:3px, which clipped the descenders off the date. */
    .iq-meta {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--ui-grey-400);
    }

    .iq-share {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }


    .title {
        font-size: 13px;
        font-weight: 700;
        color: var(--ui-grey-600);
    }

    .iconn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-left: 0;
        font-size: 16px;
        line-height: 1;
        border-radius: 50%;
        background: var(--ui-bg);
        border: 1px solid var(--ui-grey-200);
        color: var(--ui-grey-600);
        transition: color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .iconn:hover {
        color: var(--ui-blue-600);
        border-color: var(--ui-blue-500);
        transform: translateY(-2px);
    }

    /* ---------------------------------------------------------------
       QUESTION INDEX  (col-lg-3)
       Previously a 900px-tall #f2f6fd box with 5rem of padding. Below
       992px its contents were a Bootstrap .collapse whose toggle button
       had been commented out, so phones rendered an empty pale box and
       had no way to jump between questions at all. The collapse is
       neutralised here and driven by .iq-index-toggle instead, which
       keeps .ScrollStyle a direct child of the column so position:
       sticky still has the full column height to travel in.
    --------------------------------------------------------------- */
    /* Two rules fought over this node: Bootstrap's .collapse:not(.show)
       {display:none} below 992px, and .navbar-expand-lg .navbar-collapse
       {display:flex!important} above it -- the first hid the index on phones,
       the second would centre the list vertically. An id + !important outranks
       both, so the list is always a plain block and .iq-index-toggle owns the
       show/hide on small screens by toggling .iq-open on the panel itself. */
    #navbarVerticalNavMenu { display: block !important; }

    .iq-index-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 48px;
        padding: 12px 16px;
        margin-bottom: 12px;
        border: 1.5px solid var(--ui-grey-200);
        border-radius: var(--ui-radius-md);
        background: var(--ui-bg);
        color: var(--ui-ink);
        font-size: 14.5px;
        font-weight: 700;
        text-align: left;
        box-shadow: var(--ui-shadow-sm);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .iq-index-toggle:hover { border-color: var(--ui-blue-500); background: var(--ui-blue-50); }
    .iq-index-toggle .bi { color: var(--ui-grey-400); transition: transform .2s ease; }
    .iq-index-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }

    @media (min-width: 992px) { .iq-index-toggle { display: none; } }

    .ScrollStyle {
        /* Never taller than what is left of the viewport below the header, so
           the card always fits on screen and scrolls internally rather than
           having its lower half pushed out of reach. */
        max-height: calc(100vh - var(--iq-sticky-top, var(--ui-header-offset)) - 48px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        background: var(--ui-bg);
        border: var(--ui-card-border);
        border-radius: var(--ui-radius-lg);
        box-shadow: var(--ui-card-shadow);
        padding: 18px 10px 18px 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--ui-grey-200) transparent;
    }

    .ScrollStyle::-webkit-scrollbar { width: 8px; }
    .ScrollStyle::-webkit-scrollbar-track { background: transparent; }
    .ScrollStyle::-webkit-scrollbar-thumb { background: var(--ui-grey-200); border-radius: 8px; }
    .ScrollStyle::-webkit-scrollbar-thumb:hover { background: var(--ui-grey-400); }

    /* The index rides down the page with the reader.

       #header is .navbar-absolute-top until the page scrolls, at which point
       the theme promotes it to .navbar-fix-top and slides it out on scroll-down
       / back in on scroll-up. Any constant sticky offset is therefore wrong half
       the time -- park the card at the header height and it floats with a gap
       whenever the header slides away, park it at 0 and the header covers it
       when it slides back. So --iq-sticky-top is written from JS with the
       header's real bottom edge on every frame it moves; the values below are
       only the pre-JS defaults. Same approach interview-resources.php uses. */
    /* THE COLUMN is the sticky element, not the card inside it.

       The first attempt stuck .ScrollStyle and left the column to stretch to
       the row's height, which is what gives a sticky child room to travel.
       That works only for as long as the column really does stretch: .row is
       a flex container, and the moment anything settles align-items to
       something other than stretch -- or the column ends up on its own wrapped
       flex line -- the column collapses to its content height, the card fills
       it completely, and sticky has nowhere to move. The result looks exactly
       like position:sticky being ignored.

       Sticking the column itself with align-self:flex-start removes the
       dependency: the column is deliberately shrunk to its content, and a
       sticky flex item is constrained by its flex container's content box --
       the full height of .row -- so it always has the whole content column's
       height to travel through. This is the canonical Bootstrap sticky-sidebar
       recipe and it behaves the same at every breakpoint.

       Below lg the panel itself is display:none until opened, so what rides
       down the page is just the 48px "Jump to a question" bar. */
    .iq-index-col {
        position: sticky;
        top: calc(var(--iq-sticky-top, var(--ui-header-offset)) + 8px);
        align-self: flex-start;
        z-index: 20;
    }

    /* Kept as a no-op so the class left on the markup cannot fight the column. */
    .sticky-sidebar { position: static; }

    @media (max-width: 991.98px) {
        .iq-index-col { top: calc(var(--iq-sticky-top, 76px) + 8px); }

        .iq-index-toggle {
            margin-bottom: 8px;
            box-shadow: var(--ui-shadow-md);
        }

        .ScrollStyle { display: none; }
        .ScrollStyle.iq-open { display: block; }
    }

    .iq-index-head {
        margin: 0 0 10px;
        padding: 0 12px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--ui-blue-600);
    }

    .iq-index-sub {
        list-style: none;
        margin: 18px 0 10px;
        padding: 14px 12px 0;
        border-top: 1px solid var(--ui-grey-200);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--ui-blue-600);
    }

    /* Scoped to this list. The old rule was a bare `.nav { }`, which
       reached every Bootstrap .nav on the page, navbar included. */
    #navbarSettings {
        display: block;
        border: 0;
        margin: 0;
        padding: 0;
    }

    #navbarSettings .nav-item { display: block; }

    /* theme.min.css sets `.nav-link{white-space:nowrap}` and again, more
       specifically, `.nav-vertical.nav .nav-link{white-space:nowrap}`. Question
       text is long, so without an override every entry ran off the side of the
       panel and could only be reached by scrolling it sideways. The old markup
       fought this with an inline `white-space:normal!important` on every link;
       it belongs here instead.

       The link is a two-part flex row -- fixed-width number, then the text --
       so a question that wraps onto three lines keeps all three aligned under
       each other rather than tucking back under the number. */
    #navbarSettings .nav-link {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 9px 12px;
        border: 0;
        border-radius: var(--ui-radius-sm);
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.55;
        color: var(--ui-grey-600);
        white-space: normal;
        overflow-wrap: break-word;
        transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    #navbarSettings .nav-link:hover { background: var(--ui-blue-50); color: var(--ui-ink); }

    .iq-index-num {
        flex: none;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--ui-grey-400);
    }

    #navbarSettings .nav-link:hover .iq-index-num,
    #navbarSettings .nav-link.active .iq-index-num { color: var(--ui-blue-600); }

    #navbarSettings .nav-link.active {
        background: var(--ui-blue-50);
        color: var(--ui-blue-700);
        box-shadow: inset 3px 0 0 var(--ui-blue-600);
    }

    .sidebar-data1 {
        flex: 1 1 auto;
        min-width: 0;
        text-decoration: none;
        color: inherit;
    }

    /* ---------------------------------------------------------------
       ANSWERS  (col-lg-9)
    --------------------------------------------------------------- */
    .iq-body { padding: 28px clamp(16px, 3vw, 44px) 0; }

    @media (max-width: 991.98px) { .iq-body { padding-top: 20px; } }

    .iq-summary {
        max-width: 72ch;
        font-size: 16.5px;
        line-height: 1.75;
        color: var(--ui-grey-600);
    }

    .iq-summary p { margin: 0 0 14px; }
    .iq-summary p:last-child { margin-bottom: 0; }
    .iq-summary a { color: var(--ui-blue-600); }

    .iq-summary code {
        padding: 2px 6px;
        border-radius: 6px;
        background: var(--ui-grey-100);
        color: var(--ui-ink);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .88em;
    }

    .iq-body h2 {
        margin: 0 0 4px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--ui-grey-200);
        font-size: clamp(20px, 2.4vw, 27px);
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ui-ink);
        scroll-margin-top: calc(var(--ui-header-offset) + 12px);
    }

    /* scroll-margin-top is what stops a deep-linked question from landing
       underneath the fixed site header. */
    .section {
        padding: 20px 22px;
        background: var(--ui-bg);
        border: var(--ui-card-border);
        border-radius: var(--ui-radius-md);
        box-shadow: var(--ui-card-shadow);
        scroll-margin-top: calc(var(--ui-header-offset) + 12px);
        transition: box-shadow .2s ease, border-color .2s ease;
    }

    .section:hover { box-shadow: var(--ui-shadow-sm); }
    .section:target { border-color: var(--ui-blue-100); background: var(--ui-blue-50); }

    .section h3 {
        margin: 0 0 10px;
        font-size: clamp(16.5px, 1.8vw, 19px);
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: -.01em;
        color: var(--ui-ink);
    }

    /* Was <div class="iq-answer"> around every answer. */
    .iq-answer {
        max-width: 72ch;
        font-size: 15.5px;
        line-height: 1.78;
        color: #3E4B66;
    }

    .iq-answer > p:first-child { margin-top: 0; }
    .iq-answer p { margin: 0 0 14px; }
    .iq-answer p:last-child { margin-bottom: 0; }
    .iq-answer ul, .iq-answer ol { margin: 0 0 14px; padding-left: 22px; }
    .iq-answer li { margin-bottom: 7px; }
    .iq-answer li::marker { color: var(--ui-blue-500); }
    .iq-answer strong, .iq-answer b { color: var(--ui-ink); font-weight: 700; }
    .iq-answer a { color: var(--ui-blue-600); text-decoration: underline; }

    .iq-answer blockquote {
        margin: 0 0 14px;
        padding: 2px 0 2px 16px;
        border-left: 3px solid var(--ui-blue-100);
        color: var(--ui-grey-600);
    }

    .iq-answer table {
        width: 100%;
        margin: 0 0 14px;
        border-collapse: collapse;
        font-size: 14px;
    }

    .iq-answer th, .iq-answer td {
        padding: 8px 10px;
        border: 1px solid var(--ui-grey-200);
        text-align: left;
    }

    .iq-answer th { background: var(--ui-grey-100); font-weight: 700; color: var(--ui-ink); }

    .iq-answer code {
        padding: 2px 6px;
        border-radius: 6px;
        background: var(--ui-grey-100);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13.5px;
    }

    .iq-answer pre {
        margin: 0 0 14px;
        padding: 14px 16px;
        border-radius: var(--ui-radius-sm);
        background: var(--ui-grey-100);
        overflow-x: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13.5px;
        line-height: 1.6;
    }

    .iq-answer pre code { padding: 0; background: none; }
    .iq-answer img { border-radius: var(--ui-radius-sm); }

    /* ---------------------------------------------------------------
       JOBS BANNER + WORKSHOP PROMO
    --------------------------------------------------------------- */
    .iq-jobs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 26px clamp(20px, 3vw, 34px);
        border-radius: var(--ui-radius-lg);
        background: linear-gradient(135deg, var(--ui-blue-700) 0%, var(--ui-blue-500) 100%);
        box-shadow: var(--ui-shadow-md);
        color: #fff;
    }

    .iq-jobs-copy {
        font-size: clamp(18px, 2.2vw, 25px);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.3;
    }

    .iq-jobs-copy em { font-style: normal; color: #7CFFC0; }

    .iq-jobs-cta {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 22px;
        border-radius: 12px;
        background: #fff;
        color: var(--ui-blue-700);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .iq-jobs-cta:hover {
        color: var(--ui-blue-700);
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .55);
    }

    .iq-promo { display: block; }
    .iq-promo img { width: 100%; border-radius: var(--ui-radius-lg); box-shadow: var(--ui-card-shadow); }

    .img-1 { max-width: 100%; height: 200px; }

    /* SEO 2026-08-26: the question headings are now links to their own detail page.
       Styled to inherit, so the visual design is unchanged -- only the hover shows
       it is clickable. */
    .iq-qlink,
    .iq-qlink:hover,
    .iq-qlink:focus { color: inherit; text-decoration: none; }
    .iq-qlink:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* =====================================================================
       Q&A / MCQ TABS 2026-09-03

       A full-bleed tab strip sitting directly on the hero's bottom edge, not a
       pill floating in the gap below it. The first attempt was that pill, and
       it read as a stray control: it sat on the page background with nothing
       to anchor it, on a margin that matched neither the H1 above nor the
       columns below.

       The strip fixes both. It spans the viewport, so it reads as the divider
       between the page header and its content rather than as a widget inside
       either; its inner gutter is the hero's own clamp(), so the labels line up
       with the H1; and .navv--tabs drops the hero's bottom border so there is
       exactly one hairline under the tabs instead of two 52px apart.

       Underline rather than a filled pill for the same reason -- the active
       state marks a section of the page, and a solid blue lozenge here competes
       with the answer cards for attention.

       Only ONE pane is ever in the flow. Both the question index and the body
       are marked up with [data-iq-pane], and the script at the foot of the file
       toggles the `hidden` attribute across every one of them at once, so the
       index always lists whatever the reader is looking at.
    ===================================================================== */
    .navv--tabs { border-bottom: 0; }

    .iq-tabbar {
        padding: 0 clamp(16px, 4vw, 56px);
        background: var(--ui-bg);
        border-bottom: 1px solid var(--ui-grey-200);
        /* Two short labels never overflow on a desktop, but a long category name
           in a future third tab would; scroll rather than wrap or clip. */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .iq-tabbar::-webkit-scrollbar { display: none; }

    .iq-tabs { display: flex; gap: clamp(20px, 3vw, 34px); }

    .iq-tab {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 54px;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--ui-grey-600);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: color .16s ease;
    }

    /* The underline sits ON the bar's own hairline (bottom:-1px), so the active
       tab reads as a tab cut out of the divider rather than as a marker floating
       above it. */
    .iq-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: transparent;
        transition: background .16s ease;
    }

    .iq-tab:hover { color: var(--ui-ink); }
    .iq-tab:hover::after { background: var(--ui-grey-200); }

    .iq-tab[aria-selected="true"] { color: var(--ui-blue-600); }
    .iq-tab[aria-selected="true"]::after { background: var(--ui-blue-600); }

    /* Arrow keys move between tabs, so the focus ring has to be visible. */
    .iq-tab:focus-visible {
        outline: 2px solid var(--ui-blue-500);
        outline-offset: -4px;
        border-radius: 6px;
    }

    .iq-tab-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--ui-grey-100);
        color: var(--ui-grey-600);
        font-size: 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        transition: background .16s ease, color .16s ease;
    }

    .iq-tab[aria-selected="true"] .iq-tab-n {
        background: var(--ui-blue-50);
        color: var(--ui-blue-600);
    }

    @media (max-width: 575.98px) {
        .iq-tabbar { padding: 0 16px; }
        .iq-tab { min-height: 50px; font-size: 14.5px; }
    }

    /* The UA's [hidden]{display:none} loses to .nav{display:flex} on the index
       list, so the hidden pane has to be turned off explicitly. */
    #main_content [data-iq-pane][hidden] { display: none !important; }

    /* ---------------------------------------------------------------
       ONE MCQ  -- ported verbatim from interview-mcq.php (2026-08-26 UI),
       so a question looks and behaves identically on both pages. Rules
       that already exist above (.iq-qlink, .img-1, .dynamic-image) are
       not repeated.
    --------------------------------------------------------------- */
    .mcq-card {
        margin-top: 22px;
        padding: 22px 24px;
        background: var(--ui-bg);
        border: var(--ui-card-border);
        border-radius: var(--ui-radius-md);
        box-shadow: var(--ui-card-shadow);
        scroll-margin-top: calc(var(--ui-header-offset) + 12px);
        transition: box-shadow .2s ease;
    }

    .mcq-card:hover { box-shadow: var(--ui-shadow-sm); }

    /* 2026-09-08: each practice question was an <h5> sitting directly under the section's
       <h2>, skipping h3 and h4. Screen-reader users navigating by heading level got a
       broken outline. The tag is now <h3>; the selector keeps the old h5 rule so the
       rendered size is byte-identical to before. */
    .mcq-card h5,
    .mcq-card .mcq-qh {
        display: flex;
        gap: 10px;
        margin: 0 0 16px;
        font-size: clamp(16px, 1.8vw, 18px);
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: -.01em;
        color: var(--ui-ink);
    }

    .mcq-num { flex: none; font-variant-numeric: tabular-nums; color: var(--ui-blue-600); }

    .mcq-options { margin: 0 0 16px; display: grid; gap: 8px; }

    /* Each option is one big label-shaped hit area rather than a 15px radio
       with text beside it -- a hard target on a phone otherwise. */
    .mcq-opt { position: relative; }

    .mcq-opt label {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin: 0;
        padding: 12px 14px;
        min-height: 48px;
        border: 1.5px solid var(--ui-grey-200);
        border-radius: var(--ui-radius-sm);
        background: var(--ui-bg);
        font-size: 15px;
        line-height: 1.55;
        color: #3E4B66;
        cursor: pointer;
        transition: border-color .16s ease, background .16s ease;
    }

    .mcq-opt label:hover { border-color: var(--ui-blue-500); background: var(--ui-blue-50); }

    .mcq-opt input[type="radio"] {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        accent-color: var(--ui-blue-600);
        cursor: pointer;
    }

    .mcq-opt input[type="radio"]:checked + span { color: var(--ui-ink); font-weight: 600; }
    .mcq-opt input[type="radio"]:disabled { cursor: default; }
    .mcq-opt input[type="radio"]:disabled + span { cursor: default; }
    .mcq-opt:has(input:disabled) label { cursor: default; }
    .mcq-opt:has(input:disabled) label:hover { border-color: var(--ui-grey-200); background: var(--ui-bg); }

    /* Verdict colours carry a matching border as well as a wash, so the result
       reads for someone who cannot separate the two hues. */
    .mcqclassgreen label,
    .mcq-opt.mcqclassgreen label {
        border-color: var(--ui-green);
        background: var(--ui-green-50);
        color: #0B6E48;
        font-weight: 600;
    }

    .mcqclassred label,
    .mcq-opt.mcqclassred label {
        border-color: #E0544E;
        background: #FDECEB;
        color: #A32A24;
        font-weight: 600;
    }

    .mcq-check {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 20px;
        border: 0;
        border-radius: 11px;
        background: var(--ui-blue-600);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: background .18s ease, opacity .18s ease;
    }

    .mcq-check:hover:not(:disabled) { background: var(--ui-blue-700); }
    .mcq-check:disabled { background: var(--ui-grey-200); color: var(--ui-grey-400); cursor: not-allowed; }

    .answer-block { display: none; }

    .mcq-solution {
        margin-top: 14px;
        padding: 16px 18px;
        border: 1px solid var(--ui-grey-200);
        border-left: 3px solid var(--ui-blue-500);
        border-radius: var(--ui-radius-sm);
        background: var(--ui-bg-soft);
    }

    .mcq-verdict {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .mcq-explain {
        margin: 0;
        max-width: 72ch;
        font-size: 15px;
        line-height: 1.7;
        color: #3E4B66;
    }

    .mcq-explain:empty { display: none; }

    @media screen and (max-width: 620px) {
        .dynamic-image { width: 100%; height: 100%; }
        .section { padding: 18px 16px; }
        .iq-jobs { padding: 22px 20px; }
        .iq-jobs-cta { width: 100%; justify-content: center; }
        .mcq-card { padding: 18px 16px; }
        .mcq-check { width: 100%; justify-content: center; }
    }