/* Assessment screens: the end-of-session prediction, the delayed recall
 * check and its result, the pretest and the exercises.
 *
 * Loaded after theme.css. One grammar for every question: a mono kicker, the
 * question, the answer in a ruled panel, then a two-way self-assessment.
 * Colours are theme tokens only, so both themes follow.
 */

/* Panel and heading */
.assess-panel { padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid var(--line-strong); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow); }
.assess-panel [data-learning-view] > :last-child { margin-bottom: 0; }
.assess-head { display: grid; gap: .3rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.assess-head h2 { margin: 0; color: var(--ink); font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 650; letter-spacing: -.02em; }
.assess-head h2:focus { outline: none; }
.assess-head .learning-summary { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 500; }
.assess-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-blue); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.assess-eyebrow i { font-size: .85rem; }
.assess-kicker { display: block; margin-bottom: .45rem; color: var(--faint); font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.assess-prompt { margin: 1.5rem 0 .85rem; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.55; }
.assess-instructions { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 1.25rem; padding: .75rem .95rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: .86rem; line-height: 1.5; }
.assess-instructions i { color: var(--text-blue); font-size: 1rem; line-height: 1.35; }

/* The objective and the path sit quieter inside the panel. */
.assess-panel .chapter-progress { margin: 0 0 1rem; box-shadow: none; }
.assess-panel .chapter-objective-card { margin: 0; padding: 1rem 1.15rem; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--text-green); border-radius: var(--radius-control); }
.assess-panel .chapter-objective-heading { gap: .6rem; margin-bottom: .45rem; }
.assess-panel .chapter-objective-heading strong { color: var(--muted); font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.assess-panel .chapter-objective-icon { flex-basis: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: .9rem; }
.assess-panel .learning-objective { font-size: 1.02rem; }

/* Percentage scale: one segmented control, its ends named underneath. */
.assess-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; padding: .3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.assess-scale button { min-height: 2.9rem; padding: .5rem .25rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius-control) - .2rem); font-family: var(--font-mono); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.assess-scale button:hover { color: var(--on-action); background: var(--action); border-color: var(--action); }
.assess-scale button:focus-visible { outline: 2px solid var(--hud); outline-offset: 1px; }
.assess-scale button:disabled { opacity: .55; }
.assess-scale-ends { display: flex; justify-content: space-between; margin: .4rem .35rem 0; color: var(--faint); font-size: .72rem; }
.assess-field { color: var(--ink); background: var(--field); border-color: var(--line-strong); border-radius: var(--radius-control); line-height: 1.55; resize: vertical; }
.assess-field:focus { border-color: var(--hud); box-shadow: 0 0 0 .2rem var(--active-bg); }
[data-check-ideas] .assess-field { margin-bottom: 1rem; }

/* Delayed check: numbered questions, each marked once graded. */
.recall-check-list { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.recall-check-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--line-strong); border-radius: var(--radius-control); transition: border-color .15s ease; }
.recall-check-item.is-recalled { border-left-color: var(--text-green); }
.recall-check-item.is-missed { border-left-color: var(--text-red); }
.recall-check-number { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; }
.recall-check-item.is-recalled .recall-check-number { color: var(--text-green); background: var(--tint-green); border-color: transparent; }
.recall-check-item.is-missed .recall-check-number { color: var(--text-red); background: var(--tint-red); border-color: transparent; }
.recall-check-body { min-width: 0; overflow-wrap: anywhere; }
.recall-check-body .assess-kicker { margin-bottom: .3rem; }
.recall-check-question { margin-bottom: .85rem; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.recall-check-question p:last-child, .assess-answer p:last-child { margin-bottom: 0; }
.recall-check-answer .assess-answer { margin-top: 0; }
.recall-check-answer .assess-answer [data-math] { color: var(--read-ink, var(--ink)); font-family: var(--read-font, var(--font-read)); line-height: 1.65; }
.assess-reveal { display: inline-flex; align-items: center; padding: .45rem .9rem; color: var(--text-blue); background: var(--active-bg); border: 1px dashed var(--line-strong); border-radius: var(--radius-control); font-size: .86rem; font-weight: 600; }
.assess-reveal:hover, .assess-reveal:focus-visible { color: var(--on-action); background: var(--action); border-color: var(--action); border-style: solid; }

/* Answer: a ruled panel under the question. */
.assess-answer { margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--hud); border-radius: var(--radius-control); }
.assess-answer .study-answer { padding: 0; color: var(--read-ink, var(--ink)); }
.assess-source { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; color: var(--faint); font-size: .75rem; }
.assess-source:empty { display: none; }
.assess-card-top .assess-source { margin-top: 0; }

/* Self-assessment: two clear choices, the chosen one filled. */
.assess-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.assess-grade button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.6rem; padding: .5rem .85rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-size: .88rem; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.assess-grade .is-yes i { color: var(--text-green); }
.assess-grade .is-no i { color: var(--text-red); }
.assess-grade .is-yes:hover { border-color: var(--text-green); background: var(--tint-green); }
.assess-grade .is-no:hover { border-color: var(--text-red); background: var(--tint-red); }
.assess-grade button:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.assess-grade .is-yes.active { color: var(--text-green); background: var(--tint-green); border-color: var(--text-green); box-shadow: inset 0 0 0 1px var(--text-green); }
.assess-grade .is-no.active { color: var(--text-red); background: var(--tint-red); border-color: var(--text-red); box-shadow: inset 0 0 0 1px var(--text-red); }

/* Footer: progress on the left, the action on the right. */
.assess-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.assess-count, .assess-start-note { color: var(--muted); font-family: var(--font-mono); font-size: .78rem; font-variant-numeric: tabular-nums; }
.assess-footer .btn { display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: var(--radius-control); font-weight: 600; }

/* Result: expected against recalled, then what follows. */
.assess-score { display: grid; gap: .7rem; padding: 1.1rem 1.15rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.assess-score-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: .85rem; }
.assess-score-row > span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.assess-score-row strong { color: var(--ink); font-family: var(--font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: right; }
.assess-meter { height: .55rem; overflow: hidden; background: var(--track); border-radius: 999px; }
.assess-meter i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .5s ease; }
.assess-score-row.is-expected .assess-meter i { background: var(--faint); }
.assess-score-row.is-recalled .assess-meter i { background: var(--hud); }
.assess-score-detail { color: var(--faint); font-size: .75rem; }
.assess-note { display: flex; gap: .65rem; align-items: flex-start; margin: .75rem 0 0; padding: .75rem .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: .9rem; line-height: 1.5; }
.assess-note i { font-size: 1rem; line-height: 1.4; }
.assess-note.is-over { background: var(--tint-amber); border-color: transparent; }
.assess-note.is-over i { color: var(--text-amber); }
.assess-note.is-under, .assess-note.is-accurate { background: var(--tint-blue); border-color: transparent; }
.assess-note:is(.is-under, .is-accurate, .is-info) i { color: var(--text-blue); }
.assess-note.is-advance { background: var(--tint-green); border-color: transparent; }
.assess-note.is-advance i { color: var(--text-green); }
.assess-note.is-stay i { color: var(--text-amber); }
.assess-note.is-history { color: var(--muted); font-size: .82rem; }
.assess-note.is-history i { color: var(--faint); }
.learning-result .assess-note:first-child { margin-top: 0; }

/* Pretest and exercises: the card carries its own progress. */
.assess-card > .assess-kicker { margin-top: 1.75rem; }
.assess-card .study-question { margin: 0 0 1.5rem; }
.assess-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.assess-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; color: var(--text-blue); background: var(--tint-blue); border-radius: 999px; font-size: .72rem; font-weight: 650; }
.assess-chip:empty { display: none; }
.assess-counter { margin-left: auto; color: var(--faint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.assess-counter strong { color: var(--ink); font-size: .9rem; font-weight: 600; }
.assess-track { height: 3px; margin-top: .85rem; overflow: hidden; background: var(--track); border-radius: 3px; }
.assess-track i { display: block; width: 0; height: 100%; background: var(--hud); border-radius: inherit; transition: width .3s ease; }
.assess-label { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.assess-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.assess-actions > .btn { display: inline-flex; align-items: center; padding: .6rem 1.2rem; border-radius: var(--radius-control); font-weight: 600; }
.assess-actions .assess-grade { flex: 1 1 100%; margin-top: 0; }
.assess-tip { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.assess-tip i { color: var(--text-amber); }
.assess-done > i { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--on-energy); background: var(--energy); border-radius: 50%; font-size: 1.5rem; }
.assess-done h2 { font-size: 1.35rem; font-weight: 650; }

/* Chapter explanation: the guiding questions as numbered items, then the
   comparison with the chapter summary. */
.explanation-panel { max-width: 760px; }
.explanation-panel .assess-head h1 { margin: 0; color: var(--ink); font-size: clamp(1.35rem, 2.8vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; }
.explanation-list .recall-check-question { display: block; margin-bottom: .6rem; }
.recall-check-item.is-written { border-left-color: var(--hud); }
.recall-check-item.is-written .recall-check-number { color: var(--text-blue); background: var(--tint-blue); border-color: transparent; }
.recall-check-item.is-unclear { background: var(--surface-2); border-left-color: var(--text-amber); }
.recall-check-item.is-unclear .recall-check-number { color: var(--text-amber); background: var(--tint-amber); border-color: transparent; }
.explanation-list .assess-field { min-height: 5.5rem; }
.explanation-next { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.explanation-check summary { display: flex; justify-content: center; width: 100%; padding: .7rem 1rem; list-style: none; cursor: pointer; }
.explanation-check summary::-webkit-details-marker { display: none; }
.explanation-check[open] summary { color: var(--on-action); background: var(--action); border-color: var(--action); border-style: solid; }
.explanation-check .assess-answer { margin-top: .85rem; }
.explanation-summary { color: var(--read-ink, var(--ink)); font-family: var(--read-font, var(--font-read)); line-height: 1.7; }
.explanation-summary p:last-child { margin-bottom: 0; }
.explanation-next .assess-tip a { font-weight: 650; }

/* Daily review: the card's tags on top, the tip before the answer, then the
   four ratings, each with its colour on the icon and the next interval. */
.review-card .assess-chip.is-chapter { color: var(--text-green); background: var(--tint-green); }
.review-card .assess-counter { margin-left: auto; }
.review-edit { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--muted); border: 1px solid var(--line); border-radius: .55rem; text-decoration: none; }
.review-edit:hover, .review-edit:focus-visible { color: var(--text-blue); background: var(--active-bg); border-color: var(--line-strong); }
.review-card .assess-tip { margin: 0 0 1rem; }
.review-reveal > summary.assess-reveal { display: flex; justify-content: center; width: 100%; padding: .75rem 1rem; color: var(--text-blue); background: var(--active-bg); border: 1px dashed var(--line-strong); border-radius: var(--radius-control); list-style: none; cursor: pointer; text-align: center; }
.review-reveal > summary.assess-reveal::-webkit-details-marker { display: none; }
.review-reveal > summary.assess-reveal:hover, .review-reveal > summary.assess-reveal:focus-visible { color: var(--on-action); background: var(--action); border-color: var(--action); border-style: solid; }
.review-reveal[open] > summary.assess-reveal { display: none; }
.review-reveal .assess-answer { margin-top: 0; }
.review-rate { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.review-rate .study-actions { margin-top: 0; }
.review-card .review-rating { gap: .15rem; padding: .7rem .4rem .65rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-top: 3px solid var(--rating, var(--line-strong)); border-radius: var(--radius-control); box-shadow: none; transition: background-color .15s ease, border-color .15s ease; }
.review-card .review-rating i { color: var(--rating); font-size: 1.1rem; }
.review-card .review-rating strong { font-size: .9rem; font-weight: 650; }
.review-card .review-rating small { margin-top: 0; color: var(--faint); font-size: .7rem; line-height: 1.3; font-variant-numeric: tabular-nums; opacity: 1; }
.review-card .review-rating.again { --rating: var(--text-red); --rating-bg: var(--tint-red); }
.review-card .review-rating.hard { --rating: var(--text-amber); --rating-bg: var(--tint-amber); }
.review-card .review-rating.good { --rating: var(--text-green); --rating-bg: var(--tint-green); }
.review-card .review-rating.easy { --rating: var(--text-blue); --rating-bg: var(--tint-blue); }
.review-card .review-rating:hover, .review-card .review-rating:focus-visible { color: var(--ink); background: var(--rating-bg); border-color: var(--rating); }
.review-card .review-rating:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.assess-done .review-summary span { gap: .1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--muted); font-size: .75rem; }
.assess-done .review-summary strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.assess-done .review-summary span:nth-child(1) strong { color: var(--text-red); }
.assess-done .review-summary span:nth-child(2) strong { color: var(--text-amber); }
.assess-done .review-summary span:nth-child(3) strong { color: var(--text-green); }
.assess-done .review-summary span:nth-child(4) strong { color: var(--text-blue); }

@media (max-width: 575.98px) {
  .assess-scale button { font-size: .8rem; }
  .recall-check-item { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .9rem; }
  .assess-score-row { grid-template-columns: 5rem minmax(0, 1fr) 3rem; gap: .6rem; }
  .assess-footer .btn, .assess-actions > .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .assess-meter i, .assess-track i, .assess-scale button, .assess-grade button { transition: none; }
}