/* Tutor tab styles (owned by the tutor module). Only what the base classes in
   styles.css do not cover: the flashcard, the rating grid, the quiz bubbles,
   lecture and finding layout. Colours are the base variables so both schemes
   work; dynamic values never go through a style attribute (the CSP drops it). */

.tutor-bad { color: var(--bad); }
.tutor-warn { color: var(--warn); }

/* Home */
.tutor-home .stats { grid-template-columns: repeat(3, 1fr); }
.tutor-badges { justify-content: flex-end; gap: 6px; }
.tutor-exams { gap: 10px; }
.tutor-exam { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.tutor-exam:first-child { border-top: 0; padding-top: 0; }
.tutor-pipeline { gap: 2px; text-align: left; }

/* Review */
.tutor-review .page-head { margin-bottom: 10px; }
.tutor-progress { font-weight: 600; }
.tutor-card { padding: 18px 18px 16px; }
.tutor-front { font-size: 1.15rem; font-weight: 500; line-height: 1.4; }
.tutor-back { font-size: 1.02rem; line-height: 1.45; }
.tutor-rule { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.tutor-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tutor-rate .btn { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 4px; }
.tutor-rate .btn .kbd, .tutor-review .btn.block .kbd { font-size: 0.68rem; opacity: 0.7; }
.tutor-review .btn.block { gap: 10px; min-height: 48px; }
.btn.tutor-hard { color: var(--warn); }
.btn.primary .kbd { border-color: color-mix(in srgb, var(--accent-fg) 40%, transparent); background: transparent; color: inherit; }
.tutor-done h3 { margin-top: 6px; }
.tutor-done .btn-row { justify-content: center; }
@media (hover: none) and (pointer: coarse) {
  .tutor-review .kbd { display: none; }
}

/* Quiz */
.tutor-quiz { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - var(--tab-h) - env(safe-area-inset-bottom) - 140px); }
.tutor-quiz .page-head { margin-bottom: 0; }
.tutor-quiz-counts { padding: 4px 0; }
.tutor-chat { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tutor-bubble { max-width: 88%; padding: 9px 14px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--line); font-size: 0.98rem; line-height: 1.4; }
.tutor-bubble.assistant { align-self: flex-start; border-bottom-left-radius: 6px; }
.tutor-bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-color: transparent; border-bottom-right-radius: 6px; }
.tutor-bubble.user .tutor-bad { color: inherit; opacity: 0.85; }
.tutor-quiz-bar { position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); padding-top: 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
@media (min-width: 900px) { .tutor-quiz-bar { bottom: 8px; } }
.tutor-quiz-inputrow { align-items: flex-end; }
.tutor-quiz-input { flex: 1; min-height: 44px; max-height: 160px; resize: none; }
.tutor-quiz-inputrow .btn { min-height: 44px; }

/* Lectures */
.tutor-lecture { align-items: flex-start; }
.tutor-lecture-body { gap: 6px; }
.tutor-lecture-error { border-left: 3px solid var(--line); padding-left: 10px; }
.tutor-details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.tutor-summary { margin-top: 8px; }

/* Work */
.tutor-upload { align-items: center; }
.tutor-upload-body { gap: 2px; }
.tutor-findings { gap: 14px; }
.tutor-finding { gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.tutor-finding:first-child { padding-top: 0; border-top: 0; }
.tutor-work-detail pre { font-size: 0.86rem; }

/* Exam form */
.tutor-exam-form input[type="datetime-local"] { min-height: 42px; }

/* Scope bar (Review) and the course picker (Quiz) */
.tutor-scope { gap: 8px; margin-bottom: 12px; }
.tutor-scope-selects { align-items: stretch; }
.tutor-scope-select { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; text-overflow: ellipsis; }
.tutor-scope-line { min-height: 20px; overflow-wrap: anywhere; }
.tutor-scope-name { font-weight: 600; }
.tutor-learn { justify-content: flex-end; }
.tutor-quiz-course { flex: 0 1 180px; width: auto; }
.tutor-quiz .page-head h2 { flex: 0 0 auto; margin-right: auto; }
@media (max-width: 480px) { .tutor-scope-selects { flex-direction: column; } .tutor-scope-select { width: 100%; } }