/* Mastery app: course library, curriculum browser, session/card study view.
   Ingest progress reuses trivia.css's .trivia-log-*/.plog-* classes on
   purpose — same generic pipeline-log look (foldable, colour-timed,
   copyable — see web/app.js's plog* functions), no need to duplicate it. */

.mastery-course-card {
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-brutal-sm);
  cursor: pointer;
}

.mastery-course-title {
  font-weight: 600;
  font-size: 15px;
}

.mastery-course-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mastery-heading-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Curriculum navigator — shared by course page + session nav card */
.mnav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mnav-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  padding: 8px 10px;
  background: var(--card-2, #f3ede0);
  border: var(--border-width-sm) solid var(--ink);
  font-size: 12px;
}

.mnav-crumb {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 6px;
  cursor: pointer;
  font: inherit;
  border-radius: 2px;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnav-crumb:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

.mnav-crumb.is-here {
  color: var(--ink);
  font-weight: 700;
}

.mnav-crumb-sep {
  color: var(--text-tertiary);
  padding: 0 2px;
  user-select: none;
}

.mnav-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mnav-section {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--card, #fffdf7);
  box-shadow: 3px 3px 0 var(--ink);
}

.mnav-section-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  border: none;
  background: transparent;
  padding: 14px 14px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.mnav-section-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mnav-section-prerequisite {
  border-color: #2f5d8c;
  box-shadow: 3px 3px 0 #2f5d8c;
}

.mnav-section-prerequisite .mnav-section-kicker {
  color: #2f5d8c;
}

.mnav-section-content .mnav-section-kicker {
  color: #c47a12;
}

.mnav-section-extension {
  border-color: #5a4a8a;
  box-shadow: 3px 3px 0 #5a4a8a;
}

.mnav-section-extension .mnav-section-kicker {
  color: #5a4a8a;
}

.mnav-section-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.mnav-section-blurb {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.mnav-section-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.mnav-section > .mnav-study {
  margin: 0 14px 14px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--ink);
  background: var(--card-2, #f3ede0);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.mnav-level-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--card-2, #f3ede0);
  border: var(--border-width-sm) solid var(--ink);
}

.mnav-back {
  border: 1px solid var(--ink);
  background: var(--card, #fffdf7);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.mnav-level-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.mnav-level-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.mnav-level-head > .mnav-study {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--card, #fffdf7);
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.mnav-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mnav-topic {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ink);
  background: var(--card, #fffdf7);
}

.mnav-topic-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 12px 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.mnav-topic-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.mnav-topic-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.mnav-topic-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.mnav-topic-actions .mnav-open,
.mnav-topic-actions .mnav-study {
  flex: 1;
  min-height: 36px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ink);
}

.mnav-topic-actions .mnav-open {
  background: var(--card, #fffdf7);
  color: var(--ink);
}

.mnav-topic-actions .mnav-study {
  background: var(--ink);
  color: var(--card, #fffdf7);
}

.mnav-topic.has-kids .mnav-topic-main:hover {
  background: color-mix(in srgb, var(--card-2, #f3ede0) 80%, transparent);
}

/* Legacy flat heading tree (kept for any leftover callers) */
.mastery-tree-browser {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mastery-tree-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
  line-height: 1.3;
}

.mastery-crumb {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 2px 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.mastery-crumb:last-of-type {
  color: var(--ink);
  font-weight: 600;
}


.mastery-crumb-sep {
  color: var(--text-tertiary);
}

.mastery-tree-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mastery-tree-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  border: var(--border-width-sm) solid var(--ink);
  background: var(--card-2);
  padding: 4px 6px 4px 4px;
}

.mastery-tree-open {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  border: none;
  background: transparent;
  padding: 8px 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.mastery-tree-title {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  font-size: 14px;
}

.mastery-tree-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  color: var(--text-tertiary);
}

.mastery-tree-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--text-tertiary);
  font-size: 18px;
}

.mastery-tree-row .mastery-heading-study-btn,
.mastery-tree-row .mastery-tree-select-btn {
  align-self: center;
  flex-shrink: 0;
}

.mastery-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: var(--border-width-sm) solid var(--ink);
  background: var(--card-2);
  cursor: pointer;
}

.mastery-heading-row.level-1 {
  font-weight: 700;
}

.mastery-heading-row.level-2 {
  margin-left: 16px;
}

.mastery-heading-row.level-3 {
  margin-left: 32px;
  font-size: 13px;
  color: var(--text-secondary);
}

.mastery-heading-row.level-4,
.mastery-heading-row.level-5,
.mastery-heading-row.level-6 {
  margin-left: 48px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.mastery-heading-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mastery-kind-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  vertical-align: middle;
}

.mastery-heading-study-btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

/* Session / cards — high-contrast bordered containers */

.mastery-session {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
}

.mastery-card {
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-brutal);
  padding: 0;
  position: relative;
  overflow: visible;
  margin: 0 2px;
}

.mastery-card.question-extracted {
  box-shadow: 5px 5px 0 var(--cat-blue-soft);
}

.mastery-card.question-generated {
  box-shadow: 5px 5px 0 var(--cat-neutral-soft);
}

.mastery-card-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-2);
  border-bottom: var(--border-width) solid var(--ink);
}

.mastery-card-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-display, var(--font-sans));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.mastery-card-fold,
.mastery-card-close {
  border: var(--border-width-sm) solid var(--ink);
  background: var(--card);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  flex-shrink: 0;
  box-shadow: var(--shadow-brutal-sm);
}

.mastery-card-close {
  font-size: 20px;
}

.mastery-card-content {
  padding: 16px 16px 14px;
  font-size: 15px;
  line-height: 1.55;
  background: var(--card);
}

.mastery-card.is-folded .mastery-card-content,
.mastery-card.is-folded .mastery-card-toolbar {
  display: none !important;
}

.mastery-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 14px;
  margin: 0;
  border-top: var(--border-width) solid var(--ink);
  background: var(--cat-fog);
}

.mastery-card-toolbar .btn {
  min-height: 40px;
  font-size: 12px;
  box-shadow: none;
}

.mastery-q {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mastery-q-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink);
  opacity: 0.65;
}

.mastery-q-part {
  padding: 0;
}

.mastery-q-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.mastery-q-heading .markdown-body,
.mastery-q-heading .markdown-body p {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.mastery-q-setup {
  font-size: 13px;
  color: var(--text-secondary);
  border-left: 4px solid var(--ink);
  padding: 4px 0 4px 12px;
}

.mastery-q-context {
  font-size: 15px;
  color: var(--ink);
  background: var(--cat-neutral-soft);
  padding: 12px 14px;
  border: var(--border-width-sm) solid var(--ink);
}

.mastery-q-aside {
  font-size: 13px;
  color: var(--ink);
  font-style: italic;
  background: var(--cat-orange-soft);
  padding: 10px 12px;
  border: var(--border-width-sm) solid var(--ink);
}

.mastery-q-key_line {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--cat-purple-soft);
  padding: 14px 16px;
  border: var(--border-width) solid var(--ink);
  box-shadow: var(--shadow-brutal-sm);
}

.mastery-q-prompt {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  padding: 14px 16px;
  border: var(--border-width) solid var(--ink);
  background: var(--cat-blue-soft);
  box-shadow: var(--shadow-brutal-sm);
}

.mastery-q-prompt .mastery-q-label {
  opacity: 1;
  font-size: 11px;
}

.mastery-q-summary {
  font-size: 15px;
  font-weight: 700;
  background: var(--cat-yellow-soft);
  padding: 10px 12px;
  border: var(--border-width-sm) solid var(--ink);
}

.mastery-q-body {
  font-size: 15px;
}

.mastery-prose .katex-display {
  margin: 0.75em 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.mastery-math-fallback {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.92em;
  white-space: pre-wrap;
}

.mastery-card-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: var(--border-width-sm) solid var(--ink);
  margin-bottom: 10px;
}

.mastery-card-kind.question-extracted {
  background: var(--cat-green-soft);
}

.mastery-card-kind.question-generated {
  background: var(--cat-neutral-soft);
  opacity: 0.85;
}

.mastery-card-kind.answer {
  background: var(--cat-sky-soft);
}

.mastery-card-kind.mark {
  background: var(--cat-purple-soft);
}

.mastery-card-parent-link {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-decoration: none;
}

.mastery-coverage-chips {
  display: none;
}

.mastery-card-body {
  font-size: 15px;
  line-height: 1.55;
}

.mastery-card-source-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.mastery-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mastery-card-actions .btn {
  flex: 1 1 auto;
  min-width: 120px;
}

.mastery-mark-answer-box {
  margin-top: 10px;
}

.mastery-mark-image {
  max-width: 100%;
  border: var(--border-width) solid var(--ink);
  margin-top: 10px;
}

/* Mark rendering — three independent visual channels, Section 6:
   correctness -> chip color, error_mode -> icon/badge, depth -> a
   separate fill-meter, never reusing color for both axes. */

.mastery-mark-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mastery-mark-component {
  border: var(--border-width-sm) solid var(--ink);
  background: var(--card-2);
  padding: 8px 10px;
}

.mastery-mark-component-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mastery-mark-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex: none;
}

.mastery-mark-chip.correctness-correct {
  background: var(--success-fill);
}

.mastery-mark-chip.correctness-partial {
  background: var(--warning-fill);
}

.mastery-mark-chip.correctness-incorrect {
  background: var(--danger-fill);
}

.mastery-mark-chip.correctness-not_attempted {
  background: var(--cat-neutral-soft);
}

.mastery-mark-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mastery-mark-error-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--ink);
  background: var(--cat-orange-soft);
  flex: none;
}

.mastery-mark-depth {
  display: flex;
  gap: 2px;
  flex: none;
}

.mastery-mark-depth-seg {
  width: 6px;
  height: 12px;
  border: 1px solid var(--ink);
  background: var(--card);
}

.mastery-mark-depth-seg.filled {
  background: var(--cat-violet);
}

.mastery-mark-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 22px;
}

.mastery-mark-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--border-width-sm) solid var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mastery-upload-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

/* Documents — source files / exercises / images browser on the course
   detail page, and the click-through viewers for each. */

.mastery-doc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mastery-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: var(--border-width-sm) solid var(--ink);
  background: var(--card-2);
  cursor: pointer;
}

.mastery-doc-icon {
  flex: none;
  font-size: 16px;
}

.mastery-doc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.mastery-doc-meta {
  flex: none;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.mastery-doc-viewer {
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brutal-sm);
  padding: 14px;
  margin-bottom: 14px;
}

.mastery-doc-viewer-image {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.mastery-doc-viewer-pdf {
  width: 100%;
  height: 75vh;
  border: none;
  display: block;
}

/* Pending structural changes (Section 1.7) — surfaced, never silent,
   never auto-applied; a course owner can only dismiss the notice here. */

.mastery-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mastery-pending-row {
  background: var(--cat-orange-soft);
  border: var(--border-width-sm) solid var(--ink);
  padding: 10px 12px;
}

.mastery-pending-title {
  font-weight: 600;
  font-size: 13px;
}

/* Subsession link card (Section 3.1/3.5) — a compact pointer left in the
   PARENT feed when a branch happens; the branch's own cards are never
   inlined here. */

.mastery-subsession-link {
  cursor: pointer;
  background: var(--cat-purple-soft);
  border-style: dashed;
}

.mastery-focus-btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

/* v3 session feed */

.mastery-session-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.mastery-session-row {
  text-align: left;
  width: 100%;
  padding: 14px 14px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.mastery-session-row:hover {
  background: var(--card-2, #f3ede0);
}

.mastery-session-row-title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}

.mastery-session-row-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.mastery-card-head {
  display: none;
}

.mastery-nav-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow: auto;
}

.mastery-nav-topic {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  border-radius: 4px;
}

.mastery-nav-topic.selected {
  border-color: var(--ink);
  font-weight: 600;
}

.mastery-nav-topic.level-2 { margin-left: 12px; }
.mastery-nav-topic.level-3 { margin-left: 24px; }
.mastery-nav-topic.level-4 { margin-left: 36px; }
.mastery-nav-topic.level-5 { margin-left: 48px; }

.mastery-answer-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.mastery-answer-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.mastery-answer-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--ink);
}

.mastery-qr-img {
  display: block;
  margin: 8px auto;
  width: 180px;
  height: 180px;
}

.mastery-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mastery-area-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.mastery-area-chip {
  border: 1px solid var(--ink);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg);
  border-radius: 4px 0 0 4px;
}

.mastery-area-thread-btn {
  border: 1px solid var(--ink);
  border-left: none;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg);
  border-radius: 0 4px 4px 0;
}

.mastery-answer-thumb-key {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-size: 22px;
}

.mastery-area-chip.strength-strong { background: color-mix(in srgb, #6f6 25%, var(--card)); }
.mastery-area-chip.strength-ok { background: color-mix(in srgb, #fd6 25%, var(--card)); }
.mastery-area-chip.strength-weak { background: color-mix(in srgb, #f66 25%, var(--card)); }

.mastery-image-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed var(--ink);
  background: var(--cat-blue-soft);
  padding: 2px 8px;
  margin: 0 2px;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
}

.mastery-image-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mastery-image-popup[hidden] {
  display: none;
}

.mastery-image-popup img {
  max-width: min(96vw, 900px);
  max-height: 90vh;
  object-fit: contain;
  background: #111;
}

.mastery-image-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.mastery-session-footer {
  margin-top: 8px;
}

.mastery-coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}