/* 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-weight:500;color:var(--ink-2)}
.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 */
@media (min-width:1100px){.lp-learn .lp-prose > figure.g6-ex.g6-wide{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}

/* 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;gap:10px;justify-items:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:100%}
.g6-pad .mn-sheet{max-width:min(100%,600px)}
.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:inset 0 -3px 0 rgba(var(--ink-rgb),.1);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:#b8432f}
.g6-slot:active{transform:translateY(2px);box-shadow:none}
.g6-next{min-width:72px;font-size:16px;font-weight:600}
.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}}