.reading-level-chart[data-v-reading-level-chart] { margin-top: 20px; overflow: hidden; border: 1px solid #e1d6e7; border-radius: 20px; background: white;
}
.reading-level-chart__heading[data-v-reading-level-chart] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; background: #f4edf7;
}
.reading-level-chart__heading h3[data-v-reading-level-chart] { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 1.1rem; line-height: 1.4; font-weight: 750; color: #785183;
}
.reading-level-chart__heading p[data-v-reading-level-chart] { margin: 0; font-size: .85rem; color: #786980; line-height: 1.55;
}
.reading-level-chart__all[data-v-reading-level-chart] { flex: none; padding: 8px 12px; border: 1px solid #d9c7e2; border-radius: 999px; background: white; color: #795184; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer;
}
.reading-level-chart__table[data-v-reading-level-chart] { width: 100%; border-collapse: collapse; table-layout: fixed;
}
.reading-level-chart__table thead[data-v-reading-level-chart] { background: #faf8fb;
}
.reading-level-chart__table thead th[data-v-reading-level-chart] { padding: 11px 16px; color: #807187; text-align: left; font-size: .75rem; font-weight: 750;
}
.reading-level-chart__table thead th[data-v-reading-level-chart]:first-child { width: 24%;
}
.reading-level-chart__table thead th[data-v-reading-level-chart]:nth-child(2) { width: 23%;
}
.reading-level-chart__year[data-v-reading-level-chart] > * { padding: 16px; border-top: 1px solid #eee7f1; vertical-align: top;
}
.reading-level-chart__year > th[data-v-reading-level-chart] { font-size: .9rem; font-weight: 750; text-align: left; color: var(--year-colour);
}
.reading-level-chart__year-icon[data-v-reading-level-chart] { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 10px; background: var(--year-tint); color: var(--year-colour); font-size: .9rem; font-weight: 800;
}
.reading-level-chart__range strong[data-v-reading-level-chart] { display: inline-block; padding: 4px 8px; border-radius: 8px; background: var(--year-tint); color: var(--year-colour); font-size: .85rem; font-weight: 750; white-space: nowrap;
}
.reading-level-chart__range small[data-v-reading-level-chart] { display: block; margin-top: 6px; color: #928296; font-size: .73rem;
}
.reading-level-chart__meaning p[data-v-reading-level-chart] { margin: 0; font-size: .86rem; line-height: 1.6; color: #61536a;
}
.reading-level-chart__meaning button[data-v-reading-level-chart] { display: inline-flex; align-items: center; gap: 3px; padding: 5px 0 0; border: 0; background: none; color: var(--year-colour); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.reading-level-chart button[data-v-reading-level-chart]:focus-visible { outline: 2px solid #8f5d95; outline-offset: 4px;
}
.reading-level-chart__details td[data-v-reading-level-chart] { padding: 0 16px 16px;
}
.reading-level-chart__details dl[data-v-reading-level-chart] { margin: 0; padding: 7px 15px; border: 1px solid #e6ddec; border-radius: 14px; background: var(--year-tint);
}
.reading-level-chart__details dl > div[data-v-reading-level-chart] { display: grid; grid-template-columns: 52px 1fr; align-items: start; gap: 10px; padding: 10px 0;
}
.reading-level-chart__details dl > div + div[data-v-reading-level-chart] { border-top: 1px solid rgb(70 40 90 / 8%);
}
.reading-level-chart__details dt[data-v-reading-level-chart] { color: var(--year-colour); font-size: .87rem; font-weight: 800; line-height: 1.55;
}
.reading-level-chart__details dd[data-v-reading-level-chart] { margin: 0; color: #5f5267; font-size: .86rem; line-height: 1.55;
}
.reading-level-chart__footer[data-v-reading-level-chart] { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 16px 20px; border-top: 1px solid #eee7f1; background: #faf8fb; color: #817287; font-size: .78rem; line-height: 1.55;
}
.reading-level-chart__footer .q-icon[data-v-reading-level-chart] { flex: none; margin-top: 2px;
}
.reading-level-chart__sr-only[data-v-reading-level-chart] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 600px) {
.reading-level-chart__heading[data-v-reading-level-chart] { padding: 16px;
}
.reading-level-chart__table thead[data-v-reading-level-chart] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.reading-level-chart__year[data-v-reading-level-chart] { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eee7f1;
}
.reading-level-chart__year[data-v-reading-level-chart] > * { border: 0; padding: 14px 16px 0;
}
.reading-level-chart__range[data-v-reading-level-chart] { text-align: right;
}
.reading-level-chart__range small[data-v-reading-level-chart] { display: inline; margin-left: 7px;
}
.reading-level-chart__year > .reading-level-chart__meaning[data-v-reading-level-chart] { grid-column: 1 / -1; padding: 10px 16px 14px;
}
.reading-level-chart__details[data-v-reading-level-chart] { display: block;
}
.reading-level-chart__details td[data-v-reading-level-chart] { display: block;
}
}