.reading-area { font-family:EveryWayNunito,system-ui,sans-serif; color:#103363; font-weight:600; -webkit-font-smoothing:antialiased; }
.reading-area ::selection { background:#c5e3ff; color:#103363; }
.reading-area :focus-visible { outline:3px solid #76590b; outline-offset:4px; }
.reading-area .site-header { min-height:77px; padding:4px 34px 4px 42px; border-bottom:1px solid #bfddf6; }
.reading-area .wordmark { width:120px; flex-basis:120px; }
.reading-area .wordmark img { height:68px; object-fit:contain; }
.reading-area .utility-nav { margin-left:auto; }
.reading-area .catalog h1, .reading-heading h1 { font-size:clamp(29px,3vw,44px); font-weight:900; letter-spacing:0; line-height:1.2; }
.reading-area .intro { font-size:22px; margin:20px 0 28px; color:#103363; }
.reading-page { max-width:1240px; padding:28px 32px 40px; }
.reading-heading { margin:10px 0 24px; }
.reading-heading p { font-size:20px; margin:10px 0 0; }
.reading-modes { display:flex; gap:8px; padding:5px; margin-bottom:24px; width:fit-content; border:1px solid #bfddf6; border-radius:14px; background:#edf6ff; }
.reading-area button { font-weight:800; color:#103363; border-color:#bfddf6; border-radius:12px; }
.reading-modes button { min-height:48px; background:transparent; border:0; }
.reading-modes [aria-pressed=true] { background:#0562e9; color:white; }
.reading-workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.9fr); gap:32px; align-items:start; }
.story-text { margin:0; background:white; border:1px solid #bfddf6; border-radius:20px; overflow:hidden; }
.story-body { padding:24px 28px; }
.story-body h2 { font-size:24px; margin:0 0 16px; }
.story-lines { display:grid; gap:12px; }
.story-lines p { margin:0; padding:4px 8px; font-size:22px; line-height:1.6; border-radius:8px; }
.story-lines .clue { background:#e2efff; outline:2px solid #0562e9; }
.reading-audio { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.reading-audio button { display:inline-flex; gap:8px; align-items:center; padding:10px 14px; }
.reading-audio img { width:22px; height:22px; }
.reading-audio .audio-status { flex-basis:100%; margin:0; font-size:16px; color:#3c5d7c; }
.reading-question { padding:8px 0; }
.question-position { margin:0 0 18px; color:#3c5d7c; font-size:17px; font-variant-numeric:tabular-nums; }
.reading-question h2 { font-size:clamp(24px,2.3vw,31px); line-height:1.3; margin:0 0 12px; }
.question-hint { margin:0 0 20px; font-size:18px; }
.reading-answers { display:grid; gap:12px; }
.reading-answers button { text-align:left; font-size:21px; min-height:64px; padding:14px 20px; background:white; }
.reading-answers button:hover { background:#edf6ff; border-color:#0562e9; }
.reading-answers .is-correct { background:#0562e9; color:white; border-color:#0562e9; }
.reading-answers .is-correct:hover { background:#0455ca; }
.reading-answers .is-retry { border-color:#8b4c24; }
.answer-mark { display:block; font-size:15px; margin-top:4px; }
.reading-feedback { font-size:19px; min-height:64px; margin:22px 0 18px; line-height:1.5; }
.reading-controls { display:flex; flex-wrap:wrap; gap:10px; }
.reading-controls .primary { color:white; background:#0562e9; border-color:#0562e9; }
.reading-controls .primary:hover { background:#0455ca; }
.reading-complete { border-top:1px solid #bfddf6; margin-top:20px; padding-top:24px; }
.reading-complete h2 { font-size:28px; }
.reading-complete a { display:block; margin-top:20px; color:#0562e9; font-size:20px; }
.reading-bottom { margin-top:28px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; align-items:center; border-top:1px solid #bfddf6; }
.reading-bottom a { color:#0562e9; font-size:18px; }
.reading-bottom .catalog-finish { margin:0; }
.reading-finish { font-family:EveryWayNunito,system-ui,sans-serif; text-align:center; width:min(520px,calc(100vw - 32px)); padding:32px; border:2px solid #bfddf6; border-radius:26px; background:#f8fcff; color:#103363; }
.reading-finish::backdrop { background:#18395466; }
.reading-finish h2 { font-size:30px; }
.reading-finish p { font-size:20px; }
.reading-finish a, .reading-finish button { display:block; width:100%; margin-top:16px; }
.reading-finish a { padding:12px; color:white; background:#0562e9; border-radius:12px; text-decoration:none; font-size:20px; }
.reading-area [hidden] { display:none!important; }
@media(max-width:900px) { .reading-workspace { gap:24px; grid-template-columns:minmax(0,1fr) minmax(280px,1fr); } .story-body { padding:20px; } .story-lines p { font-size:20px; } }
@media(max-width:640px) { .reading-area .site-header { padding:4px 12px; gap:8px; } .reading-area .wordmark { width:78px; flex-basis:78px; } .reading-area .wordmark img { height:62px; } .reading-page, .reading-area .catalog { padding:22px 16px; } .reading-workspace { grid-template-columns:1fr; gap:24px; } .reading-area .intro { font-size:19px; } .reading-heading { margin-bottom:20px; } .reading-heading p { font-size:18px; } .reading-modes { width:100%; } .reading-modes button { flex:1; padding:10px; font-size:16px; } .story-body { padding:20px 16px; } .story-lines p { font-size:20px; } .reading-question { padding:0; } .reading-bottom { flex-wrap:wrap; } .reading-controls button { flex:1; } }
/* Reading uses Living Skills' control shapes, colors, and interaction states. */
.reading-area button, .reading-link-button { min-height:48px; border:1.5px solid #bfddf6; border-radius:14px; background:#f6fbff; font-family:inherit; font-weight:850; }
.reading-area button:hover, .reading-link-button:hover { filter:brightness(.96); }
.reading-area button:active { transform:translateY(1px); }
.reading-area button:disabled { opacity:.55; cursor:default; }
.reading-area button img { width:28px; height:28px; filter:invert(28%) sepia(99%) saturate(3234%) hue-rotate(211deg) brightness(94%) contrast(113%); }
.reading-area .primary { background:#0562e9; border-color:#0562e9; color:white; }
.reading-modes { border:1.5px solid #bfddf6; border-radius:26px; padding:0; gap:0; background:transparent; width:min(490px,100%); }
.reading-modes button { flex:1; border:0; border-radius:26px; padding:6px 20px; font-size:20px; background:transparent; }
.reading-modes [aria-pressed=true] { background:#0057e7; color:white; }
.reading-answers button { background:#e9f5ff; border-radius:15px; min-height:74px; font-weight:950; }
.reading-answers .is-correct { background:#dceeff; border:2px solid #0055d4; color:#103363; }
.reading-answers .is-correct:hover { background:#dceeff; }
.reader-layout { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:32px; align-items:start; }
.reading-library { padding:24px; border:1.5px solid #bfddf6; border-radius:20px; background:#eaf6ff; }
.reading-library label { display:block; font-size:20px; font-weight:900; margin-bottom:8px; }
.reading-library input, .reading-library select, .reading-library textarea { width:100%; min-height:48px; font:inherit; color:#103363; background:white; border:1.5px solid #bfddf6; border-radius:14px; padding:12px; box-sizing:border-box; }
.reading-library select { font-size:18px; }
.reading-library input[type=file] { font-size:15px; }
.reading-library textarea { resize:vertical; line-height:1.5; }
.reading-library form { display:grid; gap:10px; margin-top:20px; }
.reading-library form label { margin:8px 0 0; }
.reading-library summary { cursor:pointer; color:#0562e9; font-size:20px; font-weight:900; padding:12px 0; }
.reader-note { font-size:16px; line-height:1.5; }
.reader-layout .story-lines p { white-space:pre-wrap; overflow-wrap:anywhere; }
.reader-layout h2 { overflow-wrap:anywhere; }
.reading-link-button { display:inline-flex; align-items:center; text-decoration:none; color:#0562e9; padding:10px 16px; }
@media(max-width:740px) { .reader-layout { grid-template-columns:1fr; gap:20px; } .reading-library { padding:20px; } }
@media(max-width:640px) { .reading-modes button { font-size:17px; padding:10px; } }
.reading-controls button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.reading-area .catalog-finish { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.reading-bottom { align-items:center; }
.reading-bottom > a { display:inline-flex; align-items:center; min-height:48px; margin:0; }
.selection-tools { border-top:1px solid #bfddf6; margin-top:20px; padding-top:12px; }
.selection-exercise { margin-top:24px; padding:20px 0 0; border-top:1px solid #bfddf6; }
.selection-exercise h3 { margin-top:0; font-size:22px; }
#exercise-prompt { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; font-size:20px; }
.selection-exercise form { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0; }
.selection-exercise label { flex-basis:100%; font-weight:850; }
.selection-exercise input { min-width:0; width:160px; min-height:48px; border:1.5px solid #bfddf6; border-radius:14px; padding:10px; font:inherit; }
.story-lines .selected-word, .story-lines ::selection { background:#ffdf91; color:#103363; }
.story-lines .spoken-word { background:#c6e1ff; color:#103363; box-shadow:inset 0 -3px #0562e9; outline:2px solid #0562e9; outline-offset:1px; border-radius:2px; }
.story-lines .spoken-word.selected-word { background:linear-gradient(#c6e1ff 60%,#ffdf91 60%); }
#reading-progress { width:100%; height:12px; accent-color:#0562e9; }
.word-list { margin-top:24px; padding-top:20px; border-top:1px solid #bfddf6; }
.word-list h2 { font-size:23px; margin:0 0 12px; }
.word-list form { margin-top:16px; }
#saved-words { list-style:none; padding:0; }
#saved-words li { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
#saved-words li button { min-height:44px; }
#practice-selection[aria-expanded=true] { background:#0562e9; color:white; border-color:#0562e9; }
#saved-words li { flex-wrap:nowrap; align-items:center; }
#saved-words .saved-word { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; flex:1; padding:6px 10px; text-align:left; overflow-wrap:anywhere; }
.saved-word img { opacity:0; flex:none; }
.saved-word:hover img, .saved-word:focus-visible img, .saved-word[aria-pressed=true] img { opacity:1; }
#saved-words .saved-word[aria-pressed=true] { background:#ffdf91; border-color:#b78013; }
.saved-word { cursor:url('/icons/volume-2.svg') 12 12, pointer; }

#saved-words .word-icon { width:44px; flex:none; padding:8px; }
#saved-words .word-icon img { width:20px; height:20px; }
#saved-words .spelling-entry { min-width:0; width:0; flex:1; background:#fff; min-height:44px; padding:6px 10px; }
#saved-words [hidden] { display:none; }
#saved-words .spelling-entry[aria-invalid=true] { border-color:#a73d25; }

#saved-words .spelling-entry::placeholder { color:#8194ab; opacity:1; }

#saved-words .spelling-field { position:relative; flex:1; min-width:0; background:white; border-radius:14px; }
#saved-words .spelling-reference { position:absolute; inset:0; display:flex; align-items:center; padding:6px 10px; color:#b7c4d3; pointer-events:none; overflow:hidden; white-space:nowrap; }
#saved-words .spelling-field .spelling-entry { position:relative; width:100%; background:transparent; box-sizing:border-box; }

#material-actions { margin-top:12px; gap:10px; flex-wrap:wrap; }

/* Match the Living Skills lesson header and its utility controls. */
.reading-area .site-header { height:77px; min-height:77px; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
.reading-area .site-header .utility-nav button { border:0; background:transparent; border-radius:0; font-size:19px; font-weight:600; padding:0 0 0 10px; gap:10px; }
.reading-area .site-header .utility-nav img { width:34px; height:34px; }
@media(max-width:640px) {
 .reading-area .site-header { height:72px; min-height:72px; padding:4px 16px; }
 .reading-area .wordmark { width:92px; flex-basis:92px; }
 .reading-area .wordmark img { height:62px; width:92px; }
 .reading-area .site-header .utility-nav { gap:12px; }
 .reading-area .site-header .utility-nav button { font-size:15px; gap:6px; padding:0 2px; }
 .reading-area .site-header .utility-nav img { width:26px; height:26px; }
}

/* Grade collection: extend the Reading palette and native controls. */
.catalog-filters { margin:24px 0; }
.catalog-filters > summary { width:fit-content; min-height:44px; padding:8px 0; font-size:18px; font-weight:850; color:#0562e9; cursor:pointer; }
.catalog-filters .reading-filters { margin-top:16px; }
.catalog-filters .reading-results { margin-bottom:16px; }
.reading-topics { align-items:start; }
.reading-topics .area-card { display:block; }
.catalog.topic-catalog .reading-topics .area-card > summary { display:block; height:auto; aspect-ratio:auto; margin:0; padding:0; border:0; background:transparent; cursor:pointer; list-style:none; }
.reading-topics .area-card:has(> summary:focus-visible) { outline:3px solid #76590b; outline-offset:4px; }
.reading-topics summary:focus-visible { outline:0; }
.reading-topics summary::-webkit-details-marker { display:none; }
.reading-topics .catalog-scene { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.reading-topics .topic-card-copy { display:flex; flex-direction:column; gap:8px; padding:20px; }
.reading-area .catalog .reading-topics h2 { font-size:23px; }
.topic-card-meta { color:#3c5d7c; font-size:16px; }
.reading-topics .card-action { margin-top:0; }
.topic-card-open, .reading-topics [open] .topic-card-closed { display:none; }
.reading-topics [open] .topic-card-open { display:block; }
.reading-filters { display:grid; grid-template-columns:minmax(130px,.5fr) minmax(180px,1fr) minmax(220px,1.3fr); gap:20px; margin-top:32px; }
.reading-filters > div { min-width:0; }
.reading-filters label { display:block; margin-bottom:8px; font-size:18px; font-weight:900; }
.reading-filters select { width:100%; min-width:0; min-height:48px; padding:10px 12px; border:1.5px solid #bfddf6; border-radius:14px; font:inherit; color:#103363; background:white; }
.reading-results { display:flex; gap:16px; justify-content:space-between; align-items:center; margin:16px 0 28px; }
.reading-results button { flex-shrink:0; }
.reading-grade { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border:1px solid #bfddf6; border-radius:8px; background:#e2efff; color:#103363; font-size:17px; font-weight:900; white-space:nowrap; }
.reading-entries { list-style:none; padding:0; margin:0; border-top:1px solid #bfddf6; }
.reading-entries li { border-bottom:1px solid #bfddf6; }
.reading-entries li:last-child { border-bottom:0; }
.reading-entries a { display:flex; flex-direction:column; align-items:start; gap:6px; padding:16px 20px; color:#103363; text-decoration:none; }
.reading-entries a:hover { background:#e9f5ff; }
.reading-entries .reading-grade { flex-shrink:0; }
.reading-entry-copy { min-width:0; }
.reading-entry-copy h3 { font-size:20px; font-weight:900; margin:0 0 4px; line-height:1.35; color:#0562e9; }
.reading-entry-copy > span, .reading-entry-length { font-size:16px; color:#3c5d7c; }
.reading-entry-length { font-variant-numeric:tabular-nums; }
.reading-metadata { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:16px 0; font-size:17px; }
.word-practice-tools { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #bfddf6; }
.word-practice-tools label { display:block; margin:16px 0 8px; font-weight:900; }
.word-practice-tools select { width:100%; max-width:320px; min-height:44px; }
.word-practice-tools button[aria-pressed="true"] { background:#0562e9; color:white; }
.reading-heading .reader-note { font-size:16px; color:#3c5d7c; margin-top:12px; }
.reading-vocabulary { margin-top:20px; padding-top:16px; border-top:1px solid #bfddf6; border-bottom:0; }
.reading-vocabulary summary { font-size:18px; font-weight:900; cursor:pointer; min-height:44px; display:list-item; }
.reading-vocabulary dl { margin:0 0 12px; font-size:18px; line-height:1.5; }
.reading-vocabulary dt { font-weight:900; margin:14px 0 4px; }
.reading-vocabulary dd { margin:0; }
.question-jump, .passage-jump { display:none; }
.reading-question .reading-answers button { font-size:18px; line-height:1.45; }
.reading-question .reading-feedback { font-size:18px; }
.story-lines { max-width:72ch; }
@media(max-width:740px) {
 .reading-filters { grid-template-columns:1fr 1fr; gap:16px; }
 .reading-filters > div:last-child { grid-column:1/-1; }
}
@media(max-width:640px) {
 .reading-filters { grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:12px; margin-top:24px; }
 .reading-filters label { font-size:16px; }
 .reading-filters select { font-size:16px; }
 .reading-results { align-items:start; }
 .reading-results .reader-note { margin:0; }
 .reading-entries .reading-grade { padding:6px 10px; font-size:16px; }
 .question-jump, .passage-jump { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:#0562e9; text-underline-offset:3px; }
 .passage-jump { margin:0 0 12px; }
}