@import "../../reinforcement_learning/lessons/style.css";

/* Shared additions used across the C++ track (mirrors the FP/SICP sheets). */

.source-note {
  border-left-color: var(--accent-2);
}

.spine {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.principle-card {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 8px;
  padding: 13px 14px;
}

.principle-card .k {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.principle-card .v {
  font-size: 14px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; }
}

.mini-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 18px 0 4px;
}