/* Volatility (finance) lesson. All rules scoped under .vol-* */
.vol-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vol-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* the rides */
.vol-chart { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.vol-grid { stroke: var(--line); stroke-width: 1; }
.vol-ax { fill: var(--faint); font: 600 12px var(--sans); text-anchor: end; }
.vol-yr { text-anchor: middle; }
.vol-l { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vol-calm { stroke: #6EC3FF; }
.vol-wild { stroke: #FF8A7A; }
.vol-nm { font: 800 13px var(--sans); text-anchor: middle; }
.vol-nm-wild { fill: #FF8A7A; } .vol-nm-calm { fill: #6EC3FF; }

/* your money */
.vol-pot { display: flex; align-items: flex-end; gap: 18px; }
.vol-col { position: relative; width: 84px; height: 210px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1.5px solid var(--line-strong); overflow: visible; }
.vol-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 11px 11px; background: linear-gradient(180deg, #FFE08A, var(--gold) 45%, var(--gold-deep)); box-shadow: inset 0 3px 0 rgba(255,255,255,.45); }
.vol-hund { position: absolute; left: -8px; right: -8px; bottom: calc(100% / 1.2); border-top: 2.5px dashed rgba(234,227,215,.6); z-index: 2; }
.vol-hund span { position: absolute; left: 100%; top: -9px; margin-left: 10px; white-space: nowrap; font: 600 12.5px var(--sans); color: var(--dim); }
.vol-val { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding-bottom: 6px; }
.vol-val span { font: 600 12.5px var(--sans); color: var(--dim); }
.vol-val b { font: 800 34px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.vol-val em { font: 800 16px var(--sans); font-style: normal; height: 20px; }
.vol-pot.down .vol-val em { color: var(--red); }
.vol-pot.up .vol-val em { color: var(--mint); }

/* the fear gauge */
.vol-fear { gap: 6px; }
.vol-gh { font: 800 13px var(--sans); letter-spacing: .12em; color: var(--dim); }
.vol-gauge { width: 240px; height: auto; overflow: visible; }
.vol-arc { fill: none; stroke: var(--line-strong); stroke-width: 14; stroke-linecap: round; }
.vol-band { fill: none; stroke: var(--mint); stroke-width: 14; opacity: .55; }
.vol-gt { fill: var(--faint); font: 600 15.5px var(--sans); text-anchor: middle; }
.vol-bt { fill: var(--mint); font: 700 15.5px var(--sans); text-anchor: middle; }
.vol-needle line { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.vol-needle circle { fill: var(--gold); }
.vol-read { fill: var(--text); font: 800 24px var(--sans); text-anchor: middle; }
.vol-range { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 13px var(--sans); }
.vol-range .w { color: #FF8A7A; } .vol-range .c { color: #6EC3FF; }
.vol-rec { font: 700 12.5px var(--sans); color: var(--gold); opacity: 0; transition: opacity .4s; margin-top: -4px; }
.vol-rec.on { opacity: 1; }
.vol-days { display: flex; justify-content: center; align-items: center; gap: 28px; height: 112px; width: 100%; max-width: 340px; }
.vol-d { position: relative; flex: none; width: 76px; height: 100%; display: flex; flex-direction: column; align-items: center; opacity: .18; transition: opacity .25s; }
.vol-d.on { opacity: 1; }
.vol-d i { position: absolute; left: 20%; right: 20%; height: calc(var(--h) * .36); border-radius: 4px; }
.vol-d.up i { bottom: 50%; background: var(--mint); }
.vol-d.dn i { top: 50%; background: var(--red); }
.vol-d em { position: absolute; font: 800 12px var(--sans); font-style: normal; white-space: nowrap; }
.vol-d.up em { bottom: calc(50% + var(--h) * .36 + 2px); color: var(--mint); }
.vol-d.dn em { top: calc(50% + var(--h) * .36 + 2px); color: var(--red); }
.vol-d span { position: absolute; top: calc(50% - 18px); font: 600 12px var(--sans); color: var(--dim); white-space: nowrap; }
.vol-d.dn span { top: calc(50% - 18px); }
.vol-d.up span { top: calc(50% + 4px); }
.vol-days::before { content: ''; position: absolute; }

@media (max-height: 700px) {
  .vol-col { height: 170px; width: 72px; }
  .vol-val b { font-size: 30px; }
  .vol-gauge { width: 190px; }
  .vol-days { height: 96px; }
  .vol-chart { max-width: 340px; }
}