/* School: additions to the dawn design system (load after app.css).
   Everything else reuses Manna's own classes: portion-card, track, steps, stats, cert, player, finish. */

/* five tabs once School joins the bottom nav */
.nav { grid-template-columns: repeat(5, 1fr); }

.school .page-title { padding-top: 18px; }
.school-head { display: flex; flex-direction: column; gap: 6px; }
.school-next .q { font-size: var(--t-xl); }
.school-rhythm { display: flex; flex-direction: column; gap: 12px; }

/* course cards are buttons styled as Manna tracks */
button.track.school-course {
  width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
button.track.school-course h3 { font-size: var(--t-md); font-family: var(--serif); }
button.track.school-course:hover { border-color: var(--accent-fill); }
button.track.school-course.finished { border-color: var(--good); }
.school-track { gap: 10px; }
.school-track > h2 { font-size: var(--t-xl); margin-top: 8px; }

/* lesson list inside a course */
.school-course-head { display: flex; flex-direction: column; gap: 10px; }
.school-lessons li { align-items: start; }
.school-lessons .mark { margin-top: 2px; }
.link-plain {
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  color: var(--fg); display: flex; flex-direction: column; gap: 2px;
}
.link-plain b { font-weight: 600; font-size: var(--t-sm); }
.link-plain small { color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }
.school-lessons li > small { white-space: nowrap; padding-top: 2px; }

/* player bits */
.school-player .btn svg, .school .btn svg { width: 18px; height: 18px; }
.school-quote { font-style: italic; }
.school-quote span { display: block; font-style: normal; font-size: var(--t-xs); margin-top: 4px; }
.school-pray b, .lookfor b { font-weight: 600; }
.school-memory { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.school-verse { font-size: clamp(1.5rem, 6.2vw, 2.05rem); line-height: 1.32; }
.school-blank { letter-spacing: 0.06em; opacity: 0.55; white-space: nowrap; }
.school-gap { letter-spacing: 0.08em; }
.school-recall { display: flex; flex-direction: column; gap: 14px; }
.school-q { display: flex; flex-direction: column; gap: 12px; }
.school-finish .school-more { text-decoration: underline; text-underline-offset: 3px; }
.school-credit p { font-size: var(--t-sm); }
.school-credit .btn { align-self: flex-start; }

@media (min-width: 700px) {
  .school-verse { font-size: 2.25rem; }
}