/* ==========================================================================
   Pieces for /spaced-repetition/: the growing-schedule chart caption, the
   "get your dates" callout and the Leitner box diagrams. Built on the tokens
   in site.css, the .tool shell in tools.css and .compare in article.css.
   ========================================================================== */

/* ---------- Growing schedule chart ---------- */

.prose .spr-chart figcaption { text-align: left; margin-top: 0; }
.spr-chart .chart-note { line-height: 1.5; }
.spr-gap { fill: var(--text-2); font-size: 14px; font-weight: 600; font-family: var(--font); }
.spr-stem { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; stroke-dasharray: 3 5; }

/* ---------- "Get your dates" callout ---------- */

.spr-do { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.spr-do p { flex: 1 1 300px; font-size: 17px; line-height: 1.55; }
.spr-do .btn { height: 46px; font-size: 15px; padding: 0 20px; flex: none; }

/* ---------- Leitner boxes ---------- */

.spr-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.spr-box {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 18px 14px 14px; border-radius: 16px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
}
.spr-box b { font-size: 17px; letter-spacing: -0.015em; color: var(--c, var(--violet)); }
.spr-box span { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.spr-box small { font-size: 13px; color: var(--text-3); line-height: 1.35; margin-top: auto; padding-top: 8px; }

.spr-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px !important; }
.spr-rule { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.spr-rule i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; }
.spr-rule.is-right i { background: rgba(127, 210, 124, 0.16); color: var(--green); }
.spr-rule.is-wrong i { background: rgba(255, 162, 51, 0.16); color: var(--orange); }
.spr-rule b { color: var(--text); font-weight: 600; }

/* Worked example: where one card sits on each review day */
.spr-track th, .spr-track td { vertical-align: middle; }
.spr-track td.spr-cell { text-align: center; width: 11%; padding-left: 6px; padding-right: 6px; }
.spr-card {
    display: inline-block; width: 30px; height: 20px; border-radius: 5px;
    background: var(--c, var(--violet)); box-shadow: 0 2px 10px -2px var(--c, var(--violet));
}
.spr-track .spr-res { white-space: nowrap; font-weight: 600; }
.spr-track .is-right { color: var(--green); }
.spr-track .is-wrong { color: var(--orange); }

@media (max-width: 720px) {
    .spr-boxes { grid-template-columns: 1fr; gap: 8px; }
    .spr-box { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; }
    .spr-box small { margin-top: 0; padding-top: 0; flex-basis: 100%; }
    .spr-rules { grid-template-columns: 1fr; }
}