/* trainers.css - the music trainers (includes/music/trainers.php, assets/music/trainers.js). Site tokens only. */
.mtr-main{padding-top:10px;padding-bottom:40px}
/* the tool pages' card and title (tools/_shell.php has them for the Tools hub; this page is not one of those) */
.mtr-main .panel{background:var(--surface);border-radius:var(--r3);box-shadow:var(--shadow);padding:20px 22px;margin:16px 0}
@media (max-width:600px){.mtr-main .panel{padding:16px 14px}}
.mtr-main .tool-hero{margin:8px 0 4px}.mtr-main .tool-hero h1{margin:0 0 6px}.mtr-main .tool-hero p{margin:0;color:var(--ink-2);max-width:66ch}
.mtr-crumb{margin:6px 0 0;font-size:14.5px}
.mtr-crumb a{color:var(--study-ink);font-weight:700}
.mtr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:6px 0 14px}
.mtr-card{display:flex;gap:14px;align-items:center;padding:16px 18px;color:var(--ink);text-decoration:none;min-height:96px}
.mtr-card:hover{outline:2px solid var(--study);outline-offset:-2px}
.mtr-card img{flex:none}
.mtr-ct{display:flex;flex-direction:column;gap:3px}
.mtr-ct b{font:700 18px var(--f-display)}
.mtr-ct span{font-size:14.5px;color:var(--ink-2)}
.mtr-ct .mtr-lv{color:var(--study-ink);font-weight:700}
.mtr-topics{margin:0 0 12px}
.mtr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 10px}
.mtr-grade{font:700 17px var(--f-display);color:var(--ink)}
.mtr-pick{margin-left:auto}
.mtr-pick select{min-height:44px;min-width:12em}
.mtr-daily{margin:0 0 10px;font-weight:700;color:var(--study-ink)}
.mtr-stage{min-height:260px}
.mtr-q{font-size:20px;margin:6px 0 8px}
.mtr-play{margin:4px 0 14px}
.mtr-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mtr-ch{min-height:52px;padding:8px 12px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:600 16px var(--f-body);cursor:pointer;touch-action:manipulation}
.mtr-ch:hover{border-color:var(--blue)}
.mtr-ch:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.mtr-ch.ok{border-color:var(--study);background:var(--study-tint)}
.mtr-ch.no{border-color:var(--warn-ink);background:rgba(var(--ink-rgb),.04)}
.mtr-ch:disabled{cursor:default}
.mtr-letters{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:6px;margin:12px 0 0}
.mtr-l{font:700 20px var(--f-display);padding:0}
.mtr-acc{margin:10px 0 0}
.mtr-acc button{font:700 20px var(--f-display);min-width:52px}
.mtr-sheet{min-height:150px}
.mtr-time{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;margin:10px 0 0}
.mtr-time span{display:block;height:100%;width:100%;background:var(--study);transition:width .1s linear}
.mtr-pad{display:grid;place-items:center;width:min(100%,360px);height:180px;margin:14px auto 0;border:3px solid var(--study);border-radius:28px;background:var(--study-tint);color:var(--ink);font:700 26px var(--f-display);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mtr-pad.hit{background:var(--study);color:var(--on-study-btn,#fff)}
.mtr-pad:disabled{opacity:.55;cursor:default}
.mtr-rchoices{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:760px){.mtr-rchoices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mtr-rch{display:flex;align-items:center;gap:10px;padding:8px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);cursor:pointer;min-height:96px}
.mtr-rch .mt-sheet{flex:1;min-height:80px}
.mtr-rch.ok{border-color:var(--study);background:var(--study-tint)}
.mtr-rch.no{border-color:var(--warn-ink)}
.mtr-rl{font:700 18px var(--f-display);color:var(--ink);min-width:24px}
.mtr-kb{margin:12px 0 0}
.mtr-act{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.mtr-act .b{min-height:48px}
.mtr-fb{min-height:1.4em;margin:12px 0 0;font-weight:700;font-size:17px}
.mtr-fb.ok{color:var(--study-ink)}
.mtr-fb.no{color:var(--ink)}
.mtr-sing{font:700 18px var(--f-display);margin:12px 0 0;min-height:1.4em}
/* the locked grade: calm, no urgency (owner, 11 Oct 2026) */
.mtr-lock{padding:18px 20px;border-radius:var(--r2,18px);background:var(--sunk)}
.mtr-lock h2{font-size:19px;margin:0 0 8px}
.mtr-lock p{margin:0 0 8px;color:var(--ink-2)}
.mtr-lock-act{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.mtr-lock-act .b{min-height:48px}
@media (prefers-reduced-motion:reduce){.mtr-time span{transition:none}}