/* Trainer section landing pages. Uses the site's landing.css for the nav,
   buttons, footer and colour tokens; this is only the page body. */

.tsWrap { max-width: 900px; margin: 0 auto; padding: 26px 20px 60px; }

.tsCrumb { font-size: 12.5px; color: var(--muted, #a9bcd4); margin-bottom: 20px; }
.tsCrumb a { color: var(--muted, #a9bcd4); text-decoration: none; }
.tsCrumb a:hover { color: #eaf2ff; text-decoration: underline; }

.tsHead { border-bottom: 1px solid var(--line, rgba(120,160,220,.18)); padding-bottom: 26px; margin-bottom: 26px; }
.tsHead h1 { margin: 8px 0 12px; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.tsHead .lede { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--muted, #a9bcd4); max-width: 66ch; }

.tsStats { display: flex; gap: 30px; margin: 0 0 22px; flex-wrap: wrap; }
.tsStats div { display: flex; flex-direction: column; }
.tsStats b { font-size: 25px; font-weight: 800; color: var(--gold, #f2cc7b); line-height: 1.1; }
.tsStats span { font-size: 12px; color: var(--muted, #a9bcd4); }

.tsBody h2 { margin: 34px 0 14px; font-size: 20px; letter-spacing: -.01em; }
.tsBody p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--muted, #a9bcd4); max-width: 70ch; }

.tsList { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.tsLesson {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line, rgba(120,160,220,.18)); border-radius: 12px;
  padding: 14px 16px; background: rgba(255,255,255,.02);
}
.tsNum {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
  background: rgba(242,204,123,.14); color: var(--gold, #f2cc7b);
}
.tsLesson h3 { margin: 0 0 4px; font-size: 15.5px; }
.tsLesson h3 a { color: #eaf2ff; text-decoration: none; }
.tsLesson h3 a:hover { color: var(--gold, #f2cc7b); text-decoration: underline; }
.tsLesson p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.55; }
.tsLesson small { font-size: 11.5px; color: #7f93ac; }

.tsRules { display: flex; flex-wrap: wrap; gap: 6px; }
.tsRules code {
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  background: rgba(120,160,220,.12); color: #b9c9de;
}
.tsNote { font-size: 13px !important; color: #7f93ac !important; }

.tsNav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 38px 0 30px; padding-top: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line, rgba(120,160,220,.18));
}

.tsAll h2 { font-size: 17px; margin: 0 0 12px; }
.tsGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.tsChip {
  font-size: 12.5px; padding: 7px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line, rgba(120,160,220,.22)); color: var(--muted, #a9bcd4);
}
.tsChip:hover { border-color: rgba(242,204,123,.6); color: #eaf2ff; }
.tsChip.on { background: rgba(242,204,123,.14); border-color: var(--gold, #f2cc7b); color: var(--gold, #f2cc7b); }

@media (max-width: 640px) {
  .tsHead h1 { font-size: 27px; }
  .tsStats { gap: 20px; }
  .tsNav { flex-direction: column; align-items: stretch; }
}

/* A teaching line lifted from the lesson itself: the substance of the page. */
.tsPoint {
  margin: 0 0 6px !important; padding-left: 11px;
  border-left: 2px solid rgba(242,204,123,.35);
  font-size: 13px !important; line-height: 1.6 !important; color: #b9c9de !important;
}