/* 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-sheet>.mn-host{min-width:0;max-width:100%;justify-self:stretch}   /* a stave wider than its card scrolls inside it; as a grid item it had taken its music's width and hung out of the card on both sides (Grade 6 melody questions at 1280) */   /* 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:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mn-play:active{transform:scale(.98);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:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.mn-key:active{transform:scale(.98);box-shadow:none}
.mn-key[aria-pressed="true"]{background:var(--study-tint);border-color:var(--study);color:var(--study-ink)}
/* the sharp, flat and natural keys: Bravura's glyph alone (note-name.css), centred in the key */
.mn-key.acc .mn-acc{font-size:1.15em;margin:0;top:0}
.mn-key.acc .mn-acc.fl{top:.24em}
.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}

/* a time signature in running text, options, captions and tables (one component everywhere, owner 12 Oct: never a
   fraction): the music font's own time-signature digits (SMuFL timeSig0 to 9, U+E080 + digit), stacked with no rule.
   Measured from Bravura: a digit's ink is half its font size, centred on its baseline, so a row of line-height .5 is
   exactly the digit with its baseline in the middle. Each digit .66 em of the text, the pair about 1.4 em, centred on
   the x-height; .tsig-w keeps it with the punctuation after it (the builders and learn.js wrap it) */
@font-face{font-family:"BL Bravura";src:url(/assets/music/vendor/fonts/bravura/bravura.woff2) format("woff2");font-display:block}
.tsig{display:inline-flex;flex-direction:column;align-items:center;vertical-align:.64em;margin:0 .12em;font-family:"BL Bravura";font-style:normal;font-weight:400;line-height:normal;color:inherit;white-space:nowrap}
:root:not(.mn-bravura) .tsig:not(:is(td,th) *){vertical-align:.916em}:root:not(.mn-bravura) .tsig::before{content:"";display:block;height:0}   /* until its font (Bravura) has come (music-learn.js marks the page .mn-bravura): the box's baseline its top, not its digits', so it sits where the font will put it, not where the fallback's metrics did (17 Oct: a line 9 px lower until then, CLS 0.08 at 390, Grade 5 Irregular time); .916em = the .64em it has in Bravura, measured at 18 px; with lib.php learn_tsig_widths, its width */
.tsig i{display:block;font-style:normal;font-size:1.32em;line-height:.5;height:.5em;text-align:center}
.tsig i+i{margin-top:.06em}
.tsig-w{white-space:nowrap}
:is(td,th) .tsig{font-size:1.45em;vertical-align:middle}
:is(td,th):has(> .tsig:only-child, > .tsig-w:only-child){text-align:center;vertical-align:middle}
.lq-tile .tsig{font-size:1.3em}
/* a table of time signatures reads as rows: its own surface, a divider under every row (owner rule: tables need a
   background or division) */
.lp-prose table:has(.tsig){border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r1,14px);overflow:hidden}
.lp-prose table:has(.tsig) :is(td,th){padding:10px 14px;vertical-align:middle}
.lp-prose table:has(.tsig) tr+tr :is(td,th){border-top:1px solid var(--rule-2)}
.lp-prose table:has(.tsig) tbody tr:nth-child(even){background:var(--sunk)}

/* learn these by heart (owner, 12 Oct): the one marker for a table or list a student must memorise, in every grade:
   a labelled line above it ("::: memorise" in the lesson source). No box around it, no emoji, no red */
.bl-memorise{margin:8px 0 18px}
.bl-memorise-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 12px;border-radius:10px;background:var(--study-tint);color:var(--study-ink);font:700 15px/1.2 var(--f-display)}
.bl-memorise-tag::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7c0 2.6 1.4 4.3 2.6 5.5.8.8 1.4 1.6 1.4 2.5v1h6v-1c0-.9.6-1.7 1.4-2.5C17.6 14.3 19 12.6 19 10a7 7 0 0 0-7-7zm-3 18h6v1H9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7c0 2.6 1.4 4.3 2.6 5.5.8.8 1.4 1.6 1.4 2.5v1h6v-1c0-.9.6-1.7 1.4-2.5C17.6 14.3 19 12.6 19 10a7 7 0 0 0-7-7zm-3 18h6v1H9z'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-theme="dark"] .bl-memorise-tag{background:rgba(13,154,167,.2);color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bl-memorise-tag{background:rgba(13,154,167,.2);color:#7fd6dd}}
/* on a phone a figure's card takes the column's width (owner, 13 Oct: an 8-note scale's card shrink-wrapped to 240 px,
   its staff tiny); its music is laid out for that width and never drawn wider than it (notation.js renderSystems) */
@media (max-width:699px){.mn-fig{justify-items:stretch}.mn-fig .mn-sheet,.g6-ex:not(.bl-ks):not(.g6-galfig) .mn-sheet{width:100% !important;min-width:0 !important;max-width:100%}.mn-host{max-width:100%;min-width:0}}
/* a lesson's or a gallery's card with one line of music: Play leaves the music for the caption row under the card, on
   its left, the caption beside it and wrapping by it; the music keeps the card's whole width and the card hugs it
   (coordinator, 13 Oct). Music over several lines too (r77: the phone wrap made many more); each of its lines keeps
   its drawn width (only a single line takes the card's: stretched lines would differ in staff size). A question's card
   keeps its own layout */
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg){position:relative;row-gap:8px}
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg) > .mn-sheet.has-play{position:relative !important;padding:10px 12px !important}
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg) > .mn-sheet.has-play > .mn-sheet-bar{position:absolute !important;left:0 !important;right:auto !important;top:calc(100% + 8px) !important;transform:none;width:auto !important;height:auto !important;margin:0 !important}
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg) > .mn-sheet.has-play > .mn-host{padding-right:0 !important;min-height:0}
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg:only-of-type) > .mn-sheet.has-play > .mn-host > svg{width:100% !important;min-width:0 !important;height:auto}   /* the card's width, up to the engraver's own max-width (its staff-space cap, inline): never stretched past it (r67 la_layout: 17-31 px a space) */
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg) > figcaption{padding-left:56px;min-height:44px;display:flex;align-items:center;box-sizing:border-box;width:auto !important;min-width:0 !important;max-width:none !important;justify-self:stretch;text-wrap:wrap !important}
figure.g6-ex:not(.bl-ks):has(> .mn-sheet.has-play > .mn-host > svg):not(:has(> figcaption:not(:empty))){padding-bottom:52px}

/* quick checks inside a Learn card (build_course.py tap(), music-learn.js): the "Have a go first" card's look
   (learn-scaffold.css .lpq, 33612c705), with the player's option tiles (learn.css .lq-tile, .right, .wrong) */
.bl-tap{box-sizing:border-box;width:100%;min-width:0;max-width:65ch;margin:16px 0 8px;padding:16px 18px;border-radius:18px;background:var(--blue-tint);overflow-wrap:anywhere;hyphens:auto}
.bl-tap-eb{margin:0 0 8px;font:700 14px/1.3 var(--f-body);color:var(--blue-ink)}
.bl-tap-q{font-weight:600}.bl-tap-q>:first-child{margin-top:0}.bl-tap-q>:last-child{margin-bottom:0}
.bl-tap .g6-ex{margin:4px 0 10px}
.bl-tap-ch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;margin:12px 0 0}
.bl-tap .lq-tile.bl-tap-c{box-sizing:border-box;min-width:0;min-height:48px;padding:8px 14px;gap:12px;font-size:16.5px;white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.bl-tap .lq-tile .k{width:26px;height:26px;font-size:13px}
.bl-tap .lq-tile .c{min-width:0}
.bl-tap .lq-tile:focus{outline:none}
.bl-tap .lq-tile:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.bl-tap .lq-tile[aria-disabled="true"]{cursor:default}
.bl-tap .lq-tile[aria-disabled="true"]:active{transform:none}
.bl-tap .lq-tile.right .k,.bl-tap .lq-tile.wrong .k{border-color:currentColor}
.bl-tap .lq-tile.right .k{color:var(--ln-right)}.bl-tap .lq-tile.wrong .k{color:var(--ln-wrong)}
.bl-tap .lq-tile .k svg{display:block}
.bl-tap-fb{margin:10px 0 0;min-height:1.5em;color:var(--ink-2)}
.bl-tap-fb:empty{margin:0;min-height:0}
.bl-tap-fb.is-right b{color:var(--ln-right)}.bl-tap-fb.is-wrong b{color:var(--ln-wrong)}
@media (prefers-reduced-motion:no-preference){.bl-tap .lq-tile.right,.bl-tap .lq-tile.wrong{animation:blTapIn .2s ease-out}.bl-tap-fb.is-right,.bl-tap-fb.is-wrong{animation:blTapFb .2s ease-out}}
@keyframes blTapIn{from{transform:scale(.97)}to{transform:none}}
@keyframes blTapFb{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (max-width:599px){.bl-tap{width:auto;max-width:none;margin-inline:calc(50% - 50vw);padding:16px calc(50vw - 50%);border-radius:0}}
@media (forced-colors:active){.bl-tap{border:2px solid CanvasText}.bl-tap .lq-tile.right,.bl-tap .lq-tile.wrong{border-width:3px}}
/* before music-learn.js gives them the tile class: plain buttons that already read as options */
.bl-tap-c:not(.lq-tile){display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 14px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:500 16.5px/1.35 var(--f-body);text-align:start}