/* Lesson engine v2. Shared by the desktop and phone shells. */

:root[data-presentation="vivid"], [data-presentation="vivid"] {
  --kc-v2-full-celebration: block;
  --kc-v2-contained-flourish: block;
  --kc-v2-fly-display: block;
}

:root[data-presentation="focused"], [data-presentation="focused"] {
  --kc-v2-full-celebration: none;
  --kc-v2-contained-flourish: block;
  --kc-v2-fly-display: block;
}

:root[data-presentation="clear"], [data-presentation="clear"] {
  --kc-v2-full-celebration: none;
  --kc-v2-contained-flourish: none;
  --kc-v2-fly-display: none;
}

.kc-v2-route {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 32px 56px;
}

.kc-v2-mobile-route {
  min-height: 100%;
  padding: 14px 14px calc(30px + env(safe-area-inset-bottom));
}

kc-lesson-runner,
kc-xp-indicator {
  display: block;
}

.kc-v2-runner {
  color: var(--text);
  font-family: var(--font-sans);
}

.kc-v2-loading,
.kc-v2-error,
.kc-v2-unknown {
  padding: 22px;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-18);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.kc-v2-top {
  position: relative;
  margin-bottom: 18px;
}

.kc-v2-back,
.kc-v2-secondary,
.kc-v2-later {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
}

.kc-v2-title {
  max-width: 24ch;
  margin: 8px 0 5px;
  color: var(--text);
  font: 700 var(--fs-34)/1.14 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.kc-v2-meta,
.kc-v2-context,
.kc-v2-note,
.kc-v2-source-meta,
.kc-v2-sort-help {
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.kc-v2-context {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-12);
  background: var(--blue-050);
}

/* ONE COLUMN PER SECTION THE LESSON ACTUALLY HAS. This was
   `repeat(4, minmax(0, 1fr))`, true of every lesson until a short lesson
   arrived with one section and was drawn as a quarter-width bar beside three
   empty tracks -- a meter reporting three sections that do not exist. Auto
   columns size the grid from the segments the runner emits, so four sections
   lay out exactly as the fixed four did, and one fills the row. */
.kc-v2-section-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
  margin-top: 18px;
}

.kc-v2-section-segment {
  min-width: 0;
}

/* A lone segment spans whatever columns a narrow layout declares below. */
.kc-v2-section-segment:only-child {
  grid-column: 1 / -1;
}

.kc-v2-section-line {
  display: block;
  height: 6px;
  border-radius: var(--r-999);
  background: var(--border-strong);
}

.kc-v2-section-segment[data-state="done"] .kc-v2-section-line {
  background: var(--teal-500);
}

.kc-v2-section-segment[data-state="current"] .kc-v2-section-line {
  background: var(--blue-600);
  box-shadow: 0 0 0 var(--bw-1) var(--acc-ring);
}

.kc-v2-section-label {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--text-3);
  font-size: var(--fs-10-5);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc-v2-section-segment[data-state="done"] .kc-v2-section-label,
.kc-v2-section-segment[data-state="current"] .kc-v2-section-label {
  color: var(--text);
}

.kc-v2-step-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.kc-v2-step-dot {
  flex: 1;
  height: 4px;
  border-radius: var(--r-999);
  background: var(--border);
}

.kc-v2-step-dot[data-state="done"] { background: var(--teal-500); }
.kc-v2-step-dot[data-state="current"] { background: var(--blue-600); }

.kc-v2-step-count {
  margin-left: 5px;
  color: var(--text-3);
  font-size: var(--fs-11);
  white-space: nowrap;
}

.kc-v2-card {
  position: relative;
  overflow: hidden;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-20);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.kc-v2-step {
  padding: 24px 28px 26px;
}

.kc-v2-eyebrow {
  margin: 0 0 8px;
  color: var(--blue-fg);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kc-v2-heading {
  max-width: 30ch;
  margin: 0 0 12px;
  color: var(--text);
  font: 700 var(--fs-26)/1.22 var(--font-display);
  text-wrap: balance;
}

.kc-v2-prose,
.kc-v2-beat,
.kc-v2-stem,
.kc-v2-model,
.kc-v2-readback,
.kc-v2-takeaway,
.kc-v2-boundary {
  max-width: 68ch;
  color: var(--text-2);
  font-size: var(--fs-15);
  line-height: 1.7;
  text-wrap: pretty;
}

.kc-v2-beats,
.kc-v2-takeaways,
.kc-v2-sources,
.kc-v2-readbacks,
.kc-v2-fallback-beats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.kc-v2-beat {
  padding-left: 15px;
  border-left: 3px solid var(--blue-100);
}

.kc-v2-takeaway,
.kc-v2-model,
.kc-v2-boundary {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-14);
  background: var(--surface-2);
}

.kc-v2-boundary { font-size: var(--fs-13); }

.kc-v2-options,
.kc-v2-bands {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.kc-v2-option,
.kc-v2-band,
.kc-v2-term,
.kc-v2-node {
  width: 100%;
  min-height: 48px;
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-14);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.45;
  text-align: left;
}

.kc-v2-option,
.kc-v2-band {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
}

/* `aria-checked` IS THE ONE THAT FIRES ON AN OPTION. The options became a real
   radiogroup — role="radio" + aria-checked — and these two selectors were left
   behind on aria-pressed, so a selected option had been painting nothing at all
   and its tick was `color: transparent` for ever. The bands are still a
   role="group" of toggles and keep aria-pressed, which is correct for them. */
.kc-v2-option[aria-checked="true"],
.kc-v2-option[aria-pressed="true"],
.kc-v2-band[aria-pressed="true"] {
  border-color: var(--blue-600);
  background: var(--blue-050);
  box-shadow: 0 0 0 var(--bw-1) var(--acc-ring);
}

.kc-v2-option-mark {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: var(--bw-1-5) solid var(--border-strong);
  border-radius: var(--r-999);
  color: transparent;
  font-size: var(--fs-11);
}

.kc-v2-option[aria-checked="true"] .kc-v2-option-mark,
.kc-v2-option[aria-pressed="true"] .kc-v2-option-mark,
.kc-v2-band[aria-pressed="true"] .kc-v2-option-mark {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--acc-ink);
}

/* THE DRAWN TICK. It replaces the character "✓", which is a font's opinion of a
   tick at whatever weight the register serves — in `clear`, where the type
   scales by 1.27, a text tick does not scale its stroke with it. `currentColor`
   keeps the whole mechanism above intact: transparent until checked, ink after. */
.kc-v2-mark { width: 12px; height: 12px; display: block; }
.kc-v2-feedback-title .kc-v2-mark { width: 18px; height: 18px; }

.kc-v2-option-text { flex: 1; min-width: 0; text-wrap: pretty; }

/* STATUS IS NEVER COLOUR-ONLY. A graded row carries the tint, the mark and this
   word; strip the colour and it still reports its state twice. Only the CHOSEN
   row can carry one — publicView() strips per-option correct flags, so the
   client cannot honestly mark the row the member did not choose. */
.kc-v2-option-state {
  flex: none;
  font: 500 var(--fs-9-5)/1 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--text-3);
}
.kc-v2-option[data-verdict="correct"] { border-color: var(--teal-500); background: var(--teal-100); }
.kc-v2-option[data-verdict="correct"] .kc-v2-option-state { color: var(--teal-600, var(--text)); }
.kc-v2-option[data-verdict="wrong"]   { border-color: var(--amber-500); background: var(--amber-100); }
.kc-v2-option[data-verdict="wrong"] .kc-v2-option-state { color: var(--text); }

.kc-v2-feedback {
  margin-top: 16px;
  padding: 15px 16px;
  border-radius: var(--r-14);
  background: var(--amber-100);
  color: var(--text);
}

.kc-v2-feedback[data-correct="true"] { background: var(--teal-100); }

.kc-v2-feedback-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--fs-14);
  font-weight: 700;
}

.kc-v2-feedback-body {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.kc-v2-static-award {
  display: inline-flex;
  margin-top: 10px;
  color: var(--amber-500);
  font-size: var(--fs-14);
  font-weight: 800;
}

.kc-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: var(--bw-1) solid var(--border);
}

.kc-v2-primary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--r-999);
  background: var(--blue-600);
  color: var(--acc-ink);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-15);
  font-weight: 700;
}

.kc-v2-primary:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--text-3);
  box-shadow: none;
}

.kc-v2-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.kc-v2-term {
  width: auto;
  min-height: 40px;
  padding: 7px 11px;
  color: var(--blue-fg);
  font-weight: 650;
}

.kc-v2-definition {
  flex: 1 0 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-12);
  background: var(--blue-050);
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.kc-v2-video-facade,
.kc-v2-video-player,
.kc-v2-video-fallback {
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--r-16);
  background: var(--surface-2);
}

.kc-v2-video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kc-v2-video-copy,
.kc-v2-video-fallback {
  padding: 16px;
}

.kc-v2-video-title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.4;
}

.kc-v2-video-player > div,
.kc-v2-video-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.kc-v2-diagram {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.kc-v2-node {
  padding: 13px 15px;
}

.kc-v2-node[aria-expanded="true"] {
  border-color: var(--blue-600);
  background: var(--blue-050);
}

.kc-v2-node-label { font-weight: 700; }
.kc-v2-node-detail {
  display: block;
  margin-top: 6px;
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.kc-v2-edge {
  margin: -3px 0;
  padding-left: 18px;
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 650;
}

.kc-v2-sort {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.kc-v2-sort-item {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-14);
  background: var(--surface);
  color: var(--text);
  cursor: grab;
}

.kc-v2-sort-item:focus-visible,
.kc-v2-option:focus-visible,
.kc-v2-band:focus-visible,
.kc-v2-node:focus-visible,
.kc-v2-primary:focus-visible,
.kc-v2-term:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.kc-v2-sort-number {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-999);
  background: var(--blue-100);
  color: var(--blue-fg);
  font-size: var(--fs-12);
  font-weight: 750;
}

.kc-v2-textarea {
  width: 100%;
  min-height: 150px;
  margin-top: 14px;
  padding: 14px 15px;
  resize: vertical;
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-14);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-15);
  line-height: 1.6;
}

.kc-v2-checkpoint-position {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kc-v2-summary {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--r-16);
  background: var(--teal-100);
}

.kc-v2-summary h3,
.kc-v2-recap-block h3 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: var(--fs-16);
}

.kc-v2-recap-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--bw-1) solid var(--border);
}

.kc-v2-quote {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--blue-600);
  border-radius: 0 var(--r-12) var(--r-12) 0;
  background: var(--blue-050);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.kc-v2-source {
  padding-bottom: 10px;
  border-bottom: var(--bw-1) solid var(--border);
}

.kc-v2-source a {
  color: var(--blue-fg);
  font-size: var(--fs-14);
  font-weight: 650;
}

.kc-v2-xp-total {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 15px;
  padding: 15px 16px;
  border-radius: var(--r-14);
  background: var(--amber-100);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
}

/* App-shell indicator: information, never navigation. */
.kc-v2-xp-indicator {
  min-width: 132px;
  padding: 6px 10px 7px;
  border-radius: var(--r-12);
  background: var(--surface-2);
  color: var(--text);
  pointer-events: none;
}

.kc-v2-xp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  font-size: var(--fs-10-5);
  font-weight: 750;
  white-space: nowrap;
}

.kc-v2-xp-value { color: var(--amber-500); }
.kc-v2-xp-meter {
  display: block;
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: var(--r-999);
  background: var(--border-strong);
}

.kc-v2-xp-fill {
  display: block;
  width: var(--kc-v2-level-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--amber-500);
  transition: width var(--motion-base) var(--ease);
}

.kc-v2-xp-indicator[data-compact="true"] {
  min-width: 82px;
  padding: 5px 7px 6px;
}

.kc-v2-xp-indicator[data-compact="true"] .kc-v2-xp-line {
  gap: 5px;
  font-size: var(--fs-9);
}

.kc-v2-mobile-actions {
  width: auto !important;
  min-width: 56px;
}

/* Celebrations keep controls live: every decorative layer ignores pointers. */
.kc-v2-celebration {
  position: relative;
  z-index: 3;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: var(--r-14);
  background: var(--teal-100);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 750;
}

.kc-v2-flourish::before,
.kc-v2-flourish::after {
  content: "";
  position: absolute;
  display: var(--kc-v2-contained-flourish, none);
  width: 10px;
  height: 10px;
  border-radius: var(--r-999);
  background: var(--blue-600);
  pointer-events: none;
  animation: kcV2Flourish var(--motion-slow) var(--ease) both;
}

.kc-v2-flourish::before { top: 50%; left: 5%; }
.kc-v2-flourish::after { top: 50%; right: 5%; background: var(--teal-500); }

.kc-v2-balloons {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: var(--kc-v2-full-celebration, none);
  overflow: hidden;
  pointer-events: none;
}

.kc-v2-balloon {
  position: absolute;
  bottom: -15%;
  width: 34px;
  height: 43px;
  border-radius: 55% 55% 48% 48%;
  background: var(--blue-600);
  animation: kcV2Balloon calc(var(--motion-slow) * 6) var(--ease) both;
}

.kc-v2-balloon:nth-child(2n) { right: 4%; background: var(--teal-500); animation-delay: var(--motion-step); }
.kc-v2-balloon:nth-child(2n+1) { left: 4%; }
.kc-v2-balloon:nth-child(3n) { width: 26px; height: 34px; animation-delay: calc(var(--motion-step) * 2); }
.kc-v2-balloon:nth-child(4n) { right: 16%; left: auto; background: var(--amber-500); }

.kc-v2-xp-fly {
  position: fixed;
  z-index: 110;
  display: var(--kc-v2-fly-display, block);
  color: var(--amber-500);
  font-size: var(--fs-16);
  font-weight: 850;
  pointer-events: none;
  animation: kcV2XpFly var(--motion-slow) var(--ease) both;
}

.kc-v2-xp-roll .kc-v2-xp-value {
  animation: kcV2Roll var(--motion-base) var(--ease) both;
}

@keyframes kcV2XpFly {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(var(--kc-v2-fly-x), var(--kc-v2-fly-y)) scale(.72); }
}

@keyframes kcV2Roll {
  0% { transform: translateY(20%); }
  55% { transform: translateY(-18%); }
  100% { transform: translateY(0); }
}

@keyframes kcV2Flourish {
  from { transform: translateY(0) scale(.7); }
  to { transform: translateY(-22px) scale(1.2); }
}

@keyframes kcV2Balloon {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-125vh) rotate(8deg); }
}

@media (max-width: 680px) {
  .kc-v2-route { padding: 14px 14px 34px; }
  .kc-v2-step { padding: 19px 17px 21px; }
  .kc-v2-title { font-size: var(--fs-26); }
  .kc-v2-heading { font-size: var(--fs-22); }
  /* Two by two. Row flow, or the auto-flowed columns above would put all four
     on one line again. */
  .kc-v2-section-progress { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-v2-section-label {
    overflow: visible;
    font-size: var(--fs-9);
    text-overflow: clip;
    white-space: normal;
  }
  .kc-v2-footer { align-items: stretch; flex-direction: column; }
  .kc-v2-primary { width: 100%; }
  .kc-v2-later { align-self: center; }
}

@media (max-width: 280px) {
  .kc-v2-section-progress { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .kc-v2-xp-fly,
  .kc-v2-balloons,
  .kc-v2-flourish::before,
  .kc-v2-flourish::after { display: none !important; }

  .kc-v2-xp-fill,
  .kc-v2-xp-value { transition: none !important; animation: none !important; }
}