/* biglearn — interactive block styling. Blocks sit in chapter flow as raised
   paper cards; the decision-tree outcome uses the signature dark terminal card. */

.block {
  background: var(--surface-card);
  border: var(--border-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-4);
  padding: var(--space-10);
  margin: var(--space-14) 0;
}

.block-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--tracking-kicker);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}
.block-kicker::before { content: "// "; }

.block-title {
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  color: var(--text-strong);
  margin: 0 0 var(--space-8);
}

.block .opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: var(--border-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-8);
  margin: var(--space-4) 0;
  font: inherit;
  font-size: var(--t-body-s);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.block .opt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.block .opt:active:not(:disabled) { transform: translate(1px, 1px); }
.block .opt:disabled { cursor: default; }
.block .opt .key { font-family: var(--font-mono); color: var(--text-muted); margin-right: var(--space-4); }

.block .opt.correct { border-color: var(--green); }
.block .opt.correct .key { color: var(--green); }
.block .opt.wrong { border-color: var(--accent-lo); }
.block .opt.picked { box-shadow: var(--inset-hairline); }

.explanation {
  font-size: var(--t-body-xs);
  color: var(--text-secondary);
  border-left: 2px solid var(--border);
  padding-left: var(--space-6);
  margin: var(--space-4) 0 var(--space-8);
}

.block-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-secondary);
}

.quiz-q { margin-bottom: var(--space-14); }
.quiz-prompt { font-weight: var(--fw-semibold); margin: 0 0 var(--space-5); }
.quiz-prompt .qnum { font-family: var(--font-mono); color: var(--text-muted); font-weight: var(--fw-regular); margin-right: var(--space-3); }

/* ---------- checklist ---------- */

.checklist-item {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.checklist-item:last-of-type { border-bottom: none; }
.checklist-item .check { font-family: var(--font-mono); color: var(--text-muted); white-space: pre; flex-shrink: 0; }
.checklist-item.done .check { color: var(--accent); }
.checklist-item.done .checklist-label { color: var(--text-muted); text-decoration: line-through; }
.checklist-detail { display: block; font-size: var(--t-body-xs); color: var(--text-muted); }

/* ---------- flashcards ---------- */

.flashcard {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: var(--border-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-14);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.flashcard:hover { border-color: var(--accent); }
.flashcard .face-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.flashcard img { max-height: 260px; max-width: 100%; border-radius: var(--radius-sm); margin-bottom: var(--space-6); }
.flashcard-actions { display: flex; gap: var(--space-6); margin-top: var(--space-8); }
.flashcard-empty { cursor: default; }
.flashcard-empty:hover { border-color: var(--border); }
.flashcard-modes { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.block .btn.on { border-color: var(--accent); color: var(--accent); }

/* ---------- comparison table ---------- */

.block .cmp-wrap { overflow-x: auto; }
.block table.cmp { border-collapse: collapse; width: 100%; font-size: var(--t-body-s); }
.block .cmp th, .block .cmp td { border: var(--border-line); padding: var(--space-4) var(--space-6); text-align: left; vertical-align: top; }
.block .cmp th { font-family: var(--font-mono); font-size: var(--t-mono-xs); letter-spacing: var(--tracking-kicker); color: var(--text-secondary); }
.block .cmp .row-label { font-weight: var(--fw-semibold); white-space: nowrap; }
.block .cmp tr.hl td { border-left: 2px solid var(--accent); }
.block .cmp tr.hl .row-label::after { content: " ●"; color: var(--accent); }

/* ---------- hotspot ---------- */

.hotspot-stage { position: relative; display: inline-block; max-width: 100%; }
.hotspot-stage img { display: block; max-width: 100%; border: var(--border-line); border-radius: var(--radius-sm); }
.spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  background: var(--dark);
  color: var(--amber-hi);
  border: 1px solid var(--amber);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.spot:hover, .spot.open { background: var(--amber); color: var(--dark); }
.spot-panel {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface);
  border: var(--border-line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--t-body-s);
}
.spot-panel .spot-label { font-family: var(--font-mono); font-size: var(--t-mono-xs); color: var(--text-secondary); display: block; margin-bottom: var(--space-2); }

/* ---------- decision tree ---------- */

.tree-crumbs { margin-bottom: var(--space-8); }
.tree-crumb {
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: var(--t-mono-xs);
  color: var(--text-muted); cursor: pointer;
}
.tree-crumb:hover { color: var(--accent); text-decoration: underline; }
.tree-crumb::after { content: " → "; color: var(--text-muted); text-decoration: none; }

.tree-question { font-weight: var(--fw-semibold); font-size: var(--t-body-l); margin: 0 0 var(--space-8); }

.outcome {
  background: var(--dark);
  color: var(--dark-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-5);
  padding: var(--space-14);
}
.outcome .block-kicker { color: var(--dark-mute); }
.outcome-title {
  font-family: var(--font-display);
  font-size: var(--t-display-m);
  font-weight: var(--fw-regular);
  color: var(--amber-hi);
  margin: 0 0 var(--space-6);
}
.outcome-body { font-size: var(--t-body-s); line-height: var(--lh-body); }
.outcome-body a { color: var(--amber-hi); }
.outcome img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--dark-line); margin: var(--space-8) 0; }
.outcome-links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-10); }
.outcome-links a {
  font-family: var(--font-mono); font-size: var(--t-mono-xs);
  color: var(--amber-hi);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-6);
  transition: border-color var(--dur-fast) var(--ease);
}
.outcome-links a:hover { border-color: var(--amber); text-decoration: none; }

/* ---------- custom html ---------- */

.custom-html iframe {
  display: block;
  width: 100%;
  border: var(--border-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}