/* g6.css - Grade 6 music theory in Brainlag Learn (with learn.css and music-learn.css). */

/* figures, always stacked (never "6/4" on one line) */
.fb{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;font-weight:600;font-variant-numeric:lining-nums;margin:0 .15em}
.fb i{font-style:normal;font-size:.86em;display:block;padding:.04em 0}
.fb-none{flex-direction:row;font-size:.86em;font-weight:600;color:inherit}   /* "no figure" in the same size and weight as the figures beside it */
.fb-sm i{font-size:.72em}
.lq-tile .fb{font-size:1.15em}

/* engraved examples in lessons, answers and worked solutions; a progression (3 chords or more) takes the full width
   on a wide lesson screen instead of the side column */
/* every example in the text column, under the paragraph it illustrates: a side column padded the text to the
   height of the card and left gaps between short paragraphs (owner review, 8 Oct) */
@media (min-width:1100px){.lp-learn .lp-prose > figure.g6-ex{grid-column:1 / -1;grid-row:auto}}
.g6-ex{margin:14px 0 18px;display:grid;gap:10px;justify-items:start}
.g6-ex figcaption{color:var(--ink-2);font-size:15.5px;max-width:640px}
.g6-ex .mn-sheet{max-width:680px}
.lq-ws .g6-ex,.ans .g6-ex{margin:10px 0}
.g6-play{min-height:40px}

/* a worked example that builds up, one step at a time */
.g6-stepbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.g6-stepn{color:var(--ink-2);font-weight:600}
.g6-next-step[hidden]{display:none}

/* extension material, outside the Grade 6 syllabus */
.g6-ext{background:var(--sunk);border-radius:var(--r1,14px);padding:12px 16px;margin:12px 0}
.g6-ext>b:first-child{display:block;margin-bottom:4px}

/* the four-part writing input */
.g6-pad{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
/* every row stays inside the column at 320 to 390 (owner, 11 Oct): a grid item's min-content (the stave) had widened the
   track, so the card and the next-voice button ran off the right edge. The stave scales to the card (taps map through
   the SVG's own box), the pills and the chord stepper wrap, the tool buttons wrap at 44 px */
.g6-pad>*{min-width:0;max-width:100%;box-sizing:border-box}
.g6-pad .mn-sheet{max-width:min(100%,600px);box-sizing:border-box}
.g6-pad .mn-host{max-width:100%}
/* in the four-part editor the stave scales to its card down to a floor of 7 px a staff space (g6.js sets that
   min-width); a longer exercise keeps that size and scrolls inside its own card, the chosen chord scrolled into view,
   with a fade at an edge that has more music beyond it */
.g6-pad .g6-sheet .mn-host{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.g6-pad .g6-sheet .mn-host svg{max-width:100%;height:auto}
.g6-pad .g6-sheet .mn-host.g6-fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.g6-pad .g6-sheet .mn-host.g6-fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.g6-pad .g6-sheet .mn-host.g6-fade-l.g6-fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.g6-pad .g6-sheet{width:100%}
.g6-pad .mn-keys{width:100%;flex-wrap:wrap}
.g6-pad .mn-key{min-width:44px;height:44px;flex:0 0 auto}
.g6-pad .g6-next{max-width:100%;white-space:nowrap}
.g6-slots{display:flex;flex-wrap:wrap;gap:8px}
.g6-slot{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;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;touch-action:manipulation}
.g6-slot .n{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--sunk);font-size:13px}
.g6-slot.done .v::after{content:"";display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--study);margin-left:6px;vertical-align:middle}
.g6-slot.on{border-color:var(--study);background:var(--study-tint);color:var(--study-ink)}
.g6-slot.bad{border-color:var(--ln-wrong,#8f5300);border-style:dashed}
.g6-slot.bad .v::after{content:"\00d7";display:inline;width:auto;height:auto;background:none;border-radius:0;margin-left:6px;color:var(--ln-wrong,#8f5300);font-weight:800}   /* not by colour alone */
.g6-slot:active{transform:scale(.98);box-shadow:none}
.g6-next{min-width:72px;font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:0 14px;margin-left:auto;background:var(--sunk);border-color:transparent;color:var(--ink)}   /* a secondary inline control, at the row's end (owner, 9 Oct) */
.g6-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.g6-colnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.g6-head{max-width:100%}
.g6-slots{max-width:100%}
.g6-colnav .mn-key{min-width:44px;height:44px}
.g6-colnum{font-weight:600;color:var(--ink-2);min-width:96px;text-align:center}
.g6-pad.locked .mn-key,.g6-pad.locked .mn-layer,.g6-pad.locked .g6-slot{pointer-events:none}
.g6-pad.locked .mn-key{opacity:.5}
@media (prefers-reduced-motion:reduce){.g6-slot:active{transform:none}}

/* the Grade 6 paper at a glance (lesson 1): facts, a marks bar, the five questions, the next exam. Surfaces and the
   type scale only: no pills, no eyebrow labels, no hairlines. Facts come from learn/music/content/exam-info.json. */
@media (min-width:1100px){.lp-learn .lp-prose > .g6-exam,.lp-learn .lp-prose > .g6-vs{grid-column:1 / -1;grid-row:auto;max-width:860px}}
.g6-exam{display:grid;gap:18px;margin:8px 0 18px}
.g6-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.g6-facts>div{flex:1 1 110px;background:var(--sunk);border-radius:var(--r1,14px);padding:12px 16px}
.g6-facts dt{font:700 26px/1.1 var(--f-display);color:var(--ink)}
.g6-facts dd{margin:4px 0 0;color:var(--ink-2);font-size:15px}
.g6-bar{display:flex;gap:4px;height:46px}
.g6-bar span{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;background:var(--sunk);color:var(--ink-2);font-size:14px;white-space:nowrap;overflow:hidden}
.g6-bar span b{font-weight:700;color:var(--ink)}
.g6-bar span.hz{background:var(--study);color:#062529}
.g6-bar span.hz b{color:#062529}
.g6-qs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g6-qs li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--sunk);border-radius:var(--r1,14px);padding:12px 16px}
.g6-qn{font:700 34px/1 var(--f-display);color:var(--ink);text-align:center}
.g6-qn::after{content:" marks";display:block;font:500 12px/1.4 var(--f-body);color:var(--ink-3)}
.g6-qt b{display:block;font:650 17px/1.3 var(--f-display);color:var(--ink)}
.g6-qt span{display:block;color:var(--ink-2);font-size:15.5px;margin-top:2px}
.g6-start{background:var(--study-tint);border-radius:calc(var(--r1,14px) + 4px);padding:14px;display:grid;gap:10px}
.g6-start .g6-qs li{background:var(--surface)}
.g6-start-h{margin:0;font:700 18px/1.3 var(--f-display);color:var(--study-ink)}
:root[data-theme="dark"] .g6-start{background:rgba(13,154,167,.18)}
:root[data-theme="dark"] .g6-start-h{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-start{background:rgba(13,154,167,.18)}:root:not([data-theme="light"]) .g6-start-h{color:#7fd6dd}}
/* early pages (skills first): the skill each question tests leads; no marks per question, only a thin bar for the share of marks (the detail is in unit 10) */
.g6-exam-skills .g6-qs li{grid-template-columns:110px minmax(0,1fr);align-items:start}
.g6-qarea{font:650 15px/1.35 var(--f-display);color:var(--study-ink);padding-top:2px}
:root[data-theme="dark"] .g6-qarea{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-qarea{color:#7fd6dd}}
.g6-share{display:grid;gap:6px}
.g6-bar.g6-bar-thin{height:10px;gap:3px}
.g6-bar-thin span{border-radius:5px;background:var(--ink-3);opacity:.45}
.g6-bar-thin span.hz{background:var(--study);opacity:1}
.g6-share-t{margin:0;color:var(--ink-3);font-size:14px}
@media (max-width:520px){.g6-exam-skills .g6-qs li{grid-template-columns:minmax(0,1fr)}}
.g6-dates{background:var(--sunk);border-radius:var(--r1,14px);padding:14px 16px}
.g6-dates p{margin:0}
.g6-dates p+p{margin-top:6px;color:var(--ink-2);font-size:15.5px}
.g6-dates-h{font:650 18px/1.3 var(--f-display)}
.g6-checked{margin:0;color:var(--ink-3);font-size:14px}
.g6-exam a,.g6-checked a{color:var(--study-ink);font-weight:600}
/* Grade 5 recognise, Grade 6 write: side by side */
.g6-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 18px}
.g6-vs>div{background:var(--sunk);border-radius:var(--r1,14px);padding:14px 18px}
.g6-vs>div.g6-vs-on{background:var(--study-tint)}
:root[data-theme="dark"] .g6-vs>div.g6-vs-on{background:rgba(13,154,167,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-vs>div.g6-vs-on{background:rgba(13,154,167,.18)}}
.g6-vs-h{margin:0 0 6px;font:700 19px/1.3 var(--f-display)}
.g6-vs ul{margin:0;padding-left:20px;color:var(--ink-2)}
.g6-vs li{margin:3px 0}
@media (max-width:560px){.g6-vs{grid-template-columns:1fr}.g6-bar span{font-size:12.5px}.g6-bar span b{display:none}.g6-qs li{grid-template-columns:52px minmax(0,1fr)}.g6-qn{font-size:28px}}

/* a Roman numeral with raised inversion figures (the American system): small, stacked, never "6/4" */
.rn{white-space:nowrap;font-variant-numeric:lining-nums;letter-spacing:.08em}   /* "IV" read cramped (owner review) */
/* the one numeral token (owner, 12 Oct): a raised 7 at 0.7 em, 0.4 em up, clear of the letter after it; two figures
   stacked at 0.7 em, the pair centred on the x-height of the text around it */
.rnf{letter-spacing:0}
.rnf{display:inline-flex;flex-direction:column;font-size:.7em;line-height:1;vertical-align:.42em;margin:0 .12em 0 .05em;font-weight:inherit}
.rnf.two{font-size:.7em;line-height:.84;vertical-align:-.1em;position:relative;top:-.28em}
.rnf i{font-style:normal;display:block;text-align:center}
.lq-tile .rn{font-size:1.15em}
/* ABRSM label to American label, side by side */
.g6-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:8px 0 18px;max-width:760px}
.g6-map>div{display:grid;gap:4px;justify-items:center;background:var(--sunk);border-radius:var(--r1,14px);padding:10px 8px}
.g6-map>div:first-child{background:none;justify-items:start;color:var(--ink-2);font-size:14.5px}
.g6-map b{font:700 20px/1.2 var(--f-display);color:var(--ink)}
.g6-map>div>span{font:600 20px/1.3 var(--f-display);color:var(--study-ink)}
:root[data-theme="dark"] .g6-map>div>span{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-map>div>span{color:#7fd6dd}}
@media (min-width:1100px){.lp-learn .lp-prose > .g6-map{grid-column:1 / -1;grid-row:auto}}

/* choosing chords for a melody */
.g6-harm{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.g6-harm>*{min-width:0;max-width:100%}
.g6-harm .mn-sheet{max-width:min(100%,640px)}
.g6-harm-row{display:flex;flex-wrap:wrap;gap:8px}
.g6-harm-cell{display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.g6-harm-cell select{min-height:44px;min-width:76px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 16px var(--f-body);padding:0 8px}
.g6-harm-cell select.bad{border-color:var(--ln-wrong,#8f5300);border-style:dashed}
.g6-harm-cell.bad>span::after{content:" \00d7";color:var(--ln-wrong,#8f5300);font-weight:800}
/* voice ranges as cards: a 2 by 2 grid when there is room, stacked on a phone; the voice and clef as the card's heading,
   the range engraved, then in words (owner, 9 Oct) */
.g6-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:10px 0 18px;max-width:680px}
.g6-rcard{background:var(--sunk);border-radius:var(--r1,14px);padding:10px 12px 12px;display:grid;gap:6px;align-content:start}
.g6-rh{margin:0;font:650 16px/1.3 var(--f-display);color:var(--ink)}
.g6-rh span{font:500 14px var(--f-body);color:var(--ink-2);margin-left:6px}
.g6-rt{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.g6-rcard .g6-ex{margin:0}
.g6-rcard .g6-ex .mn-sheet{min-width:0;width:100%}
/* the choir as the picture of the voices: a card per voice type with its singers on top (2 by 2 when there is room,
   stacked on a phone), and the whole choir on its risers */
.g6-cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin:10px 0 8px;max-width:720px}
.g6-ccard{background:var(--sunk);border-radius:var(--r1,14px);padding:10px 12px 12px;display:grid;gap:6px;align-content:start}
/* the pair side by side lines up row by row (picture, voice and clef, singers, stave, range in words): each card spans
   five rows of the grid and takes them as its own (subgrid); every stave box is the height of the tallest range, two
   ledger lines included, so the words under it line up too, stacked or side by side */
@supports (grid-template-rows:subgrid){.g6-ccard{grid-row:span 5;grid-template-rows:subgrid;row-gap:6px}}
.g6-ccard .g6-rfig .mn-sheet{min-height:186px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.g6-rcard > p[class],.g6-ccard > p[class]{margin:0}   /* the lesson's paragraph spacing stays out of the cards: their rhythm is the card's gap */
.g6-cwho,.g6-rt{text-wrap:pretty}
.g6-ccap{text-wrap:pretty}
/* short examples as a gallery (owner, 10 Oct: no tiny stave alone in a full-width card): small cards, each sized to its
   music, 3 or 4 a row on a wide screen and 2 on a phone, the label under each */
.g6-gal{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 16px;align-items:flex-start}
@media (min-width:561px){.g6-gal{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,max-content))}}   /* a set number a row (even rows, built in), each as wide as its music */
/* two a row with one over: the last card takes the row, centred, from the first paint, as g6.js galLayout does once the
   music is drawn (lib.php writes the gallery's measured --cols, 2 here: its cards no longer move when galLayout runs) */
@media (min-width:561px){.g6-gal:is([style*="--cols:2"],[style*="--cols: 2"]) > figure:last-of-type:nth-of-type(odd){grid-column:1 / -1;justify-self:center}}
/* from 1600 to 2199 px the reading column is 968 px, wider than at 1440 where --cols is measured, and from 1920 the
   music is drawn one size larger: a gallery whose count differs there carries it, --cols-m (measured at 1700, used to
   1919 px) and --cols-w (measured at 1920, used to 2199 px; lib.php, fig_heights.py), and keeps it (galLayout reaches
   the same); two a row with one over, the last card takes the row, as above */
@media (min-width:1600px) and (max-width:1919px){
  .g6-gal[style*="--cols-m"]{grid-template-columns:repeat(var(--cols-m),minmax(0,max-content))}
  .g6-gal[style*="--cols-m:2"] > figure:last-of-type:nth-of-type(odd){grid-column:1 / -1;justify-self:center}
  .g6-gal[style*="--cols-m"]:not([style*="--cols-m:2"]) > figure:last-of-type{grid-column:auto;justify-self:auto}
}
@media (min-width:1920px) and (max-width:2199px){
  .g6-gal[style*="--cols-w"]{grid-template-columns:repeat(var(--cols-w),minmax(0,max-content))}
  .g6-gal[style*="--cols-w:2"] > figure:last-of-type:nth-of-type(odd){grid-column:1 / -1;justify-self:center}
  .g6-gal[style*="--cols-w"]:not([style*="--cols-w:2"]) > figure:last-of-type{grid-column:auto;justify-self:auto}
}


.g6-gal figure.g6-ex{margin:0;display:grid;gap:6px;min-width:0;max-width:100%;flex:0 1 auto}
.g6-gal figure.g6-ex .mn-sheet{min-width:0;width:auto;max-width:100%;padding:8px 8px 8px 10px;box-sizing:border-box}
/* Play in the card's top-right corner, in its own column beside the music (never over it), so a card is only as tall as its music */
/* the Play button in a row of its own above the music in every card: beside it, the staff lines ran under the button (owner, 12 Oct) */
.g6-gal figure.g6-ex .mn-sheet:has(> .mn-sheet-bar){display:block}
.g6-gal figure.g6-ex .mn-sheet > .mn-sheet-bar{width:100%;margin:0 0 2px}
.g6-gal figure.g6-ex .mn-host{min-height:0}
.g6-gal figure.g6-ex .mn-host > svg{height:auto;margin:0;display:block}   /* its width: the engraving's own reading size (g6.js sets it) */
.g6-gal figure.g6-ex figcaption{margin:0;font-size:14.5px;color:var(--ink-2);text-align:start;text-wrap:balance;width:0;min-width:100%}   /* the label wraps to its card, never widens it on a phone */
@media (min-width:561px){.g6-gal figure.g6-ex figcaption{min-width:max(100%,13em)}}   /* on a wide screen a card is at least 13em, so a short label is not split word by word */
@media (max-width:560px){.g6-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.g6-gal .g6-galwide{grid-column:span 2}.g6-gal figure.g6-ex .mn-sheet:has(> .mn-sheet-bar){display:block}.g6-gal figure.g6-ex .mn-sheet > .mn-sheet-bar{width:100%;margin:0 0 2px}}   /* a phone: two a row, wide music a row of its own, Play over the music */
.g6-galcap{margin:-6px 0 16px;color:var(--ink-2);font-size:14.5px;text-wrap:pretty}
.g6-cart{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;max-width:100%}
.g6-cwho{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.g6-ccard .g6-ex{margin:0}
.g6-ccard .g6-ex .mn-sheet{min-width:0;width:100%}
.g6-ccap{margin:0 0 16px;color:var(--ink-2);font-size:14.5px;max-width:720px;padding-inline:12px}
.g6-choirall{margin:10px auto 18px;max-width:min(100%,1160px)}   /* the illustration grows with the column (coordinator, 10 Oct), centred; the source is 2400 px wide */
.g6-choirimg{display:block;width:100%;height:auto;max-width:100%}   /* its own proportions, from the width and height it carries */
.g6-choirall figcaption{color:var(--ink-2);font-size:14.5px;margin-top:6px;padding-inline:12px;max-width:65ch}   /* the cards' text inset */
.g6-table{border-collapse:collapse;margin:8px 0 14px;font-size:15.5px;max-width:680px;width:100%}
.g6-table th,.g6-table td{text-align:left;padding:7px 10px;vertical-align:top}
.g6-table thead th{font:650 14px var(--f-display);color:var(--ink-2)}
.g6-table tbody tr:nth-child(odd){background:var(--sunk)}

/* the melody writer (question 3): the stave lines, the value and sign keys, Check, and the findings, each naming its bars */
.g6-mel{justify-items:stretch}
.g6-melnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.g6-melnav[hidden]{display:none}
.g6-mellines{display:grid;gap:4px;outline:none;border-radius:var(--r1,14px);background:#fff;color:#111;border:2px solid var(--rule-2);padding:6px 4px;touch-action:none}   /* paper, as the figures are: the engraving is black ink in both themes */
.g6-mellines:focus-visible{box-shadow:0 0 0 3px var(--study)}
.g6-mellines .mn-host svg{display:block;width:100%;height:auto;max-width:100%;min-width:0 !important}   /* two bars a page: the lines always fit the card */
/* each group of six keys is one row of six: the keys narrow (to about 52 px at 390) rather than wrap and orphan one */
.g6-mel .g6-melvals,.g6-mel .g6-melsigns{display:grid;grid-template-columns:repeat(6,minmax(0,56px));gap:8px}
.g6-mel .g6-melvals .mn-key,.g6-mel .g6-melsigns .mn-key{min-width:0;width:100%}
.g6-val{font-size:24px;flex-direction:column;gap:0;line-height:1}
.g6-val small{font:600 11px var(--f-body);color:var(--ink-2)}
.g6-val.nofit{opacity:.45}
/* the two actions under the palette: one shape (a rounded rect, no ledge), icon inline before the label */
.g6-melacts{display:flex;flex-wrap:wrap;gap:10px}
.g6-melbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;border:2px solid;font:650 17px var(--f-display);cursor:pointer;padding:0 20px}
.g6-melbtn svg{flex:none}
.g6-melplay{border-color:var(--rule-2);background:var(--surface);color:var(--ink)}
.g6-melplay:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.g6-melplay[aria-pressed="true"]{border-color:var(--study);color:var(--study-ink);background:var(--study-tint)}
.g6-melcheck{border-color:var(--study);background:var(--study-tint);color:var(--study-ink)}
.g6-melcheck:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.g6-melfinds{display:grid;gap:8px}
.g6-melfind{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:var(--sunk);border-radius:12px;padding:10px 12px}
.g6-melfind p{margin:0;font-size:15px;line-height:1.45}
.g6-melbar{font:650 13px var(--f-body);color:var(--ln-wrong,#8f5300);white-space:nowrap;padding-top:2px}
.g6-melall{margin:0;background:var(--sunk);border-radius:12px;padding:10px 12px;font-size:15px;color:var(--ink-2)}
.g6-meltext summary{cursor:pointer;color:var(--ink-2);font-size:14px;min-height:44px;padding:12px 0;box-sizing:border-box}
.g6-meltext p{font-size:14px;color:var(--ink-2)}
.g6-mel.locked .mn-key,.g6-mel.locked .g6-mellines,.g6-mel.locked .g6-melcheck{pointer-events:none;opacity:.6}

/* the writing cursor (g6.js drawCursor): a soft teal band behind the active chord or note, sliding between them as in
   notation software; the caret, chord numbers and the ring round the active voice's note are drawn in the SVG */
.g6-pad,.g6-harm,.g6-mel{--g6-cursor:rgba(13,138,149,.14);--g6-cursor:color-mix(in srgb,var(--study,#0d8a95) 15%,transparent)}
.g6-cursor{position:absolute;left:0;top:0;width:28px;height:40px;border-radius:999px;background:var(--g6-cursor);pointer-events:none;z-index:0;
  transition:transform .15s cubic-bezier(.22,1,.36,1),height .15s,top .15s}
.g6-cursor[hidden]{display:none}
.g6-cursor.g6-still{transition:none}
.g6-pad .g6-sheet .mn-host,.g6-harm .g6-sheet .mn-host,.g6-mellines .mn-host{position:relative;z-index:1}
.g6-pad .g6-sheet .mn-layer{z-index:2}
.g6-mellines{position:relative}
.g6-cn{fill:rgba(17,17,17,.42)}
.g6-cn.on{fill:#0b7c86;font-weight:700}
@media (prefers-reduced-motion:reduce){.g6-cursor{transition:none}}
:root[data-motion=off] .g6-cursor{transition:none}
.g6-pad .g6-sheet svg.g6-thin .vf-stave path,.g6-pad .g6-sheet svg.g6-thin .vf-stave line{vector-effect:non-scaling-stroke;stroke-width:1px}
@media (max-resolution:1dppx){.g6-pad .g6-sheet svg.g6-thin .vf-stave path,.g6-pad .g6-sheet svg.g6-thin .vf-stave line{stroke-width:1.25px}}
.g6-pin{position:absolute;z-index:1;background:#fff;pointer-events:none;box-shadow:6px 0 8px -6px rgba(17,17,17,.25);overflow:hidden}
.g6-pin[hidden]{display:none}
.g6-pin svg{display:block}
/* a stave that scrolls on purpose (g6.js scrollHint): the right edge fades, and a line says there is more */
.g6-pad .g6-sheet .mn-host.g6-scrolls{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.g6-scrollhint{margin:4px 0 0;font-size:14px;line-height:1.3;color:var(--ink-2,#4a5868);text-align:right}
.g6-scrollhint[hidden]{display:none}

/* ---- lesson layout (owner, 12 Oct): one idea per step, the example first, a one-line rule under it, a "You try"
   with its answer revealed by animation, long copy in "More on this". Built from the lesson Markdown by
   tools/build_course.py blocks(): => rule, ::: more, ::: extension, ::: you. The Grades 1 to 5 builder emits the same
   .g6-more markup. */
.g6-art-part{margin:0 0 34px}
.g6-art-part>h2{margin:0 0 10px}
.g6-rule{margin:4px 0 12px;font:600 17.5px/1.45 var(--f-body);color:var(--ink);max-width:62ch}
/* the parts of a chord, the same colours as the engraved notes (stave.js ROLEC); lighter tints on a dark page */
.g6-r{font-weight:700}
.g6-r1{color:#0b7c86}.g6-r3{color:#7a4fd0}.g6-r5{color:#a86400}.g6-r7{color:#2f62c4}.g6-r0{color:var(--ink)}
:root[data-theme="dark"] .g6-r1{color:#5fd0d8}:root[data-theme="dark"] .g6-r3{color:#b9a0ff}:root[data-theme="dark"] .g6-r5{color:#f0b85a}:root[data-theme="dark"] .g6-r7{color:#8fb3ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-r1{color:#5fd0d8}:root:not([data-theme="light"]) .g6-r3{color:#b9a0ff}:root:not([data-theme="light"]) .g6-r5{color:#f0b85a}:root:not([data-theme="light"]) .g6-r7{color:#8fb3ff}}
/* More on this: a plain disclosure, no card; the summary row is a 44 px target */
.g6-more{margin:4px 0 14px;max-width:66ch}
.g6-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:650 16px/1.3 var(--f-body);color:var(--study-ink)}
.g6-more>summary::-webkit-details-marker{display:none}
.g6-more>summary::before{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease;margin:0 4px 0 2px}
.g6-more[open]>summary::before{transform:rotate(45deg)}
.g6-more-b{padding:2px 0 4px 22px;color:var(--ink-2)}
.g6-more-b>:first-child{margin-top:0}.g6-more-b>:last-child{margin-bottom:0}
.g6-more[open] .g6-more-b{animation:g6-down .22s ease-out}
.g6-more.g6-ext>summary{color:var(--ink-2)}
:root[data-theme="dark"] .g6-more>summary{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-more>summary{color:#7fd6dd}}
@keyframes g6-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* You try: the question, its example and a button that reveals the answer (no card around the music card) */
.g6-you{margin:6px 0 16px;padding-top:12px;border-top:2px dashed var(--rule-2)}
.g6-you-q{margin:0 0 4px;font:600 17px/1.4 var(--f-body);color:var(--ink)}
.g6-you-tag{display:inline-block;margin-right:8px;font:700 16px/1 var(--f-display);color:var(--study-ink)}
:root[data-theme="dark"] .g6-you-tag{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-you-tag{color:#7fd6dd}}
.g6-you .g6-ex{margin:8px 0 10px}
.g6-you-a>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 16px var(--f-body);cursor:pointer;list-style:none}
.g6-you-a>summary::-webkit-details-marker{display:none}
.g6-you-a[open]>summary{display:none}
.g6-you-a>p{margin:0;padding:10px 14px;border-radius:12px;background:var(--study-tint);color:var(--ink);font-weight:600;animation:g6-pop .32s cubic-bezier(.2,.9,.3,1.3)}
:root[data-theme="dark"] .g6-you-a>p{background:rgba(13,154,167,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-you-a>p{background:rgba(13,154,167,.18)}}
@keyframes g6-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.g6-more[open] .g6-more-b,.g6-you-a>p{animation:none}.g6-more>summary::before{transition:none}}
:root[data-motion=off] .g6-more[open] .g6-more-b,:root[data-motion=off] .g6-you-a>p{animation:none}
/* the exam overview: the harmony questions sit in the tinted "Start here" area as rows, not cards inside a card */
.g6-start{background:none;padding:0;border-radius:0}
.g6-start .g6-qs li{background:var(--study-tint)}
:root[data-theme="dark"] .g6-start .g6-qs li{background:rgba(13,154,167,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-start .g6-qs li{background:rgba(13,154,167,.18)}}
/* figured-bass panels (stave.js fbpanel): one row per position, the chord, the figures, the position and its letter.
   Wide: a table that breathes. Phone (owner, 12 Oct: "a bit squashed"): the chord and the figures side by side, the
   position and letter on a line under them; separators between rows, never a card around the music's own card */
.g6-fbp{margin:6px 0 22px;max-width:680px}
.g6-fbp-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 8px}
.g6-fbp-memo{margin:0;color:var(--ink-2);flex:1 1 260px}
.g6-fbp-cover{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 15.5px var(--f-body);cursor:pointer}
.g6-fbp-cover[aria-pressed="true"]{border-color:var(--study);color:var(--study-ink)}
.g6-fbp-cols,.g6-fbp-row{display:grid;grid-template-columns:150px 150px minmax(0,1fr);gap:6px 20px;align-items:center}
.g6-fbp-cols{padding:0 0 6px;color:var(--ink-3);font-size:14px}
.g6-fbp-row{padding:12px 0;border-top:1px solid var(--rule-2)}
.g6-fbp-row .g6-ex{margin:0;justify-items:stretch}
.g6-fbp-row .g6-ex .mn-sheet{min-width:0;width:100%;padding:6px 12px;box-sizing:border-box}
.g6-fbp-row .mn-sheet-bar{display:none}
.g6-fbp-row .mn-host > svg{min-width:96px}
.g6-fbp-cell{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:84px;padding:6px 10px;border:0;border-radius:12px;background:none;color:var(--ink);cursor:default;font:inherit;text-align:center}
.fb.fb-big{font-size:30px;font-weight:700}
.fb.fb-big i{font-size:1em;padding:0}
.g6-fbp-full{font-size:15px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.fb.fb-full{font-size:1em}.fb.fb-full i{font-size:.8em;padding:0;line-height:.95}
.g6-fbp-pos{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:650 17px/1.3 var(--f-display);color:var(--ink)}
.g6-fbp-let{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:9px;background:var(--study-tint);color:var(--study-ink);font:700 20px/1 var(--f-display)}
.g6-fbp-a{font:500 14px/1.3 var(--f-body);color:var(--ink-3)}
:root[data-theme="dark"] .g6-fbp-let{background:rgba(13,154,167,.2);color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-fbp-let{background:rgba(13,154,167,.2);color:#7fd6dd}}
/* covered: the whole figure cell (the big figures and the full ones), a tap shows it */
.g6-fbp.covered .g6-fbp-cell{background:var(--sunk);cursor:pointer}
.g6-fbp.covered .g6-fbp-cell:not(.shown) > *{visibility:hidden}
.g6-fbp.covered .g6-fbp-cell:not(.shown)::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:700 28px var(--f-display);color:var(--ink-3)}
.g6-fbp-cell.shown > *{animation:g6-pop .32s cubic-bezier(.2,.9,.3,1.3)}
@media (max-width:560px){
  .g6-fbp-cols{display:none}
  .g6-fbp-row{grid-template-columns:minmax(120px,1fr) minmax(0,1fr);grid-template-areas:"chord figs" "pos pos";gap:8px 14px;padding:14px 0}
  .g6-fbp-row > .g6-ex{grid-area:chord}.g6-fbp-row > .g6-fbp-cell{grid-area:figs}.g6-fbp-row > .g6-fbp-pos{grid-area:pos}
}
/* ABRSM labels beside American numerals, triads and seventh chords apart (a fixed grid: never orphan rows) */
.g6-map2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 14px;max-width:640px}
.g6-map2-p{background:var(--sunk);border-radius:var(--r1,14px);padding:12px 16px}
.g6-map2-h{margin:0 0 6px;font:700 18px/1.3 var(--f-display)}
.g6-map2-k,.g6-map2 dl>div{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}
.g6-map2-k{margin:0;color:var(--ink-3);font-size:13.5px}
.g6-map2 dl{margin:0}
.g6-map2 dl>div{min-height:44px;border-top:1px solid var(--rule-2)}
.g6-map2 dt,.g6-map2 dd{margin:0;font:650 21px/1.2 var(--f-display);color:var(--ink)}
.g6-map2 dd{color:var(--study-ink)}
:root[data-theme="dark"] .g6-map2 dd{color:#7fd6dd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g6-map2 dd{color:#7fd6dd}}
@media (max-width:520px){.g6-map2{grid-template-columns:1fr}}
@media (min-width:1100px){.lp-learn .lp-prose > .g6-map2,.lp-learn .lp-prose > .g6-fbp{grid-column:1 / -1;grid-row:auto}}
/* a Grade 6 step reads top to bottom at every width: the example, then its rule, then More on this and the You try
   (learn.js articleSplit would put the example beside the words, away from the You try under them) */
.la .g6-art-part .la-split.is-side{display:flex;flex-direction:column}
.la .g6-art-part .la-split.is-side>.la-text,.la .g6-art-part .la-split.is-side>.la-fig{display:contents;position:static}
.la .g6-art-part .la-split>.la-fig>figure.g6-ex{order:-1 !important}
.la .g6-art-part .la-split>.la-text>*{order:0 !important}
/* the words, More on this and their tables take the column's full width: the split's align-items:start (learn.css,
   for a figure beside its words) left "More on this" as narrow as its summary, and a table in it ran out of its cell
   (tests/learn/visual/kv_tables.py, Grade 2 major keys at 768 and 1440) */
.la .g6-art-part .la-split>.la-text>*{align-self:stretch}
.la .g6-art-part{max-width:none}   /* every block ends at the column's one right edge (coordinator, 12 Oct) */
/* the reading column centred on a wide screen: a Grade 6 lesson is one column of steps, not a page hugging the left */
.lp-stage:has(> .la.is-on .g6-art-part),.lp-stage:has(> .la-g6.is-on){max-width:820px}
/* wide screens: the column grows (still one centred column, the words at 62ch), at least half the window (la_layout narrow) */
@media (min-width:1600px){.lp-stage:has(> .la.is-on .g6-art-part),.lp-stage:has(> .la-g6.is-on){max-width:1000px}}
@media (min-width:2200px){.lp-stage:has(> .la.is-on .g6-art-part),.lp-stage:has(> .la-g6.is-on){max-width:1320px}}
/* (la-g6 is set by includes/learn/index.php, so the stage is this width from the first paint: a paint mid-parse, before
   the first part, drew a 1180 px stage and the GCSE reading column, 0.11 at 1440, 15 Oct) */
.lp-stage > .lp-screen.la.la-g6.is-on{max-width:none;margin-inline:0}
.la .g6-art-part figure.g6-ex{margin:6px 0 16px}
/* numerals in the result band and feedback lines at the options' size (owner, 12 Oct: the stacked 6 over 5 there read tiny) */
.lp-sheet .rn,.lq-res .rn,.lq-hint .rn{font-size:1.12em}
/* a lesson's music card hugs its music (owner, 12 Oct): as wide as the drawing plus the Play button's corner gutter,
   never a wide card with a small drawing in the middle; the button in the top right corner, beside the music */
.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet{width:fit-content;min-width:min(100%,240px);max-width:100%}
.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet.has-play{position:relative;padding:16px}
.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet.has-play > .mn-sheet-bar{position:absolute;top:16px;right:16px;width:auto;margin:0}
.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet.has-play > .mn-host{padding-right:52px;box-sizing:border-box}
@media (max-width:599px){.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet.has-play{padding:12px}.la .g6-art-part .g6-ex:not(.g6-galfig):not(.g6-fbp-fig) .mn-sheet.has-play > .mn-sheet-bar{top:12px;right:12px}}
.la .g6-art-part .g6-ex .mn-host{min-height:0}
/* a voice card is one surface (owner, 12 Oct: no card inside a card): white music paper in both themes, as every stave
   is, holding the picture, the voice and clef, the singers, the range drawn straight on it and the range in words */
.g6-ccard{background:#fff;color:#14233a;border:2px solid var(--rule-2);padding:12px 14px 14px}
.g6-ccard .g6-rh b,.g6-ccard .g6-rt{color:#14233a}
.g6-ccard .g6-rh span,.g6-ccard .g6-cwho{color:#4a5a70}
.g6-ccard .g6-ex .mn-sheet{border:0;padding:0;background:none;min-height:0}
.g6-ccard .g6-rfig .mn-sheet{min-height:150px}
.g6-ccard .mn-sheet.has-play{position:relative;padding-right:56px}
.g6-ccard .mn-sheet.has-play > .mn-sheet-bar{position:absolute;top:0;right:0;width:auto;margin:0}
/* an extension is marked by its heading and a dashed rule above it, not a tinted box round the music's own card */
.g6-more.g6-ext{background:none;border-radius:0;padding:10px 0 0;margin:14px 0;border-top:2px dashed var(--rule-2)}
/* a key signature drawn in a table cell ({ks:...}, learn/music/tools/build_course.py; owner, 13 Oct: "with the actual key
   signature drawn"): the sheet as small as its music, at reading size (g6.js draws it at 12 px a space on a phone) */
.g6-table tr:has(.bl-ks) > td{vertical-align:middle}
.g6-ex.bl-ks{margin:2px 0;display:block}
.bl-kg-t .g6-ex.bl-ks{margin:0 !important}
.g6-ex.bl-ks .mn-sheet{width:fit-content !important;min-width:0 !important;max-width:100%;padding:4px 10px;box-sizing:border-box}
.g6-ex.bl-ks .mn-host{min-height:0}
/* a table to learn by heart ("::: memorise", table.bl-mt) is one card a row on a phone, each cell under its column's
   heading, never squashed into columns (owner, 12 Oct); a table of two halves side by side has a rule between them */
@media (max-width:599px){
  table.g6-table.bl-mt,.lq-tscroll > table.g6-table.bl-mt,.bl-mt > tbody,.bl-mt > tbody > tr,.bl-mt td{display:block !important;width:auto}
  .bl-mt > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bl-mt > tbody > tr,.bl-mt > tbody > tr:nth-child(odd){background:var(--surface);border:2px solid var(--rule-2);border-radius:12px;padding:4px 14px;margin:0 0 10px}
  .bl-mt td{display:grid !important;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:4px 12px;align-items:center;padding:9px 0}
  .bl-mt td + td{border-top:1px solid var(--rule-2)}
  .bl-mt td::before{content:attr(data-th);font:650 14px/1.3 var(--f-display);color:var(--ink-2)}
  .bl-mt td[data-th=""]{display:block !important;font:650 16px/1.3 var(--f-display)}
  .bl-mt td[data-th=""]::before{content:none}
  .bl-mt td:empty{display:none !important}
  .bl-mt td.bl-mt-2{border-top-width:2px}
  .bl-mt td:has(> .bl-ks){grid-template-columns:minmax(0,1fr)}
}
/* the keys of a grade (```keygrid, build_course.py keygrid): a tile a key, its key signature drawn over its name, on the
   music's own paper; sharps and flats side by side, a row for each number of accidentals, C across the top; the tiles
   are the only boxes (no card round them); on a narrow phone the two columns stack */
.bl-kg{display:grid;gap:10px;margin:6px 0 14px;max-width:560px}
.bl-kg-top{display:grid;justify-items:center}
.bl-kg-top > .bl-kg-t{width:calc(50% - 5px)}
.bl-kg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.bl-kg-col{display:grid;gap:10px;align-content:start}
.bl-kg-h{margin:0 !important;font:650 14px/1.3 var(--f-display);color:var(--ink-2);text-align:center}
.bl-kg-t{display:grid;justify-items:center;gap:0;padding:6px 8px 8px;border:2px solid var(--rule-2);border-radius:14px;background:#fff;color:#111}
.bl-kg-t .g6-ex.bl-ks .mn-sheet{border:0;background:none;padding:0}
.bl-kg-n{margin:0 !important;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;font:650 15.5px/1.2 var(--f-display);color:#111;text-align:center}
.bl-kg-m{margin:0 !important;font:500 14px/1.25 var(--f-body);color:#3d4a5c;text-align:center}
.bl-kg-new{display:inline-block;padding:2px 7px;border-radius:999px;background:#0a7d87;color:#fff;font:700 11.5px/1.2 var(--f-body);letter-spacing:.02em}
.bl-kg-t.is-new{border-color:#0a7d87}
@media (max-width:359px){.bl-kg-cols{grid-template-columns:minmax(0,1fr)}.bl-kg-top > .bl-kg-t{width:100%}}
/* a gallery of long examples (a stave block's "wide": true, build_course.py): one card a row below 768 px, so a scale
   is not drawn at half the column; side by side from 768, their captions on one line */
@media (max-width:767px){.g6-gal.bl-gal-wide{display:grid !important;grid-template-columns:minmax(0,1fr) !important}.g6-gal.bl-gal-wide > figure .mn-sheet{width:100%}.g6-gal.bl-gal-wide > figure{grid-column:auto !important;justify-self:stretch !important}}
.g6-gal.bl-gal-wide{align-items:stretch}
.g6-gal.bl-gal-wide > figure{grid-template-rows:1fr auto;align-content:stretch}
/* ---- One spacing scale for a lesson's reading (owner, 13 Oct, Grade 2 intervals at 390: "Spacing!!!"): 12 px from a
   heading to what it heads, 16 px between any two blocks (words, a list, a figure, a table, More on this), 8 px from a
   figure to its caption (the figure's own gap), 40 px between sections. Margins only below a block, so a split's
   words and figure (a flex column on a phone, a grid beside each other) space the same way as plain flow */
.la .g6-art-part{margin:0 0 40px}
.la .g6-art-part > h2{margin:0 0 12px}
.la .g6-art-part > :is(p,ul,ol,figure,.lq-tscroll,details,.la-split),.la .g6-art-part .la-split > :is(.la-text,.la-fig) > :is(p,ul,ol,figure,.lq-tscroll,details),.la .g6-art-part figure.g6-ex{margin:0 0 16px}
.la .g6-art-part > :last-child,.la .g6-art-part .la-split > .la-text > :last-child,.la .g6-art-part .la-split.is-side > .la-fig > :last-child{margin-bottom:0}   /* (the figure goes first in a split: the words end it) */
.la .g6-art-part .la-split:not(.is-side){gap:0}
.la .g6-art-part .la-split.is-side{row-gap:0}   /* (the words are grid items there: their own margins space them) */
/* a table in a lesson on a phone: one line of text a row, no tall bands between them */
@media (max-width:599px){.la .g6-art-part .lq-tscroll :is(td,th){padding:5px 8px;line-height:1.4}}
/* on a phone a figure's card is never narrower than the reading column (owner, 13 Oct): a gallery is one figure a row
   there, each card and caption the column's width. A phone is under 480 px (the widest are about 430): from 480 to
   699 the drawing, at the phone's staff space, would sit small in a column-wide card (la_layout fill, 520 px, 14 Oct),
   so there a card hugs its music as on a wide screen (a wide example, .g6-wide, keeps the column) and a gallery goes
   two a row */
@media (max-width:479px){:is(.la,.pm-prose) .g6-gal{grid-template-columns:minmax(0,1fr) !important}:is(.la,.pm-prose) .g6-gal > figure{width:100%;grid-column:1 / -1 !important}}   /* (every card in the one column: .g6-galwide's span 2 above made an implicit second, sized by its music, and the cards overlapped; a locked lesson's taste the same, as the lesson: two a row until the music was drawn, then one, CLS 0.07 at 390, 17 Oct) */
@media (min-width:480px) and (max-width:699px){.la .g6-art-part .g6-ex:not(.bl-ks):not(.g6-galfig):not(.g6-fbp-fig):not(.g6-wide) .mn-sheet{width:fit-content !important;min-width:min(100%,240px) !important}}
/* a figure's drawn height held until its music lands (learn/tools/fig_heights.py measures the drawn figure, its card
   and its caption, which takes the Play button's row once drawn; includes/learn lib.php learn_fig_heights sets --mn-rh /
   --mn-rhd): the figure at least that tall until its music is drawn (15 Oct: the words under a figure moved as it was
   drawn, 0.05 to 0.11) */
:is(.la,.pm-prose) figure.g6-ex[style*="--mn-rh"]:not(.mn-drawn):not(:has(.mn-host > svg)){box-sizing:border-box;min-height:var(--mn-rh);align-content:end}
:is(.la,.pm-prose) figure.g6-ex[style*="--mn-rh"]:not(.mn-drawn):not(:has(.mn-host > svg)):has(> .mn-sheet){grid-template-rows:minmax(0,1fr) auto;align-content:stretch}   /* (the card fills the held space while it draws, its caption under it) */
@media (min-width:600px){:is(.la,.pm-prose) figure.g6-ex[style*="--mn-rh"]:not(.mn-drawn):not(:has(.mn-host > svg)){min-height:var(--mn-rhd)}}
/* a figure's layout is never animated: with reduced motion brainlag.css gives every element a .01 ms transition, which
   (no transition-property set, so all) drew each change as it was drawn one frame late: a gallery card's music at the
   card's full width, its card's padding and Play row (17 Oct: CLS 0.06 at 390, a Grade 7 taste; 0.18 at 390 and 0.11
   at 1440, Grade 5 Tuplets) */
@media (prefers-reduced-motion:reduce){figure.g6-ex,figure.g6-ex *{transition-property:none !important}}
/* and while it is held, its empty card asks for nothing of its own: the held height is the drawn figure's (an empty
   card's 80 px made a short figure 37 px taller until its music landed, 17 Oct: Grade 4 alto clef taste, 390) */
:is(.la,.pm-prose) figure.g6-ex[style*="--mn-rh"]:not(.mn-drawn):not(:has(.mn-host > svg)) .mn-host{min-height:0}
/* in a lesson and a locked lesson's taste the Play bar waits where it will sit once the music is drawn (under the card,
   music-learn.css), not over the music: in the flow it held the music 46 px lower until then (17 Oct: CLS 0.044 at
   1440, a Grade 7 taste; 0.17 at 390, Grade 5 Tuplets' gallery) */
:is(.la,.pm-prose) figure.g6-ex[style*="--mn-rh"]:not(.bl-ks):not(.mn-drawn):not(:has(.mn-host > svg)) > .mn-sheet.has-play > .mn-sheet-bar{position:absolute;left:0;right:auto;top:calc(100% + 8px);width:auto;height:auto;margin:0}