/* Shared educational data visuals for solving and reviewing questions. */
.question-visual-consumer { min-width: 0; max-width: 100%; margin: 12px 0; }
.question-visual-chart { margin: 0 auto; width: 100%; max-width: 440px; min-width: 0; box-sizing: border-box; color: #173d43; }
.question-visual-chart-svg { display: block; width: 100%; height: auto; font-family: Arial, sans-serif; }
.question-visual-labels { display: grid; box-sizing: border-box; padding: 0 2.2727% 0 15.4545%; font-size: 16px; line-height: 1.4; text-align: center; }
.question-visual-labels > span { min-width: 0; padding: 0 4px; overflow-wrap: anywhere; }
.question-visual-columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.question-visual-columns-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.question-visual-columns-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.question-visual-columns-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.question-visual-columns-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
.question-visual-chart figcaption { font-weight: 700; font-size: 16px; padding: 10px 0; overflow-wrap: anywhere; }
.question-visual-table summary { display: list-item; min-height: 44px; box-sizing: border-box; padding: 12px 4px; cursor: pointer; font-size: 16px; color: #125e66; }
.question-visual-table-wrap { width: 100%; min-width: 0; }
.question-visual-table-wrap table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: #173d43; }
.question-visual-table-wrap caption { padding: 10px 0; text-align: left; font-weight: 700; overflow-wrap: anywhere; }
.question-visual-table-wrap :is(th,td) { padding: 8px; border: 1px solid #c9d9da; overflow-wrap: anywhere; }
.question-visual-table-wrap thead th { background: #edf6f4; }
.question-visual-consumer summary:focus-visible { outline: 3px solid #176777; outline-offset: 3px; }
.question-visual-flow { margin: 12px auto; max-width: 440px; color: #173d43; }
.question-visual-flow figcaption { font-size: 17px; font-weight: 700; margin-bottom: 14px; overflow-wrap: anywhere; }
.question-visual-flow-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.question-visual-flow-steps > li { position: relative; display: flex; align-items: center; gap: 12px; border: 2px solid #b7d7d7; border-radius: 14px; background: #f2f8f7; padding: 14px; min-width: 0; }
.question-visual-flow-steps > li:not(:last-child)::after { content: '↓'; position: absolute; left: calc(50% - 12px); bottom: -30px; width: 24px; text-align: center; font-size: 24px; color: #137b80; }
.question-visual-flow-steps p { margin: 0; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.question-visual-flow-number { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #137b80; color: white; font-size: 16px; font-weight: 700; }
/* Existing .practice-options span styles apply to ALL descendants. Keep graph
   column labels ordinary data, never another selectable option/card. */
.practice-options .question-visual-consumer .question-visual-labels > span {
    display: block;
    align-items: normal;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
    font-weight: normal;
}
.practice-options .question-visual-consumer .question-visual-flow-number { display: grid; padding: 0; border: 0; border-radius: 50%; background: #137b80; color: white; font-weight: 700; }
/* A fieldset's intrinsic minimum can exceed a narrow, zoomed visual question. */
.teacher-exam-question-list, .teacher-exam-question, .teacher-exam-question form, .teacher-exam-question fieldset, .teacher-exam-visual-option, .teacher-exam-review-options { min-width: 0; max-width: 100%; }
.teacher-exam-question h2, .teacher-exam-question p, .teacher-exam-question summary, .teacher-exam-option, .teacher-exam-review-option { overflow-wrap: anywhere; }
.teacher-exam-option > span { min-width: 0; }
.practice-repair a { gap: 8px; max-width: 100%; white-space: normal; }
.practice-repair-link-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.practice-repair-link-icon { display: block; flex: 0 0 24px; width: 24px; }
@media (max-width: 320px) {
    .assignment-scores { grid-template-columns: minmax(0,1fr); }
    .teacher-exam-question { padding: 14px; }
    .teacher-exam-question fieldset { padding-inline: 0; }
    .practice-exam-result-page .practice-main :is(h1,h2,h3,p,dd,dt,strong,span,a,b,small) { min-width: 0; overflow-wrap: anywhere; }
    .practice-exam-result-page :is(.practice-score,.practice-review-item,.practice-next) { min-width: 0; padding: 14px; }
    .practice-exam-result-page .practice-review-item > header { grid-template-columns: minmax(0,1fr); }
    .practice-exam-result-page .practice-review-item > header > b { grid-column: 1; }
    .practice-exam-result-page .practice-review-item blockquote { min-width: 0; margin-inline: 0; padding: 12px; overflow-wrap: anywhere; }
    .practice-exam-result-page .question-teaching-panel > summary { grid-template-columns: minmax(0,1fr) 22px; gap: 6px; padding: 10px; }
    .practice-exam-result-page .question-teaching-panel__mark { display: none; }
    .practice-exam-result-page .question-teaching-panel__body { padding: 12px 10px; }
    .practice-exam-result-page .question-teaching-step { grid-template-columns: minmax(0,1fr); padding: 10px; }
    .practice-exam-result-page .practice-next .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}