/* Yield curve lesson. All rules scoped under .ycv-* */
.ycv-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ycv-sc > svg { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.ycv-hero img { width: min(300px, 100%); max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.ycv-note { font-size: 12px; color: var(--faint); text-align: center; max-width: 340px; }

/* shared chart bits */
.ycv-gl { stroke: var(--line); stroke-width: 1; }
.ycv-gl.zero { stroke: var(--line-strong); stroke-width: 1.5; }
.ycv-yl { font: 600 12px var(--sans); fill: var(--dim); text-anchor: end; }
.ycv-xl { font: 600 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.ycv-xl.st { text-anchor: start; }
.ycv-cap { font: 600 12px var(--sans); fill: var(--faint); text-anchor: end; }
.ycv-cap.st { text-anchor: start; }
.ycv-date { font: 800 13px var(--sans); fill: var(--gold); text-anchor: end; }

/* the real curve */
.ycv-line { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ycv-dot { fill: var(--mint); stroke: var(--bg); stroke-width: 2; transition: opacity .25s; }
.ycv-dot.hi { fill: var(--gold); r: 7; }
.ycv-tag { font: 800 14px var(--sans); fill: var(--gold); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

/* lock or roll */
.ycv-yr { font: 700 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.ycv-ln { font: 800 16px var(--sans); fill: var(--text); }
.ycv-lsub { font: 600 13px var(--sans); fill: var(--dim); }
.ycv-lock { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; transition: fill .4s; }
.ycv-lock.on { fill: rgba(63,214,154,.16); stroke: var(--mint); }
.ycv-roll { fill: rgba(252,192,80,.10); stroke: var(--gold); stroke-width: 2; }
.ycv-roll.r2 { stroke-dasharray: 6 4; }
.ycv-lv { font: 800 22px var(--sans); fill: var(--text); text-anchor: middle; }

/* the gap chart */
.ycv-rec { fill: rgba(234,227,215,.17); }
.ycv-inv { fill: rgba(216,85,85,.08); }
.ycv-invl { font: 700 12px var(--sans); fill: var(--red); text-anchor: end; opacity: .8; }
.ycv-gline { fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linejoin: round; }
.ycv-cur { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ycv-dip { stroke: var(--bg); stroke-width: 2; }
.ycv-dip.rec { fill: var(--red); }
.ycv-dip.no { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.ycv-dip.virus { fill: var(--gold); }
.ycv-legend { display: flex; gap: 14px; justify-content: center; font: 600 12.5px var(--sans); color: var(--dim); }
.ycv-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.ycv-legend i.rec { background: var(--red); }
.ycv-legend i.no { border: 2.5px solid var(--text); box-sizing: border-box; }
.ycv-legend i.virus { background: var(--gold); }

@media (max-height: 700px) {
  .ycv-sc > svg { max-width: 340px; }
  .ycv-hero img { max-height: 28vh; }
}