/* Practice tab styles (owned by the practice module). Base classes come from
   styles.css; everything here is practice-specific. No inline styles: the
   served CSP drops them, so the mastery bars set their width through
   element.style in dom.ts's bar() and everything else is a class. */

.practice-stack-sm { display: flex; flex-direction: column; gap: 6px; }
.practice-ok-text { color: var(--ok); }
.practice-warn-text { color: var(--warn); }

/* Checklist marks and rows */
.practice-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--fg-muted); display: inline-grid; place-items: center;
  font-size: 0.85rem; font-weight: 800; color: transparent; line-height: 1;
}
.practice-check.done { border-color: var(--ok); background: var(--ok); color: #fff; }
.practice-row { cursor: pointer; }
.practice-row:not(.clickable) { cursor: default; }
.practice-row .list-title { overflow-wrap: anywhere; }

/* Percentages coloured on the mastery scale (red < 40%, orange < 85%, green) */
.practice-pct { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-muted); }
.practice-pct.ok { color: var(--ok); }
.practice-pct.warn { color: var(--warn); }
.practice-pct.bad { color: var(--bad); }
.practice-days.bad { color: var(--bad); font-weight: 600; }

/* Skills grouped by course */
.practice-group { margin: 4px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.practice-group-block { gap: 6px; }
.practice-skill-cell { gap: 6px; }
.practice-skill-cell .bar { width: 100%; }
.practice-course-filter { width: auto; max-width: 200px; min-height: 36px; padding: 6px 10px; font-size: 0.86rem; }
.practice-exam .bar { width: 100%; }

/* Skill screen */
.practice-skill .page-head h2 { overflow-wrap: anywhere; }
.practice-micro-lesson { line-height: 1.5; }
.practice-source { padding: 6px 0; border-top: 1px solid var(--line); }
.practice-source:first-of-type { border-top: 0; }
.practice-excerpt { color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.practice-attempt-when { text-align: right; }

/* Problem card */
.practice-prompt { font-size: 1.02rem; line-height: 1.5; }
.practice-units { white-space: nowrap; }
.practice-signature, .practice-starter { max-height: 280px; overflow: auto; font-size: 0.82rem; line-height: 1.45; }
.practice-code { font-family: var(--mono); font-size: 0.86rem; min-height: 200px; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.practice-derivation { min-height: 140px; }
.practice-filename { overflow-wrap: anywhere; }
.practice-class-name { font-weight: 600; }
.practice-notice-line { font-size: 0.86rem; color: var(--fg-muted); }
.practice-grading-notice { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); border-radius: var(--radius-sm); padding: 8px 10px; }
.practice-inline-error { color: var(--bad); font-size: 0.86rem; }
.practice-upload-failure { color: var(--warn); font-size: 0.86rem; }
.practice-copied { min-height: 1.2em; }
.practice-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.practice-watch {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--fg-muted);
  padding: 8px 10px; background: var(--bg-sunken); border-radius: var(--radius-sm);
}
.practice-watch .grow { min-width: 160px; }
.practice-watch .spinner { width: 14px; height: 14px; margin-right: 6px; }
.practice-try-later, .practice-stale { gap: 10px; }

/* Feedback sheet */
.practice-sheet-backdrop {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(0, 0, 0, 0.38);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 12px calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
}
.practice-sheet { width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); gap: 16px; }
@media (min-width: 900px) { .practice-sheet-backdrop { align-items: center; padding: 24px; } }
.practice-verdict-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: #fff;
}
.practice-verdict-icon.ok { background: var(--ok); }
.practice-verdict-icon.bad { background: var(--bad); }
.practice-verdict { font-size: 1.2rem; font-weight: 700; }
.practice-feedback-text { line-height: 1.5; }
.practice-mastery-line { display: grid; grid-template-columns: 56px 1fr 48px; align-items: center; gap: 10px; }
.practice-mastery-line .bar { width: 100%; }
.practice-mastery-pct { text-align: right; font-variant-numeric: tabular-nums; }