/* 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.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); }

/* one review: day buttons that are also bars */
.sr-scap { width: 100%; text-align: center; font-size: 13px; font-weight: 700; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.sr-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.sr-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 6px 2px; border-radius: 12px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--raised); color: var(--text); }
.sr-day b { font: 700 15px var(--sans); }
.sr-well { position: relative; display: flex; align-items: flex-end; width: 22px; height: 52px; border-radius: 6px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.sr-well i { display: block; width: 100%; height: 0; border-radius: 6px; background: var(--violet-bright); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.sr-day.cur { border-color: var(--mint); }
.sr-day.cur .sr-well i { background: var(--mint); }
.sr-static .sr-day { border-width: 1.5px; border-color: var(--line); background: transparent; }
.sr-static .sr-day b { font-size: 13px; color: var(--dim); white-space: nowrap; }
.sr-static .sr-day.best { border-color: var(--mint); }
.sr-static .sr-day.best .sr-well i { background: var(--mint); }

/* why */
.sr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.sr-way { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; }
.sr-way.on { border-color: var(--mint); }
.sr-way b { font: 700 19px var(--sans); color: var(--text); }
.sr-way span { font-size: 15px; line-height: 1.35; color: var(--dim); }
.sr-meter { width: 100%; height: 20px; border-radius: 10px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.sr-meter i { display: block; height: 100%; border-radius: 10px; background: var(--violet-bright); }
.sr-way.on .sr-meter i { background: var(--mint); }

/* 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); }

/* Ebbinghaus */
.sr-man { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sr-man img { width: 170px; max-height: 26vh; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.sr-man.small img { width: 110px; max-height: 16vh; }
.sr-man figcaption { font-size: 13px; font-weight: 700; color: var(--dim); }
.sr-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.sr-br { display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.sr-br span { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.sr-bt { height: 18px; border-radius: 9px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.sr-bt i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--violet); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sr-br.spread .sr-bt i { background: var(--line-strong); }
.sr-bars.done .sr-br.spread .sr-bt i { background: var(--mint); }
.sr-bars.done .sr-br.spread b { color: var(--mint); }
.sr-br b { font: 700 16px var(--mono); color: var(--text); text-align: right; }

/* 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) {
  .sr-hero img { max-height: 28vh; }
  .sr-chart { max-width: 300px; }
  .sr-well { height: 36px; }
  .sr-man.small img { max-height: 12vh; width: 90px; }
  .sr-man img { max-height: 20vh; width: 140px; }
}