/* Controlled Substances Act lesson. All rules scoped under .csa-* */
.csa-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.csa-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

.csa-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.csa-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.csa-tile .csa-k { font: 700 12px var(--sans); letter-spacing: .04em; color: var(--dim); }
.csa-tile b { font: 700 20px var(--sans); color: var(--text); }
.csa-tile .csa-s { font-size: 13px; line-height: 1.35; color: var(--dim); }
.csa-fen b { color: #FF8A8A; }
.csa-lsd b { color: var(--mint); }

.csa-loop { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.csa-node rect { fill: rgba(123,92,253,.22); stroke: var(--violet-bright); stroke-width: 1.5; }
.csa-node text { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.csa-arc { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.csa-ahp { fill: var(--gold); }
.csa-node, .csa-arc { transition: opacity .35s; }
.csa-hid { opacity: 0; }

@media (max-height: 700px) {
  .csa-loop { max-width: 300px; }
  .csa-hero img { max-height: 26vh; }
  .csa-tile b { font-size: 18px; }
}