/* Reading V1 on the Listening V1 shell. Loaded only for Reading exams; every rule is scoped to #cp-exam[data-skill=reading]
   (the answer list is scoped to .rd-choice-popup, a class only Reading adds), so Listening pages are unaffected.
   Layout: >=1024px two columns with independent scrolling (passage left, questions right); narrower screens stack the two areas
   in normal page flow. Questions follow the official CELPIP look: instruction with an info icon in bold blue, a thin-bordered box,
   "N. prompt [answer]" lines and inline blanks; a chosen answer is the option text in bold dark green with a light underline. */
#cp-exam[data-skill=reading]{--rd-text:#24343d;--rd-ink:#3d4549;--rd-muted:#4f6470;--rd-accent:#185f91;--rd-blue:#1b4f84;--rd-blue-soft:#4d89b5;--rd-green:#0d5132;--rd-line:#c9d7de;--rd-right:#eef7f7;--rd-left:#fff;--rd-box:#2f3a40;--rd-font:16px;--rd-gap:22px}
/* clip, not just hidden: the stage itself never scrolls (a focused blank near the bottom edge scrolls only its own column, so the
   page does not jump and the answer list stays attached to its blank) */
#cp-exam[data-skill=reading][data-renderer=reading_page] .cp-stage{overflow:hidden;overflow:clip}
/* the two columns fill exactly the stage (the shell sizes it between header and footer); a viewport-based height left the bottom
   of both columns hidden behind the footer on tall screens and a gap on short ones */
#cp-exam[data-skill=reading] .rd-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;height:100%;min-height:0;box-sizing:border-box;border:1px solid var(--rd-line);background:var(--rd-left)}
#cp-exam[data-skill=reading] .rd-left,#cp-exam[data-skill=reading] .rd-right{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:var(--rd-gap);font-size:var(--rd-font);line-height:1.7;color:var(--rd-text);box-sizing:border-box}
#cp-exam[data-skill=reading] .rd-left{background:var(--rd-left);border-right:1px solid var(--rd-line)}
#cp-exam[data-skill=reading] .rd-right{background:var(--rd-right)}
#cp-exam[data-skill=reading] .rd-left:focus-visible,#cp-exam[data-skill=reading] .rd-right:focus-visible{outline:2px solid var(--rd-accent);outline-offset:-2px}
#cp-exam[data-skill=reading] .rd-title{font-size:18px;line-height:1.4;color:var(--rd-accent);margin:0 0 16px}
#cp-exam[data-skill=reading] .rd-heading{font-size:16px;color:var(--rd-muted);margin:18px 0 8px}
#cp-exam[data-skill=reading] .rd-passage p{margin:0 0 14px}
#cp-exam[data-skill=reading] .rd-para{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:6px;margin:0 0 14px}
#cp-exam[data-skill=reading] .rd-para-label{font-weight:700;color:var(--rd-accent)}
#cp-exam[data-skill=reading] .rd-para p{margin:0}
#cp-exam[data-skill=reading] .rd-diagram{margin:18px 0 0;max-width:100%;overflow-x:auto}
#cp-exam[data-skill=reading] .rd-diagram-title{font-size:16px;color:var(--rd-accent);margin:0 0 10px}
#cp-exam[data-skill=reading] .rd-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
#cp-exam[data-skill=reading] .rd-table th,#cp-exam[data-skill=reading] .rd-table td{border:1px solid var(--rd-line);padding:7px 9px;text-align:left;vertical-align:top}
#cp-exam[data-skill=reading] .rd-table thead th{background:#e3eef3;color:var(--rd-text)}
#cp-exam[data-skill=reading] .rd-table tbody th{font-weight:600}
#cp-exam[data-skill=reading] .rd-notes{margin:10px 0 0;padding-left:20px;font-size:14px;color:var(--rd-muted)}
#cp-exam[data-skill=reading] .rd-diagram-image{display:block;max-width:100%;height:auto;margin:14px 0 0}
/* Part 2 with a chart image (9:16, e.g. 1080x1920): the image alone, flush with the top and both sides of the left column, full
   column width, natural height (no max-height, no crop / object-fit, no thumbnail); the column's own scrollbar shows the rest */
#cp-exam[data-skill=reading] .rd-left.rd-left-diagram{padding:0}
#cp-exam[data-skill=reading] .rd-left-diagram .rd-diagram-full{display:block;width:100%;height:auto;max-width:none;max-height:none;margin:0;object-fit:fill}
/* image failure on a reading page: the shared error box (Retry images) is added after the two columns, where the fixed-height stage
   would hide it; on a reading page it is laid over the top of the left (reading) column, so the reader sees why answering waits */
#cp-exam[data-skill=reading][data-renderer=reading_page] #cp-stage-body{position:relative}
#cp-exam[data-skill=reading][data-renderer=reading_page] .cp-asset-error{position:absolute;top:12px;left:12px;width:calc(50% - 40px);box-sizing:border-box;bottom:auto;z-index:5;box-shadow:0 4px 14px rgba(20,40,50,.18)}
/* question groups: small group label, official instruction line, bordered box. Prefixed with .rd-page so they win over the shared
   exam.css / exam-ui.css rules for .cp-reading-page .cp-copy p (still Reading only). */
#cp-exam[data-skill=reading] .rd-page .rd-group{position:relative;margin:0 0 30px}
/* the group heading ("Questions 1 to 6") is not shown, as on the official screens, but stays in the page for screen readers and
   names its group (aria-labelledby) */
#cp-exam[data-skill=reading] .rd-page .rd-group h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#cp-exam[data-skill=reading] .rd-page .rd-group-intro{position:relative;margin:0 0 16px;padding-left:34px;font-size:18px;line-height:1.36;font-weight:700;color:var(--rd-blue)}
/* display-only emphasis added by renderReadingV1(): "best" in light blue, and the (▾) hint after "drop-down menu" */
#cp-exam[data-skill=reading] .rd-page .rd-group-intro .rd-best{color:var(--rd-blue-soft)}
#cp-exam[data-skill=reading] .rd-page .rd-group-intro .rd-menu-hint>span{display:inline-block;font-size:.8em;vertical-align:.1em;padding:0 .3em}
#cp-exam[data-skill=reading] .rd-page .rd-group-intro::before{content:"i";position:absolute;left:0;top:.08em;width:22px;height:22px;border-radius:50%;background:#5b7fa6;color:#fff;font:700 15px/22px Georgia,"Times New Roman",serif;text-align:center}
#cp-exam[data-skill=reading] .rd-page .rd-box,#cp-exam[data-skill=reading] .rd-page .rd-cloze{border:1px solid var(--rd-box);border-radius:4px;padding:12px 16px;color:var(--rd-ink);font-size:16px;line-height:1.5;background:transparent;overflow-wrap:break-word}
#cp-exam[data-skill=reading] .rd-page .rd-questions{list-style:none;margin:0}
#cp-exam[data-skill=reading] .rd-page .rd-question{display:block;margin:0 0 12px}
#cp-exam[data-skill=reading] .rd-page .rd-question:last-child{margin-bottom:0}
#cp-exam[data-skill=reading] .rd-page .rd-q-num,#cp-exam[data-skill=reading] .rd-page .rd-num{font-weight:400;color:var(--rd-ink)}
#cp-exam[data-skill=reading] .rd-page .rd-cloze p{margin:0 0 10px}
#cp-exam[data-skill=reading] .rd-page .rd-cloze p:last-child{margin-bottom:0}
/* answer picker: an inline element, so a chosen answer wraps with the sentence like the surrounding words */
#cp-exam[data-skill=reading] .rd-page .rd-pick{display:inline;min-width:0;min-height:0;margin:0;padding:0;gap:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;cursor:pointer;white-space:normal;outline:none}
#cp-exam[data-skill=reading] .rd-page .rd-pick>.lv1-choice-value{color:var(--rd-green);font-size:1em;font-weight:700;margin:0;padding:0 1px 1px;border-bottom:1px solid #c3cfd2;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#cp-exam[data-skill=reading] .rd-page .rd-pick>.rd-caret{display:none}
#cp-exam[data-skill=reading] .rd-page .rd-pick:hover>.lv1-choice-value,#cp-exam[data-skill=reading] .rd-page .rd-pick[aria-expanded=true]>.lv1-choice-value{background:#dff1f4;border-bottom-color:var(--rd-blue-soft)}
#cp-exam[data-skill=reading] .rd-page .rd-pick:focus-visible>.lv1-choice-value{outline:2px solid var(--rd-accent);outline-offset:2px}
/* not answered yet: a compact white box with the ▾ marker, sitting on the text line */
#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty){display:inline-flex;align-items:center;justify-content:flex-end;width:7.4em;height:1.95em;padding:0 7px;box-sizing:border-box;vertical-align:middle;background:#fff;border:1px solid #e1e8ea}
#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty)>.lv1-choice-value{display:none}
#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty)>.rd-caret{display:inline;margin:0;color:#0b3a8c;font-size:16px;line-height:1}
#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty):hover,#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty)[aria-expanded=true]{background:#dff1f4;border-color:var(--rd-blue-soft)}
#cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty):focus-visible{outline:2px solid var(--rd-accent);outline-offset:1px}
/* an unanswered blank never leaves its number at the end of the previous line ("7. [  ▾]" stays together); an answer wraps freely */
#cp-exam[data-skill=reading] .rd-page .rd-blank:has(.lv1-choice-value:empty){white-space:nowrap}
/* the answer list opened from a Reading blank (appended to <body>, so scoped by its own class) */
.lv1-choice-popup.rd-choice-popup{max-width:min(560px,calc(100vw - 20px));max-height:min(320px,calc(100vh - 40px));padding:8px 12px;border:1px solid #9fb3bd;border-radius:6px;box-shadow:0 6px 20px rgba(20,40,50,.18);color:#24343d;font:16px/1.45 "Segoe UI",Arial,Helvetica,sans-serif}
.lv1-choice-popup.rd-choice-popup label{padding:8px 4px;align-items:flex-start;border-bottom:1px solid #e3eaec}
.lv1-choice-popup.rd-choice-popup label:last-child{border-bottom:0}
.lv1-choice-popup.rd-choice-popup input{margin-top:6px}
.lv1-choice-popup.rd-choice-popup label:has(input:checked){background:#d7eff2}
@media (max-width:1023.98px){
 #cp-exam[data-skill=reading][data-renderer=reading_page] .cp-stage{overflow:visible}
 #cp-exam[data-skill=reading] .rd-page{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
 #cp-exam[data-skill=reading] .rd-left,#cp-exam[data-skill=reading] .rd-right{height:auto;overflow:visible;padding:16px}
 #cp-exam[data-skill=reading] .rd-left{border-right:0;border-bottom:1px solid var(--rd-line)}
 #cp-exam[data-skill=reading][data-renderer=reading_page] .cp-asset-error{top:8px;left:8px;right:8px;width:auto}
 #cp-exam[data-skill=reading] .rd-table{font-size:14px}
 #cp-exam[data-skill=reading] .rd-page .rd-group-intro{font-size:19px;padding-left:30px}
 #cp-exam[data-skill=reading] .rd-page .rd-box,#cp-exam[data-skill=reading] .rd-page .rd-cloze{padding:14px 14px;font-size:16px;line-height:1.95}
 #cp-exam[data-skill=reading] .rd-page .rd-pick:has(>.lv1-choice-value:empty){width:6.2em}
 #cp-exam[data-skill=reading] .rd-page .rd-question{margin-bottom:18px}
}
/* Reading V1: underline-style unanswered dropdown */
#cp-exam[data-skill=reading] .rd-page
.rd-pick:has(>.lv1-choice-value:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 7.4em;
    height: 1.8em;
    padding: 0 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #708e9e;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
}
/* Keep the dropdown arrow */
#cp-exam[data-skill=reading] .rd-page
.rd-pick:has(>.lv1-choice-value:empty) > .rd-caret {
    display: inline;
    color: #0b3a8c;
    font-size: 16px;
}
/* Hover / expanded state */
#cp-exam[data-skill=reading] .rd-page
.rd-pick:has(>.lv1-choice-value:empty):hover,
#cp-exam[data-skill=reading] .rd-page
.rd-pick:has(>.lv1-choice-value:empty)[aria-expanded=true] {
    background: rgba(77,137,181,0.08);
    border: none;
    border-bottom: 2px solid #185f91;
    border-radius: 0;
}
/* Selected answers retain existing green underlined style */
/* Passage translation (Chinese practice pages, Parts 1/3/4): the Chinese paragraph right under its English paragraph. */
#cp-exam[data-skill=reading] .rd-passage p:has(+ .rd-zh){margin-bottom:4px}
#cp-exam[data-skill=reading] .rd-passage .rd-zh{margin:0 0 16px;font-size:.92em;line-height:1.6;color:#5f6b76;overflow-wrap:anywhere}
#cp-exam[data-skill=reading] .rd-para .rd-zh{grid-column:2;margin:0}
#cp-exam[data-skill=reading] .rd-para:has(.rd-zh){row-gap:4px}
#rd-review {display:none;}