/* Kubernetes Beyond YAML — exam practice surface.
   Loaded after learn.css, whose tokens, buttons, .unit and .node it reuses.
   Only what the staged scenario adds lives here.                            */

/* ---------- a scenario in the path or on its own page ---------- */

.exam-head { margin-bottom: 18px; }
.exam-head .back { margin-bottom: 14px; }
.exam-head h1 { margin: 6px 0 10px; font-size: clamp(1.5rem, 4vw, 2.1rem); }

.exam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted);
  font-size: .78rem; font-weight: 750; white-space: nowrap;
}
.exam-chip.good { border-color: var(--good-line); background: var(--good-bg); color: var(--good); }
.exam-chip.warn { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }

.exam-card {
  margin: 0 0 16px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
}
.exam-card .kicker { margin-bottom: 6px; }
.exam-card > * + .kicker { margin-top: 18px; }
.exam-context { margin: 0; color: var(--muted); font-size: .96rem; }
.exam-task { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.5; }
.exam-constraints { margin: 0; padding-left: 1.15rem; font-size: .93rem; }
.exam-constraints li { margin: 5px 0; }
.exam-lede { margin: 0 0 14px; color: var(--muted); font-size: .93rem; }

.exam-hint { margin: 0 0 14px; color: var(--muted); font-size: .88rem; text-align: center; }
.exam-primary { margin-bottom: 10px; }
.exam-secondary { margin-bottom: 10px; }

/* ---------- guided walkthrough ----------

   One step is evidence, a prompt, and the site's standard choice buttons.
   The evidence is the artefact you would have on screen in the exam, so a
   terminal reads as a terminal in both themes — that panel is a screen, not
   a page, and inverting it with the theme would break the illusion.        */

.exam-card.walk { border-left: 5px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
.exam-card.walk .prompt { margin: 16px 0 16px; font-size: clamp(1.05rem, 2.6vw, 1.28rem); }

.exam-ev-list { display: grid; gap: 12px; }
.exam-ev {
  overflow: hidden; border-radius: 12px;
  border: 1px solid #0b1220; background: #0b1220;
  box-shadow: 0 6px 18px #0b122026;
}
.exam-ev-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #172033; color: #b9c6de;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.exam-ev-head .dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #56d364;
}
.exam-ev.file .exam-ev-head .dot { background: var(--blue); }
.exam-ev-head .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-ev-body {
  margin: 0; padding: 13px 15px; overflow-x: auto;
  color: #e6edf7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; line-height: 1.55; white-space: pre; tab-size: 2;
}
.exam-ev.file .exam-ev-body { color: #d8e4f6; }

/* A note is narration, not an artefact: plain prose, no chrome. */
.exam-ev-note { padding: 2px 0; color: var(--muted); font-size: .94rem; }
.exam-ev-note h4 {
  margin: 0 0 4px; color: var(--ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.exam-ev-note .line { margin: 4px 0; line-height: 1.55; }

/* Partial is the verdict the lesson engine has no name for: right idea,
   wrong end state. Amber, between the two the site already uses. */
.opt.partial { border-color: var(--amber); background: var(--amber-bg); }

.exam-teach {
  margin-top: 14px; padding: 14px 16px;
  border-left: 5px solid var(--line); border-radius: 0 12px 12px 0;
  background: var(--paper); font-size: .94rem;
}
.exam-teach .kicker { margin-bottom: 8px; }
.exam-teach .exam-ev-list { margin-bottom: 10px; }
.exam-teach-body .line { margin: 5px 0; line-height: 1.55; }
.exam-teach-again { margin-top: 10px; color: var(--muted); font-size: .86rem; font-weight: 750; }
.exam-teach.right { border-left-color: var(--good); background: var(--good-bg); }
.exam-teach.right .kicker { color: var(--good); }
.exam-teach.partial { border-left-color: var(--amber); background: var(--amber-bg); }
.exam-teach.partial .kicker { color: var(--amber); }
.exam-teach.wrong { border-left-color: var(--bad); background: var(--bad-bg); }
.exam-teach.wrong .kicker { color: var(--bad); }

.exam-closing .line { margin: 5px 0; line-height: 1.6; }
.exam-walk-tally { margin-top: 12px; color: var(--muted); font-size: .88rem; font-weight: 750; }

/* ---------- self-grade ---------- */

/* The scoring notes are the gates. Nothing enforces them, so they are given
   the weight of an instruction rather than a footnote. */
.exam-notes {
  margin: 0 0 16px; padding: 14px 16px;
  border-left: 5px solid var(--amber); border-radius: 0 12px 12px 0;
  background: var(--amber-bg); color: var(--amber);
  font-size: .9rem; font-weight: 650;
}
.exam-notes h4 {
  margin: 0 0 8px; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.exam-notes .line { margin: 5px 0; }
.exam-notes code { background: #b4530915; }

.verify-list { display: grid; gap: 10px; }
.verify-list.locked { pointer-events: none; opacity: .92; }
.verify {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--paper); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.verify:hover { border-color: var(--line-strong); }
.verify.on { border-color: var(--good-line); background: var(--good-bg); }
.verify input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--good); }
.verify .key {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); font-size: .74rem; font-weight: 800;
}
.verify.on .key { border-color: var(--good); background: var(--good); color: #fff; }
.verify-text { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.5; }
.verify-pts {
  flex: 0 0 auto; color: var(--muted);
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.verify.on .verify-pts { color: var(--good); }

.exam-score-live {
  margin-top: 14px; text-align: right;
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- debrief ---------- */

.exam-result {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 0 16px; padding: 20px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--panel); text-align: center;
}
.exam-result b { font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exam-result span { font-size: .95rem; font-weight: 700; }
.exam-result small { color: var(--muted); font-size: .82rem; font-weight: 700; }
.exam-result.pass { border-color: var(--good-line); background: var(--good-bg); }
.exam-result.pass b { color: var(--good); }
.exam-result.short { border-color: var(--bad-line); background: var(--bad-bg); }
.exam-result.short b { color: var(--bad); }

/* One step is a move plus the two things the move can show you. Left and
   Right keep their own colour so the branch is readable at a glance. */
.exam-path { margin: 0; padding-left: 1.4rem; }
.exam-step { margin: 0 0 16px; }
.exam-step::marker { color: var(--blue); font-weight: 800; }
.exam-move { font-weight: 700; line-height: 1.5; }
.exam-move.cont { margin-top: 6px; font-weight: 600; color: var(--muted); }
.exam-branch {
  margin-top: 7px; padding: 8px 12px; border-left: 4px solid var(--line);
  border-radius: 0 9px 9px 0; font-size: .92rem; line-height: 1.5;
}
.exam-branch b { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.exam-branch.left { border-left-color: var(--good); background: var(--good-bg); }
.exam-branch.left b { color: var(--good); }
.exam-branch.right { border-left-color: var(--bad); background: var(--bad-bg); }
.exam-branch.right b { color: var(--bad); }

.exam-card.trap { border-left: 5px solid var(--bad); border-radius: 0 var(--radius) var(--radius) 0; }
.exam-trap .line { margin: 4px 0; line-height: 1.55; }

.exam-docspath {
  padding: 14px 16px; border-radius: 12px; background: var(--paper);
  border: 1px solid var(--line); font-size: .92rem;
}
.exam-docspath .line { margin: 3px 0; word-break: break-word; }

.exam-docs { margin: 0; padding-left: 1.15rem; font-size: .88rem; }
.exam-docs li { margin: 6px 0; word-break: break-word; }

.exam-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* ---------- exam nodes in the lesson path and the index ---------- */

/* Amber, because a scenario is the graded surface — distinct from a lesson
   node, a module video, and the classroom audio. */
.node.exam { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--paper)); }
.node.exam .dot { background: var(--amber); color: #fff; }
.node.exam.partial { border-color: var(--amber); }
.node.exam.done { border-color: var(--good-line); background: var(--good-bg); }
.node.exam.done .dot { background: var(--good); }

/* The guided marker rides on the right of the node, quiet until the
   walkthrough has actually been finished. */
.exam-guided {
  margin-left: auto; padding: 3px 9px; flex: 0 0 auto;
  border: 1px solid var(--blue); border-radius: 999px;
  color: var(--blue); font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.exam-guided.on { background: var(--blue); color: #fff; }

.exam-tiles { grid-template-columns: repeat(4, 1fr); margin: 20px 0 26px; }

@media (max-width: 720px) {
  .exam-tiles { grid-template-columns: repeat(2, 1fr); }
  .exam-actions .btn { width: 100%; }
}