/* Practice mode (3.8): the "My setlist" sheet, and the practised count leaders see. */
.mm-practice-modal .mm-practice-card { max-width: 640px; }
.mm-practice-sub { margin: 4px 0 0; font-size: 13px; opacity: .72; }
.mm-practice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mm-practice-progress { display: flex; flex-direction: column; gap: 6px; min-width: 160px; flex: 1 1 160px; font-size: 14px; }
.mm-practice-bar { display: block; height: 6px; border-radius: 999px; background: rgba(148,163,184,.22); overflow: hidden; }
.mm-practice-bar > span { display: block; height: 100%; border-radius: inherit; background: #16a34a; transition: width .2s; }
.mm-practice-saved { margin: 8px 0 4px; font-size: 12px; }
.mm-practice-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.mm-practice-section { margin: 10px 0 -2px; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.mm-practice-song { padding: 12px 14px; border: 1px solid rgba(148,163,184,.3); border-radius: 12px; background: rgba(148,163,184,.05); }
.mm-practice-song.is-done { border-color: rgba(22,163,74,.45); background: rgba(22,163,74,.06); }
.mm-practice-title { display: flex; flex-direction: column; gap: 2px; }
.mm-practice-title strong { font-size: 16px; line-height: 1.25; }
.mm-practice-title small { font-size: 12px; opacity: .65; }
.mm-practice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mm-practice-chip { padding: 3px 9px; border-radius: 999px; background: rgba(148,163,184,.16); font-size: 12px; font-weight: 650; }
.mm-practice-offline.is-ok { background: rgba(22,163,74,.12); color: #15803d; }
.mm-practice-offline.is-failed { background: rgba(234,179,8,.16); color: #a16207; }
.mm-practice-key { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 999px; background: rgba(37,99,235,.1); color: #1d4ed8; font-size: 12px; font-weight: 700; }
.mm-practice-key > span { padding: 0 4px; }
.mm-practice-key small { font-weight: 600; opacity: .75; }
.mm-practice-key button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(37,99,235,.14); color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.mm-practice-key button:hover, .mm-practice-key button:focus-visible { background: rgba(37,99,235,.24); }
.mm-practice-performers { margin: 8px 0 0; font-size: 13px; white-space: pre-line; opacity: .8; }
.mm-practice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mm-practice-actions .btn { text-decoration: none; }
.mm-practice-song.is-done .mm-practice-tick { border-color: #16a34a; color: #15803d; font-weight: 750; }
.mm-service-practice { margin: 8px 8px 0 0; }
.mm-service-practised { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(234,179,8,.14); color: #a16207; font-size: 12px; font-weight: 650; white-space: nowrap; }
.mm-service-practised.is-all { background: rgba(22,163,74,.12); color: #15803d; }
.mm-service-practised.is-none { background: rgba(148,163,184,.16); color: #64748b; }

body.dark .mm-practice-song { border-color: rgba(148,163,184,.22); background: rgba(148,163,184,.06); }
body.dark .mm-practice-song.is-done { border-color: rgba(74,222,128,.4); background: rgba(34,197,94,.08); }
body.dark .mm-practice-key { background: rgba(96,165,250,.14); color: #bfdbfe; }
body.dark .mm-practice-key button { background: rgba(96,165,250,.2); }
body.dark .mm-practice-song.is-done .mm-practice-tick { border-color: #4ade80; color: #86efac; }
body.dark .mm-service-practised { background: rgba(234,179,8,.16); color: #fde68a; }
body.dark .mm-service-practised.is-all { background: rgba(34,197,94,.16); color: #86efac; }
body.dark .mm-service-practised.is-none { color: #cbd5e1; }
body.dark .mm-practice-offline.is-ok { background: rgba(34,197,94,.16); color: #86efac; }
body.dark .mm-practice-offline.is-failed { background: rgba(234,179,8,.16); color: #fde68a; }

/* 4.4.0: how well I know a song, the New badge, and the Heads' grid. */
.mm-practice-ready.is-level-1 { border-color: #f59e0b; }
.mm-practice-ready.is-level-2 { border-color: #3b82f6; }
.mm-practice-ready.is-level-3 { border-color: #16a34a; background: rgba(22,163,74,.12); }
.mm-practice-new { background: rgba(124,58,237,.16); }
/* 4.6.1: the same badge beside Live View's song title. */
#live-song-title .live-new-badge { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.mm-practice-grid-wrap { margin: 4px 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mm-practice-grid { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.mm-practice-grid th, .mm-practice-grid td { padding: 5px 8px; border-bottom: 1px solid rgba(148,163,184,.25); text-align: center; white-space: nowrap; }
.mm-practice-grid th[scope="row"] { text-align: left; max-width: 14em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mm-practice-grid td.is-level-0 { opacity: .45; }
.mm-practice-grid td.is-level-1 { color: #d97706; }
.mm-practice-grid td.is-level-2 { color: #2563eb; }
.mm-practice-grid td.is-level-3 { color: #16a34a; font-weight: 700; }

/* 4.6.1: a song's links, edited here by Heads and the service's music leaders. */
.mm-practice-links-edit { margin: 8px 0; padding: 10px; border-radius: 10px; background: rgba(148,163,184,.1); }
.mm-practice-links-edit .mm-practice-actions { margin-top: 8px; }