/* ─────────────────────────────────────────────
   Senior Adventure — Micro-task system
   Per-content-card interactive tasks that earn XP/coins.
   Six variants: mc, tf, ttl, odd, cloze, match.
───────────────────────────────────────────── */

.sa-microtask {
  margin: 14px 0 22px;
  padding: 0;
  background:
    radial-gradient(ellipse at top right, rgba(248,191,199,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(252,208,220,0.35) 0%, transparent 50%),
    linear-gradient(155deg, rgba(252,244,235,0.98) 0%, rgba(250,220,228,0.85) 55%, rgba(248,200,212,0.70) 100%);
  border: 1.5px solid rgba(232,144,156,0.45);
  border-radius: var(--sa-r);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(200,100,120,0.08) inset,
    0 4px 20px -6px rgba(180,80,100,0.28),
    0 1px 4px rgba(200,120,140,0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Decorative corner accent */
.sa-microtask::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(248,191,199,0.5) 0%, transparent 70%);
  pointer-events: none;
}
/* meta strip */
.sa-microtask .mt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(232,144,156,0.2);
  flex-wrap: wrap;
}
.sa-microtask .mt-prompt,
.sa-microtask .mt-body,
.sa-microtask .mt-feedback {
  padding-left: 18px;
  padding-right: 18px;
}
.sa-microtask .mt-prompt { padding-top: 14px; }
.sa-microtask .mt-body   { padding-bottom: 18px; }
.sa-microtask .mt-feedback { padding-bottom: 14px; margin-bottom: 0; }
.sa-microtask .mt-xp-pill { margin-left: auto; }

.sa-microtask .mt-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  background: linear-gradient(150deg, #f0a0b0 0%, #d46070 55%, #c05060 100%);
  color: #fff;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 10px -2px rgba(192,80,96,0.5);
}
.sa-microtask .mt-type-pill::before {
  content: '✦';
  font-size: 9px;
  opacity: 0.9;
}
.sa-microtask .mt-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  background: linear-gradient(150deg, #fce8ee 0%, #f0b0c0 60%, #e890a0 100%);
  color: #7a1828;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1.5px solid #d07888;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 3px 10px -3px rgba(192,80,120,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.sa-microtask.is-correct .mt-type-pill,
.sa-microtask.is-correct .mt-xp-pill[data-state="first-try"],
.sa-microtask.is-correct .mt-xp-pill[data-state="retry"] {
  background: linear-gradient(180deg, #95c178 0%, #4f7d3c 100%);
  color: #fff;
  border-color: #3a6029;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.sa-microtask.is-revealed .mt-type-pill,
.sa-microtask.is-revealed .mt-xp-pill[data-state="revealed"] {
  background: linear-gradient(180deg, #7c5c20 0%, #5a3e10 100%);
  color: #fff;
  border-color: #3a2608;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px -2px rgba(80,50,10,0.5), 0 1px 0 rgba(255,255,255,0.15) inset;
}
.sa-microtask.is-correct {
  border-color: var(--sa-green, #6c8c5a);
  border-left-color: var(--sa-green-deep, #4a6b3b);
  background:
    linear-gradient(180deg, rgba(232,243,210,0.7) 0%, rgba(245,243,218,0.4) 80%, rgba(230,235,200,0.3) 100%);
}
.sa-microtask.is-revealed {
  border-color: var(--sa-amber, #d18a3a);
  border-left-color: var(--sa-amber-deep, #a06520);
  background:
    linear-gradient(180deg, rgba(252,231,194,0.65) 0%, rgba(248,226,188,0.4) 80%, rgba(238,210,168,0.35) 100%);
}

/* XP burst — floats up and fades when a task completes */
.sa-microtask .mt-xp-burst {
  position: absolute;
  top: 12px;
  right: 18px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #ffd96b 0%, #d9881e 100%);
  color: #4a2900;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.03em;
  border-radius: 14px;
  border: 2px solid #a25e10;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px -6px rgba(150,80,10,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  pointer-events: none;
  animation: sa-xp-burst 1.7s ease forwards;
  z-index: 5;
}
@keyframes sa-xp-burst {
  0%   { transform: translateY(0)   scale(0.6); opacity: 0; }
  15%  { transform: translateY(-6px)  scale(1.15); opacity: 1; }
  35%  { transform: translateY(-14px) scale(1);    opacity: 1; }
  100% { transform: translateY(-52px) scale(0.9);  opacity: 0; }
}

/* Header lock / mastery pill */
.sa-pill.sa-pill-lock {
  background: linear-gradient(180deg, rgba(255,235,180,0.85) 0%, rgba(248,210,140,0.80) 100%);
  border: 1.5px solid #b07a28;
  color: #5a3a08;
  padding: 5px 12px 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 2px 6px -2px rgba(180,120,30,0.35);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.sa-pill.sa-pill-lock .sa-lock-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: #7a4f10;
}
.sa-pill.sa-pill-lock .sa-lock-num {
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  color: #5a3a08;
}
.sa-pill.sa-pill-lock .sa-lock-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a5a10;
  border-left: 1px solid rgba(120,80,10,0.25);
  padding-left: 8px;
  margin-left: 2px;
}
.sa-pill.sa-pill-lock.is-unlocked {
  background: linear-gradient(180deg, #ffe892 0%, #f0b438 100%);
  border-color: #6a4a08;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 0 2px rgba(255,225,120,0.6),
    0 4px 16px -2px rgba(220,160,40,0.55);
  animation: sa-lock-unlock 0.7s ease;
}
.sa-pill.sa-pill-lock.is-unlocked .sa-lock-icon { color: #6a4500; }
@keyframes sa-lock-unlock {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.sa-microtask .mt-prompt {
  font-family: var(--sa-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--sa-ink);
  margin: 0 0 14px;
  line-height: 1.45;
}
.sa-microtask .mt-body { font-size: 14px; line-height: 1.6; color: var(--sa-ink-soft); }
.sa-microtask .mt-feedback {
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.sa-microtask .mt-feedback.wrong { background: #fee2e2; color: #991b1b; border-left: 3px solid #ef4444; }
.sa-microtask .mt-feedback.right { background: #dcfce7; color: #166534; border-left: 3px solid #4ade80; }
.sa-microtask .mt-feedback.reveal { background: rgba(252,238,211,0.8); color: #7a3a18; border-left: 3px solid #d4828e; }

/* ───── mc (mini multiple choice) ───── */
.sa-microtask[data-microtask="mc"] .mt-body,
.sa-microtask[data-microtask="mc"] .mt-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: mc-opt;
  padding-bottom: 18px;
}

/* When mt-opt buttons are direct children (no .mt-body wrapper) — 2×2 grid */
.sa-microtask[data-microtask="mc"]:has(> .mt-opt) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  counter-reset: mc-opt;
}
.sa-microtask[data-microtask="mc"]:has(> .mt-opt) > .mt-prompt,
.sa-microtask[data-microtask="mc"]:has(> .mt-opt) > .mt-feedback { grid-column: 1 / -1; }
.sa-microtask[data-microtask="mc"] .mt-opt {
  position: relative;
  text-align: left;
  padding: 13px 16px 13px 58px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.35);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sa-ink);
  cursor: pointer;
  counter-increment: mc-opt;
  transition: border-color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.sa-microtask[data-microtask="mc"] .mt-opt::before {
  content: counter(mc-opt, upper-alpha);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: linear-gradient(150deg, #fce8ee 0%, #f4c0cc 100%);
  border: 1.5px solid rgba(210,130,150,0.45);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  color: #c05068;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
}
.sa-microtask[data-microtask="mc"] .mt-opt:hover:not(:disabled) {
  border-color: rgba(212,130,142,0.7);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 14px -4px rgba(192,80,100,0.22), 0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-1px);
}
.sa-microtask[data-microtask="mc"] .mt-opt:hover:not(:disabled)::before {
  background: linear-gradient(150deg, #f0a0b0 0%, #d46070 100%);
  color: #fff;
  border-color: #c85068;
  box-shadow: 0 2px 6px -2px rgba(192,80,100,0.45), 0 1px 0 rgba(255,255,255,0.3) inset;
  transform: translateY(-50%) scale(1.08);
}
.sa-microtask[data-microtask="mc"] .mt-opt.chosen-right {
  border-color: #6abf52;
  background: rgba(240,253,244,0.95);
  box-shadow: 0 3px 12px -4px rgba(80,160,80,0.25), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.sa-microtask[data-microtask="mc"] .mt-opt.chosen-right::before {
  background: linear-gradient(150deg, #90d070, #4a9038);
  color: #fff;
  border-color: #3a7a28;
  box-shadow: 0 2px 6px -2px rgba(80,160,80,0.4);
}
.sa-microtask[data-microtask="mc"] .mt-opt.chosen-wrong {
  border-color: #f06060;
  background: rgba(255,248,248,0.95);
  box-shadow: 0 3px 12px -4px rgba(200,60,60,0.2), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.sa-microtask[data-microtask="mc"] .mt-opt.chosen-wrong::before {
  background: linear-gradient(150deg, #f87878, #d82828);
  color: #fff;
  border-color: #b81818;
  box-shadow: 0 2px 6px -2px rgba(200,40,40,0.4);
}
.sa-microtask[data-microtask="mc"] .mt-opt:disabled { cursor: not-allowed; opacity: 0.65; transform: none; }

/* ───── tf — single statement ───── */
.sa-microtask[data-microtask="tf"] [data-tf] {
  display: flex;
  gap: 10px;
  padding: 0 0 18px;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls {
  display: flex;
  gap: 10px;
  padding: 0 18px;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.35);
  border-radius: 14px;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 14px; font-weight: 800;
  color: var(--sa-ink);
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: border-color 0.15s ease, background 0.15s ease,
              color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(192,80,100,0.22), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf[data-choice="true"]:hover:not(:disabled) {
  border-color: #6abf52; background: rgba(240,253,244,0.95); color: #2a6a18;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf[data-choice="false"]:hover:not(:disabled) {
  border-color: rgba(200,80,80,0.6); background: rgba(255,248,248,0.95); color: #991b1b;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf.chosen-right {
  background: linear-gradient(150deg, #90d070 0%, #4a9038 100%);
  border-color: #3a7a28; color: #fff;
  box-shadow: 0 2px 8px -2px rgba(80,160,80,0.45);
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf.chosen-wrong {
  background: linear-gradient(150deg, #f87878 0%, #d82828 100%);
  border-color: #b81818; color: #fff;
  animation: sa-mt-shake 0.3s;
}
.sa-microtask[data-microtask="tf"] .mt-tf-controls .mt-tf:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

/* ── [data-tf] variant (HTML uses [data-tf] instead of .mt-tf-controls) ── */
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf {
  flex: 1; padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.35); border-radius: 14px;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 14px; font-weight: 800; color: var(--sa-ink); cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: border-color 0.15s ease, background 0.15s ease,
              color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(192,80,100,0.22), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf[data-choice="true"]:hover:not(:disabled) {
  border-color: #6abf52; background: rgba(240,253,244,0.95); color: #2a6a18;
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf[data-choice="false"]:hover:not(:disabled) {
  border-color: rgba(200,80,80,0.6); background: rgba(255,248,248,0.95); color: #991b1b;
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf.chosen-right {
  background: linear-gradient(150deg, #90d070 0%, #4a9038 100%);
  border-color: #3a7a28; color: #fff; box-shadow: 0 2px 8px -2px rgba(80,160,80,0.45);
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf.chosen-wrong {
  background: linear-gradient(150deg, #f87878 0%, #d82828 100%);
  border-color: #b81818; color: #fff; animation: sa-mt-shake 0.3s;
}
.sa-microtask[data-microtask="tf"] [data-tf] .mt-tf:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

/* ───── tf — batch (3-5 rows, .mt-tf-set) ───── */
.sa-microtask[data-microtask="tf"] .mt-tf-set {
  display: flex;
  flex-direction: column;
  padding: 0 0 18px;
  counter-reset: tf-row;
}
.sa-microtask[data-microtask="tf"] .mt-tf-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(232,144,156,0.14);
  counter-increment: tf-row;
  position: relative;
  transition: background 0.25s ease;
}
.sa-microtask[data-microtask="tf"] .mt-tf-row:last-child { border-bottom: none; }
/* row number badge */
.sa-microtask[data-microtask="tf"] .mt-tf-row::before {
  content: counter(tf-row);
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: linear-gradient(150deg, #fce8ee 0%, #f4c0cc 100%);
  border: 1.5px solid rgba(210,130,150,0.4);
  border-radius: 50%;
  font-size: 11px; font-weight: 900;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  color: #c05068;
  text-align: center;
  line-height: 22px;
  transition: background 0.25s ease, color 0.25s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
}
/* correct row */
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-correct {
  background: rgba(240,253,244,0.6);
}
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-correct::before {
  content: '✓';
  background: linear-gradient(150deg, #90d070 0%, #4a9038 100%);
  border-color: #3a7a28;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(80,160,80,0.4);
}
/* revealed row */
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-revealed {
  background: rgba(254,246,234,0.5);
}
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-revealed::before {
  background: linear-gradient(150deg, #fce8b0 0%, #d9a030 100%);
  border-color: #a87020;
  color: #fff;
}
/* statement text */
.sa-microtask[data-microtask="tf"] .mt-tf-stmt {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sa-ink);
  line-height: 1.45;
}
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-correct .mt-tf-stmt { color: #1a5a2a; }
.sa-microtask[data-microtask="tf"] .mt-tf-row.row-revealed .mt-tf-stmt { color: #7a3808; }
/* True / False pill buttons in batch rows */
.sa-microtask[data-microtask="tf"] .mt-tf-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf {
  padding: 7px 18px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.4);
  border-radius: 999px;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 12px; font-weight: 800;
  color: var(--sa-ink);
  cursor: pointer;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08);
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -3px rgba(192,80,100,0.25);
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf[data-choice="true"]:hover:not(:disabled) {
  border-color: #6abf52; color: #2a6a18; background: rgba(240,253,244,0.9);
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf[data-choice="false"]:hover:not(:disabled) {
  border-color: #f06060; color: #991b1b; background: rgba(255,248,248,0.9);
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf.chosen-right {
  background: linear-gradient(150deg, #90d070 0%, #4a9038 100%);
  border-color: #3a7a28; color: #fff;
  box-shadow: 0 2px 6px -2px rgba(80,160,80,0.45);
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf.chosen-wrong {
  background: linear-gradient(150deg, #f87878 0%, #d82828 100%);
  border-color: #b81818; color: #fff;
  animation: sa-mt-shake 0.3s;
}
.sa-microtask[data-microtask="tf"] .mt-tf-btns .mt-tf:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
/* TODO placeholder rows — visible to authors, non-interactive */
.sa-microtask[data-microtask="tf"] .mt-tf-row[data-todo] {
  opacity: 0.38;
  pointer-events: none;
}
.sa-microtask[data-microtask="tf"] .mt-tf-row[data-todo]::before {
  background: rgba(220,200,210,0.3);
  border-color: rgba(200,180,190,0.35);
  color: rgba(160,130,150,0.7);
}
.sa-microtask[data-microtask="tf"] .mt-tf-row[data-todo] .mt-tf-stmt {
  font-style: italic;
  color: rgba(100,80,90,0.5);
}
.sa-microtask[data-microtask="tf"] .mt-tf-row[data-todo] .mt-tf-btns .mt-tf {
  background: rgba(255,255,255,0.5);
  border-color: rgba(220,160,170,0.2);
  color: rgba(150,120,130,0.5);
}

/* ───── ttl + odd (button list with right/wrong feedback) ───── */
/* Buttons are direct children of .sa-microtask (no .mt-body wrapper).
   Labels A—, B—, C— are already in button text, so no ::before badge. */
.sa-microtask[data-microtask="ttl"],
.sa-microtask[data-microtask="odd"] {
  padding-bottom: 14px;
}
/* target both .mt-opt (generated) and legacy .mt-stmt / .mt-item */
.sa-microtask[data-microtask="ttl"] .mt-opt,
.sa-microtask[data-microtask="ttl"] .mt-stmt,
.sa-microtask[data-microtask="odd"] .mt-opt,
.sa-microtask[data-microtask="odd"] .mt-item {
  display: block;
  width: calc(100% - 36px);
  margin: 0 18px 8px;
  text-align: left;
  padding: 13px 16px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.35);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sa-ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.sa-microtask[data-microtask="ttl"] .mt-opt:last-of-type,
.sa-microtask[data-microtask="ttl"] .mt-stmt:last-of-type,
.sa-microtask[data-microtask="odd"] .mt-opt:last-of-type,
.sa-microtask[data-microtask="odd"] .mt-item:last-of-type { margin-bottom: 0; }
.sa-microtask[data-microtask="ttl"] .mt-opt:hover:not(:disabled),
.sa-microtask[data-microtask="ttl"] .mt-stmt:hover:not(:disabled),
.sa-microtask[data-microtask="odd"] .mt-opt:hover:not(:disabled),
.sa-microtask[data-microtask="odd"] .mt-item:hover:not(:disabled) {
  border-color: rgba(212,130,142,0.7);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 14px -4px rgba(192,80,100,0.22), 0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-1px);
}
.sa-microtask[data-microtask="ttl"] .chosen-right,
.sa-microtask[data-microtask="odd"] .chosen-right {
  border-color: #6abf52;
  background: rgba(240,253,244,0.95);
  box-shadow: 0 3px 12px -4px rgba(80,160,80,0.25), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.sa-microtask[data-microtask="ttl"] .chosen-wrong,
.sa-microtask[data-microtask="odd"] .chosen-wrong {
  border-color: #f06060;
  background: rgba(255,248,248,0.95);
  box-shadow: 0 3px 12px -4px rgba(200,60,60,0.2), 0 1px 0 rgba(255,255,255,0.8) inset;
  animation: sa-mt-shake 0.3s;
}
.sa-microtask[data-microtask="ttl"] .mt-opt:disabled,
.sa-microtask[data-microtask="ttl"] .mt-stmt:disabled,
.sa-microtask[data-microtask="odd"] .mt-opt:disabled,
.sa-microtask[data-microtask="odd"] .mt-item:disabled { cursor: not-allowed; opacity: 0.65; transform: none; }

/* ───── cloze ───── */
/* Cloze has no .mt-body wrapper; text paragraph is a direct child.
   Token bank uses .mt-toks (generated) — keep .mt-bank as legacy alias. */
.sa-microtask[data-microtask="cloze"] {
  padding-bottom: 14px;
}
.sa-microtask[data-microtask="cloze"] > p:not(.mt-prompt) {
  padding: 0 18px;
  line-height: 1.9;
}
.sa-microtask[data-microtask="cloze"] [data-blank] {
  display: inline-block; min-width: 90px; padding: 4px 10px; margin: 0 2px;
  background: #fff; border: 1.5px dashed var(--sa-rule); border-radius: 6px;
  font-weight: 700; color: var(--sa-coral); cursor: pointer;
  text-align: center; font-size: 13px;
}
.sa-microtask[data-microtask="cloze"] [data-blank]:focus-visible {
  outline: 2px solid var(--sa-coral); outline-offset: 2px;
}
.sa-microtask[data-microtask="cloze"] [data-blank].filled-right {
  border-style: solid; border-color: var(--sa-green, #4ade80);
  background: var(--sa-green-soft, #f0fdf4); color: #166534;
}
.sa-microtask[data-microtask="cloze"] [data-blank].filled-wrong {
  border-color: #ef4444; background: #fee2e2; color: #991b1b;
}
/* .mt-toks is the generated class; .mt-bank is the legacy alias */
.sa-microtask[data-microtask="cloze"] .mt-toks,
.sa-microtask[data-microtask="cloze"] .mt-bank {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 18px 0;
}
.sa-microtask[data-microtask="cloze"] .mt-tok {
  padding: 6px 12px; background: var(--sa-bg-warm); border: 1.5px solid var(--sa-rule);
  border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--sa-ink);
}
.sa-microtask[data-microtask="cloze"] .mt-tok:hover:not(:disabled) { border-color: var(--sa-coral); }
.sa-microtask[data-microtask="cloze"] .mt-tok.used { opacity: 0.35; cursor: not-allowed; }
.sa-microtask[data-microtask="cloze"] .mt-tok.selected { border-color: var(--sa-coral); background: var(--sa-coral-soft, #fef2f2); }

/* ───── match ───── */
.sa-microtask[data-microtask="match"] .mt-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-microtask[data-microtask="match"] .mt-col { display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; margin: 0; }
.sa-microtask[data-microtask="match"] .mt-col li {
  padding: 10px 12px; background: #fff; border: 1.5px solid var(--sa-rule);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--sa-ink);
}
.sa-microtask[data-microtask="match"] .mt-col li:hover:not(.matched):not(.used) { border-color: var(--sa-coral); }
.sa-microtask[data-microtask="match"] .mt-col li.selected { border-color: var(--sa-coral); background: var(--sa-coral-soft, #fef2f2); }
.sa-microtask[data-microtask="match"] .mt-col li.matched { border-color: var(--sa-green, #4ade80); background: var(--sa-green-soft, #f0fdf4); cursor: default; }
.sa-microtask[data-microtask="match"] .mt-col li.mismatch { animation: sa-mt-shake 0.3s; border-color: #ef4444; }

/* ───── activity (write-then-lock-in) ───── */
.sa-microtask[data-microtask="activity"] .mt-body {
  display: flex; flex-direction: column; gap: 12px;
}
.sa-microtask[data-microtask="activity"] .mt-activity-input {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255,250,228,0.96) 0%, rgba(252,242,210,0.92) 100%);
  border: 1.5px solid var(--sa-rule, #d8c89a);
  border-radius: var(--sa-r, 14px);
  font-family: var(--sa-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--sa-ink, #2c2418);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(120,80,30,0.06) inset;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-microtask[data-microtask="activity"] .mt-activity-input:focus {
  outline: none;
  border-color: var(--sa-gold-deep, #b08a3a);
  box-shadow: 0 0 0 3px rgba(217,166,74,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.sa-microtask[data-microtask="activity"] .mt-activity-input::placeholder {
  color: rgba(120,90,40,0.45);
  font-style: italic;
}
.sa-microtask[data-microtask="activity"] .mt-activity-input.mt-activity-locked {
  background:
    linear-gradient(180deg, rgba(245,235,200,0.55) 0%, rgba(232,222,185,0.45) 100%);
  border-color: var(--sa-green, #6c8c5a);
  color: var(--sa-ink-soft, #4a3e22);
}
.sa-microtask[data-microtask="activity"] .mt-activity-lockin {
  align-self: flex-start;
  padding: 10px 22px;
  background: linear-gradient(180deg, var(--sa-gold, #d9a64a), var(--sa-gold-deep, #b08a3a));
  color: #fff;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(176,138,58,0.5), 0 1px 0 rgba(0,0,0,0.08);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sa-microtask[data-microtask="activity"] .mt-activity-lockin:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(176,138,58,0.55), 0 1px 0 rgba(0,0,0,0.08);
}
.sa-microtask[data-microtask="activity"] .mt-activity-lockin:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  font-style: italic;
  letter-spacing: 0.06em;
}
.sa-microtask[data-microtask="activity"] .mt-activity-model {
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(232,243,210,0.65) 0%, rgba(220,235,195,0.45) 100%);
  border: 1.5px solid var(--sa-green, #6c8c5a);
  border-left: 4px solid var(--sa-green-deep, #4a6b3b);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sa-ink, #2c2418);
}
.sa-microtask[data-microtask="activity"] .mt-activity-model strong {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 9px;
  background: linear-gradient(180deg, var(--sa-green, #6c8c5a), var(--sa-green-deep, #4a6b3b));
  color: #fff;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* ───── Animations + quest ring pulse ───── */
@keyframes sa-mt-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes sa-quest-hit {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.sa-quest-ring.sa-quest-hit svg { animation: sa-quest-hit 0.6s ease; }

/* ─────────────────────────────────────────────
   Adventure overrides — sa-book-notes
   These intentionally use !important to win over the
   inline <style> block each lesson currently inlines.
───────────────────────────────────────────── */
.sa-book-notes {
  margin: 14px 0 10px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1.5px solid rgba(140,200,170,0.45) !important;
  border-radius: var(--sa-r, 14px) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px -6px rgba(80,160,120,0.2), 0 1px 0 rgba(255,255,255,0.9) inset !important;
  font-size: 14px !important;
  color: var(--sa-ink, #2c2418) !important;
}
.sa-book-notes summary {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 16px !important;
  background: linear-gradient(135deg, #a8d8be 0%, #80c4a0 100%) !important;
  color: #1a4a32 !important;
  font-family: var(--sa-display, 'Outfit', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: background 0.15s ease !important;
}
.sa-book-notes summary:hover { background: linear-gradient(135deg, #b8e4ca 0%, #90d0b0 100%) !important; }
.sa-book-notes summary::-webkit-details-marker { display: none !important; }
.sa-book-notes summary::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,0.35) !important;
  border-radius: 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4a32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.sa-book-notes summary::after {
  content: "▾" !important;
  margin-left: auto !important;
  font-size: 14px !important;
  color: rgba(26,74,50,0.7) !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}
.sa-book-notes:not([open]) summary::after { transform: rotate(-90deg) !important; }
.sa-book-notes[open] > ul,
.sa-book-notes[open] > div {
  padding: 14px 20px 16px !important;
  background: repeating-linear-gradient(
    transparent, transparent 27px,
    rgba(140,200,170,0.12) 27px, rgba(140,200,170,0.12) 28px
  ) !important;
  background-color: #f5fbf7 !important;
}
.sa-book-notes ul {
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  color: var(--sa-ink, #2c2418) !important;
  line-height: 1.85 !important;
  font-size: 14px !important;
}
.sa-book-notes li { margin-bottom: 4px !important; }

/* Book-notes "I read this and wrote it down" checkbox (injected by JS) */
.sa-book-notes .sa-bn-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 9px 12px !important;
  background: linear-gradient(180deg, rgba(200,232,210,0.5) 0%, rgba(192,232,209,0.35) 100%) !important;
  border: 1.5px solid rgba(140,200,170,0.6) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--sa-display, 'Outfit', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sa-ink, #2c2418) !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}
.sa-book-notes .sa-bn-check:hover:not(.is-done) {
  background: linear-gradient(180deg, rgba(200,232,210,0.8) 0%, rgba(192,232,209,0.65) 100%) !important;
  border-color: #80c4a0 !important;
  transform: translateY(-1px) !important;
}
.sa-book-notes .sa-bn-check input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important; height: 22px !important;
  margin: 0 !important;
  border: 1.5px solid #80c4a0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease !important;
}
.sa-book-notes .sa-bn-check input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #95c178 0%, #4f7d3c 100%) !important;
  border-color: #3a6029 !important;
}
.sa-book-notes .sa-bn-check input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -55%) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  font-family: var(--sa-display, 'Outfit', sans-serif) !important;
  line-height: 1 !important;
}
.sa-book-notes .sa-bn-check .sa-bn-text {
  flex: 1 !important;
  letter-spacing: 0.02em !important;
}
.sa-book-notes .sa-bn-check .sa-bn-xp {
  padding: 3px 11px !important;
  background: linear-gradient(180deg, #b8e4ca 0%, #80c4a0 100%) !important;
  color: #1a4a32 !important;
  border: 1.5px solid #60a880 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}
.sa-book-notes .sa-bn-check.is-done {
  background: linear-gradient(180deg, rgba(232,243,210,0.7) 0%, rgba(220,235,195,0.55) 100%) !important;
  border-color: var(--sa-green, #6c8c5a) !important;
  cursor: default !important;
}
.sa-book-notes .sa-bn-check.is-done .sa-bn-xp {
  background: linear-gradient(180deg, #95c178 0%, #4f7d3c 100%) !important;
  color: #fff !important;
  border-color: #3a6029 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18) !important;
}

/* Topbar pulse animations — fires whenever XP or coins are awarded so the
   silent number-change in the corner is visually obvious. */
@keyframes sa-pulse-xp {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(217,166,74,0.6); }
  35%  { transform: scale(1.10); box-shadow: 0 0 0 6px rgba(217,166,74,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(217,166,74,0); }
}
@keyframes sa-pulse-coins {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(240,180,56,0.6); }
  35%  { transform: scale(1.10); box-shadow: 0 0 0 6px rgba(240,180,56,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(240,180,56,0); }
}
.sa-pulse-xp    { animation: sa-pulse-xp    0.7s ease; }
.sa-pulse-coins { animation: sa-pulse-coins 0.7s ease; }

/* Brief flash on the lock pill number when it ticks up */
@keyframes sa-lock-num-flash {
  0%   { transform: scale(1);   color: #5a3a08; text-shadow: 0 0 0 rgba(0,0,0,0); }
  30%  { transform: scale(1.32); color: #6a4500; text-shadow: 0 0 12px rgba(255,210,90,0.95); }
  100% { transform: scale(1);   color: #5a3a08; text-shadow: 0 0 0 rgba(0,0,0,0); }
}
.sa-pill.sa-pill-lock .sa-lock-num.sa-lock-num-flash {
  animation: sa-lock-num-flash 0.7s ease;
  display: inline-block;
}

/* ─────────────────────────────────────────────
   Adventure overrides — sa-textarea
   Parchment look: gradient warm bg, two-tone border,
   subtle inner shadow, italic placeholder.
───────────────────────────────────────────── */
.sa-textarea {
  background:
    linear-gradient(180deg, rgba(255,250,228,0.96) 0%, rgba(252,242,210,0.92) 100%);
  border: 1.5px solid var(--sa-rule, #d8c89a);
  border-radius: var(--sa-r, 14px);
  padding: 14px 16px;
  font-family: var(--sa-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--sa-ink, #2c2418);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(120,80,30,0.06) inset;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sa-textarea::placeholder {
  color: rgba(120,90,40,0.45);
  font-style: italic;
}
.sa-textarea:focus {
  border-color: var(--sa-gold-deep, #b08a3a);
  box-shadow: 0 0 0 3px rgba(217,166,74,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
  outline: none;
}

/* ───── cloze-text / cloze type-in (text-input fill-the-blank) ───── */
.sa-microtask[data-microtask="cloze-text"] .mt-body,
.sa-microtask[data-microtask="cloze"]:has(.mt-cloze-check) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(220,160,170,0.35);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--sa-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 4px rgba(180,80,100,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-input:focus {
  outline: none;
  border-color: rgba(200,100,120,0.5);
  box-shadow: 0 0 0 3px rgba(232,144,156,0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-input.is-wrong {
  border-color: #ef4444;
  animation: sa-mt-shake 0.3s;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-input.is-correct {
  border-color: #6abf52;
  background: rgba(240,253,244,0.95);
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-input:disabled {
  opacity: 0.75;
  cursor: default;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-check {
  flex-shrink: 0;
  padding: 10px 20px;
  background: linear-gradient(150deg, #f0a0b0 0%, #d46070 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px -3px rgba(192,80,96,0.45);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-check:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(192,80,96,0.5);
}
:is(.sa-microtask[data-microtask="cloze-text"],
    .sa-microtask[data-microtask="cloze"]) .mt-cloze-check:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Worksheet card ────────────────────────────────────────────────── */
.sa-worksheet { display: flex; flex-direction: column; gap: 18px; }
.sa-worksheet-eyebrow {
  display: inline-block;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sa-teal-deep, #0f766e);
  margin-bottom: 8px;
}
.sa-worksheet-copy h3 {
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--sa-ink, #0f172a);
}
.sa-worksheet-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sa-text, #475569);
  max-width: 62ch;
}
.sa-worksheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.sa-ws-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  border-radius: 12px;
  text-decoration: none;
  background: var(--sa-surface, rgba(255,255,255,0.96));
  border: 1.5px solid rgba(15,23,42,0.10);
  border-top: 3px solid rgba(15,23,42,0.12);
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.sa-ws-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(15,23,42,0.30);
}
.sa-ws-tile:has(.build)  { border-top-color: #3b82f6; }
.sa-ws-tile:has(.apply)  { border-top-color: #f59e0b; }
.sa-ws-tile:has(.master) { border-top-color: #22c55e; }
.sa-ws-tile:has(.exam)   { border-top-color: #8b5cf6; }
.sa-ws-tile::after {
  content: "→";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sa-teal-deep, #0f766e);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sa-ws-tile:hover::after { opacity: 1; transform: translateX(0); }
.sa-ws-tag {
  display: inline-block;
  font-family: var(--sa-display, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 7px;
  width: fit-content;
}
.sa-ws-tag.build  { background: #dbeafe; color: #1e40af; }
.sa-ws-tag.apply  { background: #fef3c7; color: #92400e; }
.sa-ws-tag.master { background: #dcfce7; color: #166534; }
.sa-ws-tag.exam   { background: #ede9fe; color: #6b21a8; }
.sa-ws-label {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--sa-text, #475569);
}

/* ── Lesson UX: action key, pills, divider, bridge, outcomes ── */
.sa .sa-action-bar {
  position: sticky; top: 52px; z-index: 39;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 9px 16px; margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--sa-rule, #e6e6e6);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sa .sa-action-bar-title {
  font-weight: 800; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sa-ink-soft, #64748b);
}
.sa .sa-action-key-item { display: inline-flex; align-items: center; gap: 7px; }
.sa .sa-action-chip {
  padding: 2px 10px; border-radius: 999px; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.sa .sa-action-gloss { font-size: 12.5px; color: var(--sa-ink-soft, #475569); }
.sa .sa-action-chip.act-copy   { background: #2563eb; }
.sa .sa-action-chip.act-read   { background: #16a34a; }
.sa .sa-action-chip.act-do     { background: #7c3aed; }
.sa .sa-action-chip.act-answer { background: #d97706; }

.sa .sa-action-pill { display: inline-block; vertical-align: middle;
  margin-right: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.sa .sa-action-pill.act-copy   { background: #2563eb; }
.sa .sa-action-pill.act-read   { background: #16a34a; }
.sa .sa-action-pill.act-do     { background: #7c3aed; }
.sa .sa-action-pill.act-answer { background: #d97706; }

.sa .sa-lesson-break {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0; padding: 12px 16px; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 10px, #ffedd5 10px, #ffedd5 20px);
  border: 1px dashed #d97706; font-weight: 700; color: #9a3412;
}

.sa .sa-bridge {
  margin: 0 0 10px; padding: 8px 12px;
  border-left: 3px solid #16a34a; background: #f0fdf4;
  border-radius: 0 8px 8px 0; font-size: 14px; color: #166534;
}
.sa .sa-bridge b { color: #14532d; }

.sa .sa-outcomes-card .sa-outcome-chip {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #1e293b; color: #fff; font-weight: 700; font-size: 12px;
  margin-right: 6px; }
.sa .sa-outcomes-card .sa-outcome-stmt { color: var(--sa-ink-soft, #475569); }
.sa .sa-outcomes-card .sa-outcomes-dots { margin: 10px 0 0 18px; }
.sa .sa-outcomes-card .sa-outcomes-dots li { margin: 4px 0; font-weight: 600; }

/* ── Lesson UX: "In this lesson" roadmap ── */
.sa .sa-roadmap-card .sa-roadmap-hint {
  margin: 2px 0 12px; font-size: 13px; color: var(--sa-ink-soft, #64748b);
}
.sa .sa-roadmap-list { list-style: none; margin: 0; padding: 0; }
.sa .sa-roadmap-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--sa-rule, #eef1f4);
}
.sa .sa-roadmap-list li:last-child { border-bottom: 0; }
.sa .sa-roadmap-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
}
.sa .sa-roadmap-step { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; }
.sa .sa-roadmap-act {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; color: #fff;
}
.sa .sa-roadmap-dot.act-copy,   .sa .sa-roadmap-act.act-copy   { background: #2563eb; }
.sa .sa-roadmap-dot.act-read,   .sa .sa-roadmap-act.act-read   { background: #16a34a; }
.sa .sa-roadmap-dot.act-do,     .sa .sa-roadmap-act.act-do     { background: #7c3aed; }
.sa .sa-roadmap-dot.act-answer, .sa .sa-roadmap-act.act-answer { background: #d97706; }

/* ── Lesson UX: prominent "copy into your book" panels (pilot-scoped) ── */
.sa[data-action-key="on"] .sa-book-notes {
  border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
  background: #eff6ff; border-radius: 10px;
  padding: 8px 16px; margin: 14px 0 22px;
}
.sa[data-action-key="on"] .sa-book-notes > summary {
  font-weight: 800; color: #1e3a8a; cursor: pointer; list-style: none;
}
.sa[data-action-key="on"] .sa-book-notes > summary::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  vertical-align: -2px; margin-right: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sa[data-action-key="on"] .sa-book-notes ul { color: #1e3a5f; margin: 8px 0 4px; }

/* ── Lesson UX: interleaved "copy now" prompts (read a bit → write a bit) ── */
.sa[data-action-key="on"] .sa-copy-now {
  margin: 14px 0; padding: 12px 16px;
  border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
  background: #eff6ff; border-radius: 10px;
}
.sa[data-action-key="on"] .sa-copy-now-tag {
  display: inline-block; margin-bottom: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: #2563eb; padding: 2px 10px; border-radius: 999px;
}
.sa[data-action-key="on"] .sa-copy-now p { margin: 0; color: #1e3a5f; font-size: 14.5px; line-height: 1.55; }

/* ── Lesson UX: copy highlights + batch cues (read a bit → write the highlights) ── */
.sa[data-action-key="on"] mark.sa-copy-key {
  background: linear-gradient(transparent 52%, #bfdbfe 52%);
  color: inherit; padding: 0 1px; border-radius: 2px;
  text-decoration: none; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sa[data-action-key="on"] .sa-copy-cue {
  margin: 12px 0 18px; padding: 5px 0 5px 11px;
  border-left: 3px solid #2563eb;
  font-size: 13.5px; font-weight: 700; color: #1e40af;
}
.sa-copy-key-inline {
  background: linear-gradient(transparent 52%, #bfdbfe 52%);
  font-weight: 700; padding: 0 2px;
}

/* roadmap copy badge */
.sa[data-action-key="on"] .sa-roadmap-copy {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: #dbeafe; color: #1e40af; font-size: 10.5px; font-weight: 800;
  letter-spacing: .02em; vertical-align: middle;
}

/* ── Lesson UX: SVG icons replacing emoji (pencil = copy, bars = pause) ── */
.sa[data-action-key="on"] .sa-copy-cue::before {
  content: ''; display: inline-block; width: 15px; height: 15px;
  vertical-align: -2px; margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sa[data-action-key="on"] .sa-roadmap-copy::before {
  content: ''; display: inline-block; width: 11px; height: 11px;
  vertical-align: -1px; margin-right: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sa[data-action-key="on"] .sa-lesson-break::before {
  content: ''; display: inline-block; width: 18px; height: 18px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d97706'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}