/* Maturity (finance) lesson. All rules scoped under .mat-* */
.mat-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mat-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.mat-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)); }
.mat-hero.sm img { width: 200px; max-height: 22vh; }

.mat-t { fill: var(--dim); font: 600 12.5px var(--sans); }

/* ---------- the lanes ---------- */
.mat-lanes { width: 100%; max-width: 360px; display: block; overflow: visible; }
.mat-lb { fill: var(--text); font: 700 13px var(--sans); }
.mat-sk { fill: var(--faint); font: 600 12px var(--sans); }
.mat-rs.r2 { fill: #5B8CFF; }
.mat-rs.r5 { fill: #FB9679; }
.mat-rt { fill: #0A0E1A; font: 800 12.5px var(--sans); }
.mat-tick { stroke: var(--line); stroke-width: 1; }
.mat-ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mat-blk rect { stroke-width: 1.5; }
.mat-blk.r2 rect { fill: #3A5BB8; stroke: #8FB0FF; }
.mat-blk.r5 rect { fill: #B8583A; stroke: #FFB49A; }
.mat-blk text { fill: #fff; font: 800 13px var(--sans); text-anchor: middle; }
.mat-blk { animation: matPop .3s ease-out; }
@keyframes matPop { from { opacity: .3; } }
.mat-done circle { fill: rgba(63,214,154,.2); stroke: var(--mint); stroke-width: 1.5; }
.mat-done path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mat-cur line { stroke: var(--gold); stroke-width: 2; }
.mat-cur circle { fill: var(--gold); }
.mat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; }
.mat-st { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.mat-st span { font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.mat-st b { font: 800 15px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.mat-st.a { border-color: rgba(143,176,255,.4); }
.mat-sc.noint .mat-st .int { display: none; }
.mat-sc:not(.noint) .mat-st .sold { display: none; }
.mat-dim .choice:not(.right):not(.wrong) { display: none; }

/* ---------- bars ---------- */
.mat-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.mat-br { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.mat-br span { font: 700 14px var(--sans); color: var(--dim); }
.mat-br em { font: 800 17px var(--sans); font-style: normal; color: var(--text); text-align: right; }
.mat-br i { grid-column: 1 / -1; height: 18px; border-radius: 9px; background: var(--surface); overflow: hidden; }
.mat-br i b { display: block; height: 100%; width: var(--w); background: var(--violet-bright); border-radius: 9px; transition: width 1s ease-out; }
.mat-br.q i b { width: 0; background: var(--gold); }
.mat-bars.go .mat-br.q i b { width: var(--w); }
.mat-br.q em { color: var(--gold); }

/* ---------- which is due first ---------- */
.mat-o { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.mat-o b { font: 700 16px var(--sans); }
.mat-o small { font: 600 13px var(--sans); color: var(--dim); }
.mat-o em { display: none; font: 800 13px var(--sans); font-style: normal; color: var(--gold); }
.mat-due.show .mat-o em { display: block; }

@media (max-height: 700px) {
  .mat-sc { gap: 7px; }
}