/* Spaced repetition. Everything scoped under .sr-*. */

.sr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sr-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.sr-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.sr-hero.small img { width: 220px; max-height: 22vh; }

/* the chart */
.sr-chart { width: 100%; max-width: 340px; overflow: visible; }
.sr-grid { stroke: var(--line); stroke-width: 1; }
.sr-tk { font: 500 13px var(--sans); fill: var(--dim); }
.sr-yl { font: 700 13px var(--sans); fill: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.sr-cap { font: 600 13px var(--sans); fill: var(--faint); text-anchor: middle; }
.sr-band { fill: rgba(169, 155, 255, .08); }
.sr-goal { stroke: var(--line-strong); stroke-width: 6; stroke-linecap: round; transition: stroke .2s; }
.sr-goal.ok { stroke: var(--mint); }
.sr-gl { font: 700 13px var(--sans); fill: var(--dim); }
.sr-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sr-line.base { stroke: var(--violet-bright); }
.sr-line.after { stroke: var(--mint); }
.sr-line.ghost { stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 2 6; opacity: 0; transition: opacity .3s; }
.sr-line.ghost.on { opacity: .6; }
.sr-line.plan { stroke: var(--mint); }
.sr-line.cram { stroke: var(--red); stroke-dasharray: 2 7; }
.sr-dot { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.sr-dot.rev { fill: var(--mint); }
.sr-dot.end { fill: var(--line-strong); transition: cy .2s; }
.sr-dot.end.ok { fill: var(--mint); }
.sr-dot.cramend { fill: var(--red); }
.sr-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
.sr-keys .k { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.sr-keys .k::before { content: ''; width: 18px; height: 4px; border-radius: 2px; }
.sr-keys .k.plan { color: var(--mint); } .sr-keys .k.plan::before { background: var(--mint); }
.sr-keys .k.cram { color: var(--red); } .sr-keys .k.cram::before { background: var(--red); }

/* three reviews */
.sr-grid3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.sr-chip { min-height: 44px; border-radius: 12px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--raised); color: var(--text); font: 700 14px var(--sans); padding: 0 2px; white-space: nowrap; }
.sr-chip.on { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.sr-chip:disabled { opacity: .6; }
.sr-chip.on:disabled { opacity: 1; }

/* the name: one card's schedule */
.sr-gaps { display: flex; align-items: center; width: 100%; max-width: 340px; }
.sr-gaps span { flex: none; font: 700 13px var(--sans); color: var(--mint); padding: 6px 7px; border-radius: 9px; border: 1.5px solid var(--mint); white-space: nowrap; }
.sr-gaps i { height: 2px; min-width: 6px; background: var(--line-strong); }

/* how long a gap */
.sr-rows { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.sr-rh { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.sr-row { display: grid; grid-template-columns: 76px 1fr 64px; gap: 10px; align-items: center; opacity: .45; transition: opacity .3s; }
.sr-row.in { opacity: 1; }
.sr-row b { font: 700 15px var(--sans); color: var(--text); }
.sr-rt { height: 18px; border-radius: 9px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.sr-rt i { display: block; height: 100%; border-radius: 9px; background: var(--gold); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sr-row em { font-style: normal; font: 700 15px var(--mono); color: var(--gold); text-align: right; white-space: nowrap; }

@media (max-height: 700px) {

@media (max-height: 700px) {
  .sr-hero img { max-height: 28vh; }
  .sr-chart { max-width: 300px; }
}