/* Studio streaks — the plan card's week bar, flower and milestone chip (docs/studio-streaks.md).
   Tokens follow the library page (dark default, cream via studio-prefs). */
:root {
  --st-track: rgba(242,231,222,.12);
  --st-petal-line: rgba(242,231,222,.28);
  --st-mauve-soft: rgba(208,154,154,.14);
  --st-sage: #b3c2a2;
  --st-sage-fill: #8e9d7d;
  --st-sage-soft: rgba(142,157,125,.22);
  --st-breath: cubic-bezier(.45,0,.25,1);
}
:root[data-theme="cream"] {
  --st-track: rgba(31,26,24,.10);
  --st-petal-line: rgba(31,26,24,.22);
  --st-mauve-soft: rgba(163,112,112,.14);
  --st-sage: #56664a;
  --st-sage-soft: rgba(142,157,125,.20);
}

/* The plan card is a box now: its header row stays the link, the streak blocks sit under it. */
.card.plan-box { overflow: hidden; }
.card.plan-box:active { transform: none; }
.plan-box > .plan-card { transition: transform .3s var(--ease); }
.plan-box > .plan-card:active { transform: scale(.985); }

.st-sec { border-top: 1px solid var(--line); padding: 14px 18px 16px; }
.st-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-lab { font-size: 1rem; font-weight: 400; }
.st-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: var(--st-sage-soft); color: var(--st-sage); font-size: .85rem; }
.st-say { font-size: .95rem; margin-top: 10px; color: var(--tape-dim); }

.st-bar { display: flex; gap: 6px; margin-top: 10px; }
.st-bar i { flex: 1; height: 16px; border-radius: 9px; background: var(--st-track); position: relative; overflow: hidden; }
.st-bar i b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 9px; background: linear-gradient(90deg, var(--mauve-lift), var(--mauve)); transform-origin: center bottom; }
.st-bar.full i b { background: var(--st-sage-fill); }

.st-frow { display: flex; align-items: center; gap: 16px; }
.st-flower { flex: none; width: 116px; height: 116px; }
.st-flower svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Grow/scale from the petal's base (the flower's centre): fill-box is drawn the same in every browser. */
.st-pg, .st-clip { transform-box: fill-box; transform-origin: 50% 100%; }
.st-fill { fill: url(#stPetalGrad); }
.st-fut { fill: none; stroke: var(--st-petal-line); stroke-width: 1.1; }
.st-cur { fill: none; stroke: var(--mauve); stroke-width: 1.4; }
.st-miss { fill: none; stroke: var(--mauve-lift); stroke-width: 1.7; stroke-dasharray: 2 2.4; }
.st-ftext { flex: 1; min-width: 0; }
.st-streak { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-streak .big { font-family: 'Bellefair', serif; font-size: 2.1rem; line-height: 1; color: var(--mauve-lift); }
.st-hint { font-size: .85rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.st-hint.ok { color: var(--st-sage); }

.st-ms { margin-top: 12px; text-align: center; }
.st-reach { display: inline-flex; align-items: center; gap: 6px; background: var(--st-sage-fill); color: #fff; border-radius: 999px; padding: 8px 16px; min-height: 44px; font-size: .95rem; font-weight: 400; animation: stTap 2.6s var(--st-breath) infinite; }
.st-taphint { font-size: .78rem; color: var(--st-sage); margin-top: 5px; }
@keyframes stTap { 0%,100% { box-shadow: 0 0 0 0 rgba(142,157,125,0); } 50% { box-shadow: 0 0 0 7px rgba(142,157,125,.28); } }

/* ── Opening animation (first paint of a page load only) ── */
.st-anim .st-bar i b { animation: stF1 1.1s var(--st-breath) both; animation-delay: calc(.35s + var(--i) * .22s); }
@keyframes stF1 { from { opacity: 0; transform: translateY(6px) scaleY(.5); } }
.st-anim .st-fade { animation: stFade 1s var(--st-breath) both; animation-delay: var(--d, .3s); }
@keyframes stFade { from { opacity: 0; transform: translateY(4px); } }
.st-anim .st-pg { animation: stPetal .5s var(--st-breath) both; animation-delay: calc(.3s + var(--n) * .3s); }
@keyframes stPetal { from { opacity: 0; } }
.st-anim .st-pg.fut { animation: stFuture 1.8s cubic-bezier(.42,0,.58,1) both; animation-delay: calc(.3s + var(--n) * .3s); }
@keyframes stFuture { 0% { opacity: 0; scale: .88; } 60% { opacity: .85; scale: 1.02; } 100% { opacity: 1; scale: 1; } }
.st-anim .st-clip { animation: stGrow .8s var(--st-breath) both; animation-delay: calc(.5s + var(--n) * .3s); }
@keyframes stGrow { from { transform: scaleY(0); } }
.st-clip.catch { animation: stCatch 1.6s var(--st-breath) both; animation-delay: var(--cd, 2.9s); }
@keyframes stCatch { from { transform: scaleY(var(--s0)); } }
.st-miss.out { animation: stOut 1.2s var(--st-breath) both; animation-delay: calc(var(--cd, 2.9s) + .3s); }
@keyframes stOut { to { opacity: 0; } }
.st-hint.caught { animation: stFade 1s var(--st-breath) both; animation-delay: calc(var(--cd, 2.9s) + .5s); }

/* ── A step forward since she last saw the card (streaks.js playGain) ── */
/* The lessons since then wait empty and fill in from the reading start; the count, the line
   under the bar and the streak tick over; a week just completed turns sage and gets its check. */
.st-bar i b.st-new { transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .st-bar i b.st-new { transform-origin: right center; }
.st-bar i b { transition: background .5s ease; }
/* The petal grows from what she last saw (--s0) to its new fill (inline), slowly. */
.st-clip.grow.go { animation: stCatch 1.8s cubic-bezier(.45, 0, .25, 1) both; }
.st-tick { animation: stTick .5s var(--st-breath) both; }
@keyframes stTick { from { opacity: 0; transform: translateY(6px); } }
.st-pop { animation: stPop .6s var(--st-breath) both; }
@keyframes stPop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .st-anim *, .st-clip.catch, .st-miss.out, .st-hint.caught, .st-reach, .st-tick, .st-pop, .st-clip.grow.go { animation: none !important; }
  .st-miss.out { opacity: 0; }
}