/* Learning module: homework, online tests, resources. Uses the core design tokens. */

.lrn-list { list-style: none; margin: 0; padding: 0; }
.lrn-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.lrn-item:last-child { border-bottom: 0; }
.lrn-item .subject-dot { flex: none; }
.lrn-item > .icon { color: var(--muted); flex: none; }

.lrn-mini-stats { display: flex; gap: 1.5rem; margin-bottom: .6rem; }
.lrn-mini-stats div { display: flex; flex-direction: column; }
.lrn-mini-stats strong { font-size: 1.4rem; line-height: 1.1; }
.lrn-mini-stats span { color: var(--muted); font-size: .8rem; }

.lrn-files { list-style: none; margin: .5rem 0 0; padding: 0; }
.lrn-files li { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; }
.lrn-files .icon { color: var(--muted); flex: none; }
.lrn-files form.inline { margin-left: auto; }

.lrn-text { line-height: 1.55; overflow-wrap: anywhere; }
.lrn-answer { background: var(--surface-2, var(--grey-soft)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.lrn-rule { border: 0; border-top: 1px solid var(--border); margin: .75rem 0; }
.lrn-label { display: block; font-weight: 600; margin-bottom: .35rem; }

.lrn-picker { max-height: 360px; overflow: auto; }
.lrn-picker-group { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.lrn-picker-group:last-child { border-bottom: 0; }
.lrn-picker-class { font-weight: 600; font-size: .85rem; color: var(--muted); margin-bottom: .15rem; }
.lrn-picker .check { margin: .1rem 0 .1rem .4rem; }

.table input.cell.lrn-mark { width: 4.5rem; text-align: right; }
.table input.cell.lrn-feedback-in { width: 100%; min-width: 180px; }
.lrn-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; color: var(--muted); font-size: .9rem; }
.lrn-summary .icon { vertical-align: -2px; }
.lrn-facts { list-style: none; padding: 0; margin: 0 0 1rem; }
.lrn-facts li { display: flex; gap: .5rem; align-items: center; padding: .3rem 0; }
.lrn-facts .icon { color: var(--accent); flex: none; }

/* questions */
.lrn-q-head { display: flex; gap: .75rem; align-items: flex-start; }
.lrn-q-num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.lrn-q-prompt { font-size: 1rem; line-height: 1.5; padding-top: .15rem; }
.lrn-q-body { margin: .6rem 0 0 2.55rem; }
.lrn-q-tools { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.lrn-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .75rem; margin: .35rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; }
.lrn-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.lrn-opt input { width: auto; margin-top: .2rem; }
.lrn-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.lrn-opts { list-style: none; margin: 0; padding: 0; }
.lrn-opt-r { display: flex; gap: .5rem; align-items: center; padding: .35rem .6rem; margin: .2rem 0; border-radius: var(--radius-sm); border: 1px solid transparent; }
.lrn-opt-r.is-right { background: var(--green-soft); border-color: var(--green); }
.lrn-opt-r.is-wrong { background: var(--red-soft); border-color: var(--red); }
.lrn-opt-r.is-picked { font-weight: 600; }
.lrn-dot { display: inline-block; width: 14px; }
.lrn-tag { margin-left: auto; font-size: .75rem; color: var(--green); font-weight: 600; }
.lrn-response { background: var(--grey-soft); border-radius: var(--radius-sm); padding: .6rem .8rem; margin-bottom: .4rem; overflow-wrap: anywhere; }
.lrn-explain { margin-top: .6rem; padding: .5rem .75rem; border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .9rem; }
.lrn-essay-mark input { width: auto; }
.lrn-q-review.lrn-q-green .lrn-q-num { background: var(--green-soft); color: var(--green); }
.lrn-q-review.lrn-q-red .lrn-q-num { background: var(--red-soft); color: var(--red); }
.lrn-q-review.lrn-q-amber .lrn-q-num { background: var(--amber-soft); color: var(--amber); }
.lrn-q-take textarea { width: 100%; }

/* question editor: show only the parts for the chosen type */
.lrn-qform .lrn-qsec { display: none; margin-bottom: 1rem; }
.lrn-qform[data-type="mcq"] .lrn-qsec[data-for~="mcq"],
.lrn-qform[data-type="multi"] .lrn-qsec[data-for~="multi"],
.lrn-qform[data-type="tf"] .lrn-qsec[data-for~="tf"],
.lrn-qform[data-type="short"] .lrn-qsec[data-for~="short"],
.lrn-qform[data-type="numeric"] .lrn-qsec[data-for~="numeric"],
.lrn-qform[data-type="essay"] .lrn-qsec[data-for~="essay"] { display: block; }
.lrn-qform[data-type="numeric"] .lrn-qsec[data-for~="numeric"] { display: grid; }
.lrn-qform[data-type="mcq"] .only-multi, .lrn-qform[data-type="multi"] .only-mcq { display: none; }
.lrn-opt-table input[type=radio], .lrn-opt-table input[type=checkbox] { width: auto; }

/* taking a test */
.lrn-take-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem 1rem; margin-bottom: 1rem; }
.lrn-timer { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.lrn-timer.is-low { background: var(--amber-soft); color: var(--amber); }
.lrn-timer.is-out { background: var(--red-soft); color: var(--red); }
.lrn-big-score { font-size: 2.4rem; font-weight: 800; margin-right: 1rem; }
.lrn-score { font-weight: 600; }
.lrn-feedback { border-left: 4px solid var(--green); }

/* resources */
.lrn-topic { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem 0 .3rem; }
.lrn-topic:first-child { margin-top: 0; }
.lrn-res { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.lrn-res:last-child { border-bottom: 0; }
.lrn-res-hidden { opacity: .6; }
.lrn-res-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.lrn-video summary { cursor: pointer; color: var(--accent); margin: .3rem 0; }
.lrn-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: .4rem 0; }
.lrn-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }

.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

@media (max-width: 720px) {
    .lrn-q-body { margin-left: 0; }
    .lrn-take-bar { flex-wrap: wrap; }
}
@media print {
    .lrn-take-bar { position: static; }
}