/* 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;overflow-x:auto}   /* a bar too wide for a phone at the reading size scrolls inside its sheet (notation.js MIN_DRAWN) */
.mn-svg{display:block;width:100%;height:auto;margin:0 auto}
/* an example's sheet fits its music (a single chord gets a small card, not a long empty stave); inputs keep their width */
.mn-fig .mn-sheet,.g6-ex .mn-sheet{width:fit-content;max-width:100%;min-width:min(100%,300px)}
.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)}
/* the Play icon: a small round button at the sheet's top right, in a row of its own above the music (never over it) */
.mn-sheet-bar{display:flex;justify-content:flex-end;justify-self:stretch;width:100%;margin:0 0 2px}
.mn-play.mn-play-icon{position:relative;width:44px;min-height:0;height:44px;padding:0;border-radius:50%;justify-content:center;gap:0;
  background:#f1f4f7;color:#0b5f66;border:1.5px solid #c9d3dc;box-shadow:none}
.mn-play.mn-play-icon.on{background:#e3f4f5;border-color:#0d8a95;color:#0b5f66}
.mn-play.mn-play-icon:focus-visible{outline:3px solid #0d8a95;outline-offset:2px}
.mn-play.mn-play-icon::after{content:"";position:absolute;inset:-4px;border-radius:50%}   /* a 48 px hit area */
.mn-play.mn-play-icon .mn-tri{width:0;height:0;margin-left:3px;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}   /* drawn in CSS: no svg inside the sheet but the music's own */
.mn-play.mn-play-icon.on .mn-tri{display:none}   /* while it plays: a stop square */
.mn-play.mn-play-icon.on::before{content:"";width:12px;height:12px;border-radius:2px;background:currentColor}
.mn-sheet.has-play{padding-right:0}

/* 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}

/* playback: what is sounding in the accent colour (5:1 on the white sheet), fading back after release; instant with
   reduced motion */
.mn-svg .mn-lit,.mn-svg .mn-lit *{fill:#0b7c86 !important;stroke:#0b7c86 !important}
@media (prefers-reduced-motion:no-preference){.mn-svg g path{transition:fill .25s cubic-bezier(.22,1,.36,1),stroke .25s cubic-bezier(.22,1,.36,1)}}
:root[data-motion=off] .mn-svg g path{transition:none}