.q-card.info-card.reading-assessment-overview-dialog { display: flex; flex-direction: column; width: min(720px, calc(100vw - 28px)); min-width: 0; max-width: calc(100vw - 28px); max-height: 88vh; overflow: hidden; border: 1px solid white; border-radius: 30px; box-shadow: 0 24px 70px rgb(45 24 50 / 28%);
}
.overview-guide[data-v-reading-overview-visual] { --accent: #79528a; --tint: #efe6f5; --edge: #e3d6eb; min-height: 0; overflow-y: auto; overscroll-behavior: contain; white-space: normal; overflow-wrap: anywhere; background: #faf8fb; color: #44394b;
}
.overview-guide--comprehension[data-v-reading-overview-visual] { --accent: #327b7a; --tint: #e4f2ef; --edge: #cde3df;
}
.overview-guide p[data-v-reading-overview-visual] { margin: 0; line-height: 1.55;
}
.overview-guide__welcome[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--tint); color: var(--accent); font-weight: 600;
}
.overview-guide__welcome .q-icon[data-v-reading-overview-visual] { flex: none;
}
.overview-guide__body[data-v-reading-overview-visual] { display: grid; gap: 22px; padding: 22px 24px 26px;
}
.guide-heading[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--accent);
}
.guide-heading h3[data-v-reading-overview-visual] { margin: 0; font-size: 1.02rem; font-weight: 750; line-height: 1.35;
}
.guide-pill[data-v-reading-overview-visual] { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--tint); font-size: .74rem; font-weight: 750;
}
.fluency-score[data-v-reading-overview-visual] { padding: 18px; border: 1px solid var(--edge); border-radius: 20px; background: white;
}
.rating-scale[data-v-reading-overview-visual] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.rating-scale > div[data-v-reading-overview-visual] { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 12px 5px; border-radius: 12px; background: #fff0e1; color: #99591e;
}
.rating-scale > .rating-scale__step--2[data-v-reading-overview-visual] { background: #fff5d9; color: #886a1d;
}
.rating-scale > .rating-scale__step--3[data-v-reading-overview-visual] { background: #eee7f7; color: #765294;
}
.rating-scale > .rating-scale__step--4[data-v-reading-overview-visual] { background: #e8f3eb; color: #34724d;
}
.rating-scale strong[data-v-reading-overview-visual] { font-size: 1.55rem; line-height: 1.2;
}
.rating-scale span[data-v-reading-overview-visual] { text-align: center; font-size: .76rem; font-weight: 650;
}
.fluency-score__example[data-v-reading-overview-visual] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 12px;
}
.fluency-score__example > span[data-v-reading-overview-visual] { color: #82708e; font-size: .8rem;
}
.fluency-score__example > div[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 7px; color: #82708e;
}
.fluency-score__example b[data-v-reading-overview-visual] { display: flex; gap: 7px; align-items: center; font-size: .95rem; font-weight: 700;
}
.fluency-score__example small[data-v-reading-overview-visual] { font-size: .72rem; font-weight: 400;
}
.fluency-score__example strong[data-v-reading-overview-visual] { padding: 5px 9px; border-radius: 10px; background: var(--tint); color: var(--accent); font-size: 1.3rem;
}
.fluency-score__example strong span[data-v-reading-overview-visual] { font-size: .8rem; font-weight: 650;
}
.guide-threshold[data-v-reading-overview-visual] { display: flex; align-items: flex-start; gap: 7px; padding-top: 12px; border-top: 1px solid #eee7f2; font-size: .83rem; color: #6e5b79;
}
.guide-threshold .q-icon[data-v-reading-overview-visual] { flex: none; margin-top: 2px;
}
.skill-grid[data-v-reading-overview-visual] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.skill-card[data-v-reading-overview-visual] { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #e6ddeb; border-radius: 16px; background: white;
}
.skill-card__icon[data-v-reading-overview-visual] { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: #805394; background: #f0e7f7;
}
.skill-card--1 .skill-card__icon[data-v-reading-overview-visual] { color: #357b89; background: #e7f3f5;
}
.skill-card--2 .skill-card__icon[data-v-reading-overview-visual] { color: #b5792c; background: #fff2dd;
}
.skill-card h4[data-v-reading-overview-visual] { margin: 0 0 5px; font-size: .89rem; font-weight: 750;
}
.skill-card p[data-v-reading-overview-visual] { font-size: .86rem; color: #7a6e82;
}
.overview-guide--fluency .skill-card[data-v-reading-overview-visual]:last-child { grid-column: 1 / -1;
}
.guide-caption[data-v-reading-overview-visual] { margin-top: 10px !important; font-size: .8rem; color: #80718a;
}
.comprehension-score[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--edge); border-radius: 20px; background: white;
}
.comprehension-score__badge[data-v-reading-overview-visual] { display: flex; flex: 0 0 108px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 18px 8px; background: var(--tint); border-radius: 16px; color: var(--accent);
}
.comprehension-score__badge strong[data-v-reading-overview-visual] { font-size: 1.8rem; line-height: 1.2; font-weight: 800;
}
.comprehension-score__badge strong span[data-v-reading-overview-visual] { font-size: 1.1rem;
}
.comprehension-score__badge small[data-v-reading-overview-visual] { text-align: center; font-size: .69rem; font-weight: 650;
}
.comprehension-score h3[data-v-reading-overview-visual] { margin: 0 0 7px; color: var(--accent); font-size: 1rem; font-weight: 750;
}
.comprehension-score p[data-v-reading-overview-visual] { font-size: .87rem;
}
.comprehension-score > div > small[data-v-reading-overview-visual] { display: block; margin-top: 9px; color: #7a6e82; font-size: .78rem;
}
.meaning-example[data-v-reading-overview-visual] { padding: 18px; border: 1px solid #cfdfed; border-radius: 18px; background: #eef5fc;
}
.meaning-example .guide-heading[data-v-reading-overview-visual] { color: #3f6e9c;
}
.meaning-example .guide-pill[data-v-reading-overview-visual] { color: #3f6e9c; background: white;
}
.meaning-example blockquote[data-v-reading-overview-visual] { margin: 12px 0; padding: 12px 15px; border-left: 3px solid #8ab4d9; border-radius: 0 10px 10px 0; background: white; font-size: .92rem; line-height: 1.55;
}
.meaning-example h4[data-v-reading-overview-visual] { margin: 14px 0 12px; color: #3c648a; font-size: .89rem; font-weight: 700;
}
.meaning-example__reasoning[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 10px;
}
.meaning-example__reasoning > div[data-v-reading-overview-visual] { flex: 1; min-width: 0; padding: 12px; border-radius: 12px; background: #dfeefb;
}
.meaning-example__reasoning > div[data-v-reading-overview-visual]:last-child { background: #e3f2e8;
}
.meaning-example__reasoning span[data-v-reading-overview-visual] { display: block; margin-bottom: 4px; color: #527897; font-size: .72rem; font-weight: 750;
}
.meaning-example__reasoning p[data-v-reading-overview-visual] { font-size: .86rem;
}
.review-steps[data-v-reading-overview-visual] { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none;
}
.review-steps li[data-v-reading-overview-visual] { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--edge); border-radius: 14px; background: white;
}
.review-steps li > span[data-v-reading-overview-visual] { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%; color: var(--accent); background: var(--tint); font-size: .83rem; font-weight: 800;
}
.review-steps h4[data-v-reading-overview-visual] { margin: 1px 0 4px; font-size: .9rem; font-weight: 750;
}
.review-steps p[data-v-reading-overview-visual] { font-size: .87rem; color: #7a6e82;
}
.save-reminder[data-v-reading-overview-visual] { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 14px; background: var(--tint); border-radius: 14px; color: var(--accent); font-size: .86rem;
}
.save-reminder .q-icon[data-v-reading-overview-visual] { flex: none; margin-top: 2px;
}
.research-details[data-v-reading-overview-visual] { padding: 15px 16px; border: 1px solid #e3dce8; border-radius: 14px; background: white;
}
.research-details summary[data-v-reading-overview-visual] { display: flex; align-items: center; gap: 8px; color: #7c6888; font-size: .86rem; font-weight: 700; cursor: pointer;
}
.research-details summary[data-v-reading-overview-visual]::after { content: '+'; margin-left: auto; font-size: 1.15rem;
}
.research-details[open] summary[data-v-reading-overview-visual]::after { content: '−';
}
.research-details__body[data-v-reading-overview-visual] { display: grid; gap: 14px; padding-top: 16px; font-size: .84rem;
}
.research-details ul[data-v-reading-overview-visual] { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0;
}
.research-details li[data-v-reading-overview-visual] { padding: 12px; border-radius: 12px; background: #f8f5fa;
}
.research-details a[data-v-reading-overview-visual] { display: inline; color: #7b518a; font-weight: 700; text-underline-offset: 3px;
}
.research-details a .q-icon[data-v-reading-overview-visual] { margin-left: 5px;
}
.research-details li p[data-v-reading-overview-visual] { margin-top: 5px;
}
.research-details__note[data-v-reading-overview-visual] { color: #82718d; font-size: .78rem;
}
@media (max-width: 520px) {
.overview-guide__welcome[data-v-reading-overview-visual] { padding: 16px; font-size: .9rem;
}
.overview-guide__body[data-v-reading-overview-visual] { padding: 16px; gap: 18px;
}
.fluency-score[data-v-reading-overview-visual] { padding: 14px;
}
.guide-heading[data-v-reading-overview-visual] { flex-wrap: wrap;
}
.skill-card[data-v-reading-overview-visual] { padding: 12px; gap: 8px;
}
.skill-card__icon[data-v-reading-overview-visual] { width: 30px; height: 30px; border-radius: 9px;
}
.skill-card h4[data-v-reading-overview-visual] { font-size: .83rem;
}
.skill-card p[data-v-reading-overview-visual] { font-size: .82rem;
}
.comprehension-score[data-v-reading-overview-visual] { gap: 12px; padding: 14px;
}
.comprehension-score__badge[data-v-reading-overview-visual] { flex-basis: 80px; padding: 16px 6px;
}
.comprehension-score__badge strong[data-v-reading-overview-visual] { font-size: 1.5rem;
}
.meaning-example__reasoning[data-v-reading-overview-visual] { flex-direction: column; align-items: stretch;
}
.meaning-example__reasoning > .q-icon[data-v-reading-overview-visual] { transform: rotate(90deg); align-self: center;
}
}
@media (max-width: 380px) {
.skill-grid[data-v-reading-overview-visual] { grid-template-columns: 1fr;
}
}