/* Heart Turn Kids: following the Heart Turn Kids schedule (badge, setup choice, Lesson page line) and the
   narrator's voice picker. Colors come from the platform's tokens, so they follow each church's brand and dark mode. */

/* The badge: "Following the Heart Turn Kids schedule" */
.htk-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font: 700 13px/1.2 var(--body); letter-spacing: .01em; max-width: 100%; }
.htk-mark { width: 15px; height: 15px; flex: none; display: block; }
.htk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 14.5px; }
.view-head .htk-line, .vol-id .htk-line { margin-top: 12px; }
.summary .htk-line { margin-top: -4px; }

/* On the Lesson page: what everyone following is on this week */
.htk-week { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 14.5px/1.35 var(--body); color: var(--brand-strong); }
.htk-week .htk-mark { width: 16px; height: 16px; }

/* Church setup: the choice, and what the schedule sets while following */
.htk-fs { border-top: 6px solid var(--brand); }
.htk-set { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); }
.htk-set .htk-line { margin-top: 0; }
.htk-set > p { font-size: 15.5px; }
.htk-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.htk-facts li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.htk-facts b { font-weight: 800; }
.htk-facts span { color: var(--muted); }
.htk-keep { font-size: 14.5px; }
.htk-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.htk-note .linkbtn { font-size: inherit; }
.acct-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.acct-follow .htk-badge { background: var(--surface); }

/* The narrator's voice picker */
#voicePick { display: grid; gap: 12px; }
.voice-row { align-items: end; }
.voice-row .field { flex: 1 1 260px; min-width: 0; }
.narr-pace { max-width: 320px; }
.narr-pace input[type="range"] { width: 100%; accent-color: var(--brand-strong); }
.voice-tip { font-size: 14.5px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); }

@media (max-width: 560px) {
  .htk-facts li { grid-template-columns: 1fr; gap: 2px; }
  .voice-row .btn { width: 100%; }
}