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

/* ───────────────────────────────────────────────────────────────
   反脆弱 / antifragile track extras
   Builds on the philosophy sheet (which itself @imports the shared RL
   base): kicker, source-note, takeaway, position-grid, lesson-flow,
   trade-table, lesson-grid, mini-flow are all inherited. Below: the few
   components specific to this track — the fragile/robust/antifragile
   triad cards and a payoff-canvas helper.
   ─────────────────────────────────────────────────────────────── */

/* the founding三元组 cards — fragile (red) / robust (grey) / antifragile (green) */
.triad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.triad-grid div {
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: 8px;
  background: var(--bg-elev);
  padding: 12px 14px;
}
.triad-grid .fragile    { border-top-color: var(--bad); }
.triad-grid .robust     { border-top-color: var(--text-dim); }
.triad-grid .antifragile{ border-top-color: var(--ok); }
.triad-grid strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 12px;
}
.triad-grid .fragile strong    { color: var(--bad); }
.triad-grid .robust strong     { color: var(--text-mute); }
.triad-grid .antifragile strong{ color: var(--ok); }
.triad-grid span {
  display: block;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.5;
}

/* payoff / response curves get a slightly taller canvas than the base */
canvas.payoff-canvas {
  width: 100%;
  height: 240px;
  display: block;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

@media (max-width: 820px) {
  .triad-grid { grid-template-columns: 1fr; }
}