/* music-learn.css - music in Brainlag Learn (with learn.css). The stave is always white paper with ink, in both
   themes: notation on a dark ground reads badly, and printed theory is black on white. */
.mn-fig{margin:12px 0 16px;display:grid;gap:10px;justify-items:start}
.mn-sheet{position:relative;width:100%;max-width:640px;background:#fff;color:#111;border:2px solid var(--rule-2);border-radius:var(--r1,14px);padding:6px 10px}
:root[data-theme="dark"] .mn-sheet{border-color:var(--rule-2)}
.mn-host{min-height:80px}
.mn-svg{display:block;width:100%;height:auto}
.mn-play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);
  color:var(--ink);font:600 16px var(--f-body);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(var(--ink-rgb),.1);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mn-play:active{transform:translateY(2px);box-shadow:none}
.mn-play.on{color:var(--study-ink);border-color:var(--study)}

/* writing a note */
.mn-pad{display:grid;gap:10px;justify-items:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mn-input{max-width:min(100%,520px)}
.mn-layer{position:absolute;inset:0;touch-action:none;cursor:ns-resize;border-radius:inherit;outline:none}
.mn-layer:focus-visible{box-shadow:0 0 0 3px var(--study)}
.mn-bubble{position:absolute;left:var(--bx);top:var(--by);transform:translate(-50%,-64px);pointer-events:none;background:var(--ink);color:var(--paper);
  font:700 18px var(--f-body);padding:6px 12px;border-radius:12px;white-space:nowrap}
.mn-read{margin:0;min-height:1.5em;font-weight:600;color:var(--ink-2)}
.mn-keys{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mn-key{min-width:52px;height:52px;border-radius:14px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:500 26px/1 var(--f-body);
  cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(var(--ink-rgb),.1);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.mn-key:active{transform:translateY(2px);box-shadow:none}
.mn-key[aria-pressed="true"]{background:var(--study-tint);border-color:var(--study);color:var(--study-ink)}
.mn-gap{width:12px}
.mn-pad.locked .mn-key,.mn-pad.locked .mn-layer{pointer-events:none}
.mn-pad.locked .mn-key{opacity:.5}
.lq-tile,.lq-tile *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media (max-width:520px){.mn-key{min-width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){.mn-key:active,.mn-play:active{transform:none}}

/* the Grade 5 home */
.mh-start{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 30px}
.mh-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 56px}
@media (min-width:980px){.mh-cols{grid-template-columns:minmax(0,1fr) 360px}}
.mh-cols h2{font-size:21px;margin:26px 0 10px}
.mh-topics{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.mh-topics li{border-bottom:2px solid var(--rule)}
.mh-topics a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:14px 4px;color:var(--ink);align-items:center}
.mh-topics .t{font:600 19px/1.25 var(--f-display)}
.mh-topics .d{grid-column:1;color:var(--ink-2);font-size:15.5px}
.mh-topics .bar{grid-column:2;grid-row:1 / span 2;width:96px;height:10px;border-radius:5px;background:var(--sunk);overflow:hidden;position:relative}
.mh-topics .bar i{position:absolute;inset:0;background:var(--study);transform-origin:left;transform:scaleX(var(--k,0))}
.mh-topics .bar[hidden]{display:none}
.mh-topics a:hover .t{color:var(--study-ink)}
.mh-list{list-style:none;margin:0;padding:0}
.mh-list li{padding:12px 0;border-bottom:1px solid var(--rule)}
.mh-list a{color:var(--ink);font-weight:600}
.mh-list a:hover{color:var(--study-ink)}
.mh-list .m{display:block;color:var(--ink-3);font-size:14.5px;font-weight:400;margin-top:2px}
.mh-grade{font-weight:600;color:var(--ink-2);margin:-8px 0 20px}
.mh-grade[hidden]{display:none}