/* Byline text in the dark-navy hero (see cr-style.css's
.art-hero background) -- same color/size as cr-content-
styles.css's own .cr-content-meta-line, which this page
can't reference directly since it never loads that
stylesheet. Without an explicit color here this fell back
to default black text on the navy background, effectively
invisible. */
.cr-practice-meta-line {
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.7);
}
/* QuestionText/PassageText/Explanation/ShortcutMethod are
sanitized rich HTML from the admin question editor's
allowlist toolbar, rendered raw (not HtmlEncode'd) --
same convention and same styles as cr-results.aspx /
cr-test.aspx use for this content. */
.cr-rich-content pre {
/* White + border, not var(--off-white) -- both the
Explanation/Shortcut Method panel and the Passage box
it can appear inside are already off-white, so a
same-color code block used to blend in almost
invisibly (only visible when text-selected). */
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
overflow-x: auto;
font-size: 13px;
}
.cr-rich-content code {
font-family: 'Courier New', Courier, monospace;
}
.cr-practice-opt-img {
max-height: 60px;
max-width: 120px;
object-fit: contain;
border-radius: 6px;
vertical-align: middle;
}
.cr-practice-q-img {
max-width: 100%;
border-radius: 6px;
margin: 10px 0;
}
.cr-practice-passage {
background: var(--off-white);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 16px 18px;
margin-bottom: 16px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--text-body);
}
.cr-practice-q {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 18px 20px;
margin-bottom: 16px;
background: #fff;
}
.cr-practice-q-num {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.cr-practice-q-text {
font-family: var(--font-body);
font-size: 15px;
color: var(--black);
margin-bottom: 14px;
line-height: 1.6;
}
.cr-practice-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 0.5px solid var(--border);
background: var(--white);
font-size: 14px;
color: var(--text-body);
font-family: var(--font-body);
margin-bottom: 6px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.cr-practice-opt:hover { border-color: var(--navy); }
.cr-practice-opt-letter {
width: 26px; height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
background: #f0f2f5;
color: #9ca3af;
}
.cr-practice-opt-text { flex: 1; }
.cr-practice-opt-check { display: none; margin-left: auto; font-size: 15px; color: #16a34a; }
.cr-practice-opt-cross { display: none; margin-left: auto; font-size: 15px; color: #dc2626; }
.cr-practice-multi-note {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
/* Selecting an option before reveal just marks it -- a light
highlight, no red/green yet (that only appears once the
question is actually revealed, whether by clicking the
option itself or by Show Answer). */
.cr-practice-opt-selected {
border-color: var(--navy);
background: #f0f4fa;
}
/* Correct answer highlighting hidden until revealed */
.cr-practice-q .cr-practice-opt-correct {
background: var(--white);
border-color: var(--border);
}
.cr-practice-q.revealed .cr-practice-opt-correct {
background: #f0fdf4;
border: 1.5px solid #86efac;
color: #166534;
}
.cr-practice-q.revealed .cr-practice-opt-correct .cr-practice-opt-letter {
background: #16a34a;
color: #fff;
}
.cr-practice-q.revealed .cr-practice-opt-correct .cr-practice-opt-check {
display: inline;
}
/* Wrong option the student clicked on, once revealed */
.cr-practice-q.revealed .cr-practice-opt-selected:not(.cr-practice-opt-correct) {
background: #fef2f2;
border: 1.5px solid #fca5a5;
color: #A32D2D;
}
.cr-practice-q.revealed .cr-practice-opt-selected:not(.cr-practice-opt-correct) .cr-practice-opt-letter {
background: #dc2626;
color: #fff;
}
.cr-practice-q.revealed .cr-practice-opt-selected:not(.cr-practice-opt-correct) .cr-practice-opt-cross {
display: inline;
}
.cr-practice-reveal-btn {
background: var(--navy);
color: #fff;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
padding: 8px 18px;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.cr-practice-reveal-btn:hover { background: var(--navy-light); }
/* Explanation / Shortcut Method -- hidden until revealed,
same as the correct-answer highlighting. */
.cr-practice-explain-block {
display: none;
margin-top: 12px;
padding: 12px 14px;
background: var(--off-white);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.cr-practice-q.revealed .cr-practice-explain-block {
display: block;
}
.cr-practice-explain-label {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
/* white-space here used to be "pre-line", but that rendered
BOTH explicit
tags AND any raw newline character left
in the stored text (e.g. from the admin pressing Enter in
the source textarea out of habit) as real line breaks --
stacking extra blank lines the admin never saw, since the
Preview box collapses raw newlines like normal HTML and
has no way to reveal that mismatch while editing. Matches
every other page (cr-test.aspx, cr-results.aspx), where
is the only way to create a line break. */
.cr-practice-explain-text {
font-family: var(--font-body);
font-size: 15px;
color: var(--black);
line-height: 1.6;
}
/* Sidebar "More in {Topic}/{Subject}" -- same shape as
cr-content.aspx's sidebar, page-local copy of the rules
since there's no shared stylesheet between them. */
.art-related-box + .art-related-box { margin-top: 16px; }
.cr-sidebar-box-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cr-sidebar-view-all {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
text-transform: none;
letter-spacing: normal;
color: var(--navy);
text-decoration: none;
white-space: nowrap;
}
.cr-sidebar-view-all:hover { text-decoration: underline; }
.cr-sidebar-list { list-style: none; margin: 0; padding: 8px 0; }
.cr-sidebar-list li { border-bottom: 1px solid var(--border); }
.cr-sidebar-list li:last-child { border-bottom: none; }
.cr-sidebar-row {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 14px !important;
text-decoration: none;
}
.cr-sidebar-row-thumb {
display: block;
flex: none;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
overflow: hidden;
}
.cr-sidebar-row-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s;
}
.cr-sidebar-row:hover .cr-sidebar-row-thumb-img {
transform: scale(1.06);
}
/* Cancels the shared cr-style.css rule ".art-related-box ul li
a:hover { padding-left: 18px !important; }" -- same fix as
cr-content-styles.css, see that file's comment for why the
extra .cr-sidebar-list ancestor class is needed. */
.cr-sidebar-list .cr-sidebar-row:hover {
padding-left: 14px !important;
}
.cr-sidebar-row-thumb-placeholder {
flex: none;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0a83a, #854f0b);
color: rgba(255, 255, 255, 0.9);
}
.cr-sidebar-row-body { min-width: 0; }
.cr-sidebar-row-title {
display: block;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--navy);
}
.cr-sidebar-row-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
/* Match cr-content.aspx's widened sidebar so main content and
sidebar columns are the same width across both pages --
scoped to this page only, same 1025px floor as that file. */
@media (min-width: 1025px) {
.art-layout { grid-template-columns: 1fr 320px; }
}