/* Student reading course overview. Shared navigation and practice pages are unchanged. */
:root { --list-accent:#5b50ff; --list-ink:#21212c; --list-muted:#737380; --list-border:#d7d7df; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--list-ink); font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
.reading-course-layout { display:grid; grid-template-columns:clamp(280px,22vw,410px) minmax(0,1fr); max-width:none; margin:0 auto; min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px); }
.reading-grade-sidebar { padding:30px 30px 48px; border-right:1px solid var(--list-border); }
.reading-grade-sidebar h1 { margin:0 12px 8px; font-size:20px; line-height:1.3; }
.reading-grade-sidebar > p { margin:0 12px 28px; font-size:14px; color:var(--list-muted); }
/* Grade choices use a custom listbox; no native select menu. */
.reading-grade-dropdown { position:relative; width:100%; max-width:300px; }
.grade-dropdown-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 16px; border:1px solid var(--list-border); border-radius:9px; background:#fff; color:var(--list-ink); font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.grade-dropdown-swatch { width:26px; height:26px; flex:none; background:#58a777; }
.grade-dropdown-label { flex:1; }
.grade-dropdown-chevron { width:18px; height:18px; flex:none; fill:none; stroke:#737380; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.grade-dropdown-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:100; width:100%; padding:4px; overflow-y:auto; border:1px solid var(--list-border); border-radius:9px; background:#fff; box-shadow:0 4px 14px rgba(33,33,44,.12); }
.grade-dropdown-menu[hidden] { display:none; }
.grade-dropdown-option { display:flex; align-items:center; gap:10px; width:100%; height:46px; padding:0 14px; border:0; border-radius:5px; background:#fff; color:var(--list-ink); font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.grade-dropdown-option:hover { background:#f4f6fb; }
.grade-dropdown-option[aria-selected="true"] { background:#ecefff; color:var(--list-accent); }
.grade-dropdown-check { display:grid; place-items:center; width:16px; height:16px; flex:none; }
.grade-dropdown-check svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.5; }
.reading-course-main { min-width:0; margin:0 clamp(24px,4vw,80px); padding:30px 40px 64px; border-left:1px solid var(--list-border); border-right:1px solid var(--list-border); }
.progress-bar-wrap { display:grid; grid-template-columns:max-content max-content minmax(0,1fr) 28px; align-items:center; gap:4px 12px; padding:0 0 22px; margin-bottom:0; }
.progress-heading { grid-column:1; grid-row:1; margin:0; font-size:20px; line-height:1.4; font-weight:600; }
.progress-text { grid-column:1 / 3; grid-row:2; font-size:15px; color:#555561; }
.progress-text strong { font-weight:500; }
.progress-pct { grid-column:2; grid-row:1; justify-self:start; padding:3px 8px; border:1px solid #c8ceff; border-radius:7px; background:#ecefff; color:var(--list-accent); font-size:14px; line-height:1.4; }
.progress-track { grid-column:3; grid-row:1 / 3; justify-self:end; width:min(100%,400px); height:12px; border:1px solid #918aff; background:#ecefff; border-radius:8px; overflow:hidden; }
.progress-fill { height:100%; background:var(--list-accent); transition:width .2s ease; }
.filter-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 0 14px; margin-bottom:8px; border-bottom:1px solid #e8e8ee; }
.reading-type-switch { display:flex; gap:18px; font-size:15px; }
.reading-type-switch span { color:var(--list-accent); font-weight:600; }
.reading-type-switch a { color:#555561; text-decoration:none; }
.reading-filter-selects { display:flex; flex-wrap:wrap; gap:12px 16px; }
.reading-filter-selects label { display:flex; align-items:center; gap:8px; font-size:14px; color:#62626d; }
.reading-filter-selects select { min-width:76px; max-width:180px; padding:7px 26px 7px 9px; border:1px solid var(--list-border); border-radius:5px; background:#fff; color:var(--list-ink); font:inherit; }
.reading-topic-list { display:block; }
.reading-topic-section { display:block; height:auto; min-height:0; margin:0; padding:20px 0 28px; border:0; }
.reading-topic-section h2 { margin:0 0 18px; font-size:16px; line-height:1.5; font-weight:400; color:#555561; overflow-wrap:anywhere; }
.topic-summary { display:none; }
.reading-node-row { display:grid; grid-template-columns:repeat(auto-fill,44px); row-gap:14px; max-width:100%; padding:0; }
.reading-node-slot { position:relative; width:44px; display:flex; justify-content:flex-start; }
.reading-node-slot::after { content:""; position:absolute; left:30px; right:0; top:14.5px; height:1px; background:#c2c2ca; pointer-events:none; }
.reading-node-slot:last-child::after { display:none; }
.reading-node { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; padding:6px; border:1px solid #bcbcc4; border-radius:50%; background:#d0d0d5; color:#55555f; box-shadow:0 2px 0 #93939c; cursor:pointer; transition:none; animation:none; }
.reading-node svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reading-node.in-progress { background:#ecefff; border:2px solid var(--list-accent); color:var(--list-accent); padding:5px; }
.reading-node.done { background:#bde8c2; border-color:#93cfa0; color:#28673a; }
.reading-node .course-not-started-pencil { stroke:none; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:2px solid var(--list-accent); outline-offset:3px; }
.reading-node-popover { position:fixed; z-index:99920; min-width:min(220px,calc(100vw - 24px)); width:max-content; max-width:min(380px,calc(100vw - 24px)); border:1px solid #ceced7; border-radius:8px; background:#fff; box-shadow:0 3px 10px rgba(33,33,44,.16); color:var(--list-ink); }
.reading-node-popover::after { content:""; position:absolute; left:var(--arrow-x); width:18px; height:18px; background:#fff; transform:translateX(-50%) rotate(45deg); }
.reading-node-popover[data-side="above"]::after { bottom:-10px; border-right:1px solid #ceced7; border-bottom:1px solid #ceced7; }
.reading-node-popover[data-side="below"]::after { top:-10px; border-left:1px solid #ceced7; border-top:1px solid #ceced7; }
.node-popover-content { padding:0; max-height:inherit; overflow-y:auto; border-radius:inherit; }
.node-popover-details { position:relative; padding:20px 24px 24px; }
.node-popover-close { position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; padding:0; border:0; background:#fff; border-radius:4px; color:#656570; font-size:25px; cursor:pointer; }
.node-popover-type { margin:0 28px 8px 0; font-size:14px; font-weight:600; color:#62626d; }
.node-popover-content h3 { margin:0 0 8px; font-size:22px; line-height:1.3; font-weight:600; overflow-wrap:anywhere; }
.node-popover-subtitle { margin:0 0 14px; color:var(--list-muted); font-size:15px; }
.node-popover-meta { margin:12px 0 8px; color:var(--list-muted); font-size:14px; }
.node-popover-status { margin:0 0 24px; font-size:15px; color:var(--list-muted); }
.node-popover-status.in-progress { color:var(--list-accent); }
.node-popover-status.done { color:#287342; }
.node-popover-start { display:flex; align-items:center; justify-content:center; width:140px; min-width:140px; height:46px; margin:0 auto; padding:0 12px; border:1px solid #c8ceff; border-radius:9px; background:#ecefff; color:var(--list-accent); font-size:16px; line-height:1.3; font-weight:600; text-decoration:none; box-shadow:0 4px 0 #c8ceff; }
.node-popover-start:hover { background:#e2e7ff; }
.node-popover-cover { display:block; width:100%; max-width:100%; height:130px; contain:inline-size; margin:0; object-fit:cover; border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.node-popover-locked { margin:20px 0 0; color:var(--list-muted); font-size:14px; }
.mobile-grade-control { display:none; }
.empty-state { padding:40px 0; color:var(--list-muted); text-align:center; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:10px 20px; border-radius:8px; background:#21212c; color:#fff; opacity:0; pointer-events:none; z-index:999; }
#toast.show { opacity:1; }
@media(max-width:1000px) { .reading-course-layout { grid-template-columns:250px minmax(0,1fr); } .reading-course-main { margin:0 24px; padding:28px 24px 48px; } }
@media(max-width:720px) { .reading-course-layout { display:block; } .reading-grade-sidebar { display:none; } .reading-course-main { margin:0; padding:24px 20px 48px; border:0; } .mobile-grade-control { display:flex; margin-bottom:28px; font-size:15px; } .progress-heading { font-size:20px; } .progress-track { grid-column:1 / -1; grid-row:3; width:100%; height:6px; margin-top:6px; } .progress-pct { font-size:14px; } .reading-filter-selects { gap:10px; } .reading-filter-selects select { max-width:140px; } .reading-topic-section h2 { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .progress-fill { transition:none; } }

/* Course header and unit controls, matching the provided reference structure. */
.reading-continue-banner { display:flex; align-items:flex-start; min-height:104px; margin:-30px -40px 28px; padding:24px 40px; border-bottom:1px solid var(--list-border); background:#ecefff; }
.reading-continue-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border-radius:8px; background:var(--list-accent); color:#fff; font-size:17px; font-weight:600; text-decoration:none; cursor:pointer; }
.reading-continue-button:hover { background:#4b40e5; }
.reading-continue-button.is-disabled { opacity:.5; cursor:default; pointer-events:none; }
.progress-collapse { grid-column:4; grid-row:1 / 3; display:grid; place-items:center; width:28px; height:36px; padding:4px; border:0; background:transparent; color:#555561; cursor:pointer; }
.progress-collapse svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.progress-collapse[aria-expanded="false"] svg { transform:rotate(180deg); }
#readingCourseContent[hidden] { display:none !important; }
.reading-quiz-marker { cursor:default; }
.reading-quiz-marker svg { fill:currentColor; stroke:none; }
.reading-quiz-marker:hover { outline:none; }
@media(max-width:1000px) { .reading-continue-banner { margin:-28px -24px 26px; padding:24px; } }
@media(max-width:720px) { .reading-continue-banner { margin:-24px -20px 24px; padding:20px; min-height:88px; } .progress-bar-wrap { grid-template-columns:max-content max-content minmax(0,1fr) 28px; } .progress-track { grid-column:1 / -1; grid-row:3; } }

/* Unified task filters: reading/cloze are selected by task type. */
.reading-filter-selects { width:100%; justify-content:flex-end; }
@media(max-width:720px) { .reading-filter-selects { justify-content:flex-start; } }