@import url("../../philosophy/lessons/style.css");

/* ───────────────────────────────────────────────────────────────
   犯罪心理学 / criminal_psychology track extras
   Builds on the philosophy sheet (which @imports the shared RL base):
   kicker, subtitle, callout(ok/warn/takeaway/source-note), mini-flow,
   lesson-flow, toc-grid, toc-card, widget, kpi-grid, prompt-list,
   step-pill, topnav, lesson-nav, math are all inherited — don't redefine.
   Below: only this track's own components.
   ─────────────────────────────────────────────────────────────── */

/* the track's signature: 神话 ↔ 真相 myth-buster (red myth / green evidence) */
.myth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.myth-grid > div {
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: 8px;
  background: var(--bg-elev);
  padding: 12px 14px;
}
.myth-grid .myth  { border-top-color: var(--bad); }
.myth-grid .fact  { border-top-color: var(--ok); }
.myth-grid strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 12px;
}
.myth-grid .myth strong { color: var(--bad); }
.myth-grid .fact strong { color: var(--ok); }
.myth-grid span {
  display: block;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
}

/* the two masters: 理解(心理学) ↔ 追责(法律) */
.verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.verdict-grid > div {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--bg-elev);
  padding: 12px 14px;
}
.verdict-grid .understand { border-left-color: var(--accent, #4f7cff); }
.verdict-grid .blame      { border-left-color: var(--warn); }
.verdict-grid strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.verdict-grid span {
  display: block;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
}

/* horizontal spectrum bar — typologies / risk bands */
.spectrum {
  display: flex;
  margin: 18px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}
.spectrum .band {
  flex: 1;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-mute);
  line-height: 1.5;
}
.spectrum .band:last-child { border-right: 0; }
.spectrum .band strong {
  display: block;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  margin-bottom: 3px;
}

@media (max-width: 820px) {
  .myth-grid, .verdict-grid { grid-template-columns: 1fr; }
  .spectrum { flex-direction: column; }
  .spectrum .band { border-right: 0; border-bottom: 1px solid var(--border); }
  .spectrum .band:last-child { border-bottom: 0; }
}