/* Stock market crash lesson. All rules scoped under .smc-* */
.smc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.smc-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }
.smc-hero img { width: 300px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the chart */
.smc-chart { display: block; width: 100%; max-width: 350px; height: auto; overflow: visible; }
.smc-grid { stroke: rgba(169,155,255,.10); stroke-width: 1; }
.smc-ax { fill: var(--faint); font: 600 12px var(--sans); text-anchor: end; }
.smc-line { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.smc-dot { fill: var(--text); }
.smc-rl { fill: var(--gold); font: 600 12px var(--sans); text-anchor: end; }
.smc-rule { fill: var(--gold); opacity: .85; transition: fill .2s, opacity .2s; }
.smc-rule.hit { fill: var(--red); }
.smc-rule.lit { filter: drop-shadow(0 0 4px var(--gold)); }
.smc-pause { stroke: var(--mint); stroke-width: 2; stroke-dasharray: 6 5; }
.smc-pl { fill: var(--mint); font: 700 12px var(--sans); text-anchor: end; }

/* traders */
.smc-t circle { fill: rgba(169,155,255,.16); stroke: rgba(169,155,255,.35); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.smc-t .smc-eye { fill: rgba(169,155,255,.35); stroke: none; }
.smc-t.own circle { fill: var(--gold); stroke: #FFE3A6; }
.smc-t.own .smc-eye { fill: #8A5A12; }
.smc-t.sold circle { fill: var(--red); stroke: #FFB3B3; }
.smc-t.sold .smc-eye { fill: #7A1E1E; }
.smc-new { opacity: 0; transition: opacity .3s; }
.smc-new.in { opacity: 1; }
.smc-new.in circle { fill: var(--mint); stroke: #B8F5DC; }
.smc-new.in .smc-eye { fill: #145C40; }

/* the pause */
.smc-halt { opacity: 0; transition: opacity .25s; pointer-events: none; }
.smc-halt.on { opacity: 1; }
.smc-halt rect { fill: rgba(10,12,24,.9); stroke: var(--mint); stroke-width: 1.5; }
.smc-halt text { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.smc-halt .smc-clock { fill: var(--mint); font: 700 13px var(--mono); }


@media (max-height: 700px) {
  .smc-hero img { max-height: 28vh; }
  .smc-chart { max-height: 210px; }
}