/* Market timing lesson. All rules scoped under .mkt-* */
.mkt-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mkt-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* the chart */
.mkt-fall { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mkt-read { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mkt-read b { font: 800 30px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mkt-d { font: 700 12.5px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.mkt-k { font: 600 12.5px var(--sans); color: var(--faint); }
.mkt-read.in b { color: var(--gold); }
.mkt-read.out b { color: var(--dim); }
.mkt-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mkt-base { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mkt-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mkt-chart.long .mkt-line { stroke-width: 1.6; }
.mkt-cash { fill: none; stroke: var(--dim); stroke-width: 3; stroke-dasharray: 6 5; }
.mkt-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.mkt-tag { font: 700 13.5px var(--sans); color: var(--text); padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.mkt-best { fill: var(--gold); stroke: var(--bg); stroke-width: 1.5; transition: opacity .25s, r .25s; }
.mkt-best.gone { opacity: 0; }
.mkt-ax { display: flex; justify-content: space-between; width: 100%; max-width: 360px; font: 600 12px var(--sans); color: var(--faint); margin-top: -4px; }

/* ten weeks */
.mkt-cal { display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 350px; }
.mkt-wd { font: 700 12px var(--sans); color: var(--faint); text-align: center; }
.mkt-wk { font: 600 12px var(--sans); color: var(--faint); align-self: center; white-space: nowrap; }
.mkt-day { height: 20px; border-radius: 5px; display: grid; place-items: center; font: 700 12px var(--sans); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.mkt-day.on { opacity: 1; transform: none; }
.mkt-day.up { background: rgba(252,192,80,var(--k)); }
.mkt-day.dn { background: rgba(127,105,255,var(--k)); }
.mkt-day.B { background: var(--gold); color: #1A1206; box-shadow: 0 0 10px rgba(252,192,80,.6); }
.mkt-day.W { background: var(--violet-deep); color: #fff; outline: 2px solid var(--violet-bright); outline-offset: -2px; }
.mkt-day.shut { opacity: .5; transform: none; font-weight: 600; color: var(--faint); background: none; border: 1px dashed var(--line); }
.mkt-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 600 12px var(--sans); color: var(--dim); }
.mkt-key i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 16px; margin-right: 5px; border-radius: 4px; font-size: 12px; }
.mkt-key i.b { background: var(--gold); color: #1A1206; }
.mkt-key i.w { background: var(--violet-deep); color: #fff; outline: 2px solid var(--violet-bright); outline-offset: -2px; }

@media (max-height: 700px) {
  .mkt-read b { font-size: 24px; }
  .mkt-day { height: 18px; }
  .mkt-cal { gap: 2px; }
}