/* 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;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;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;align-items:center;gap:8px}
.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) */
.rnf{letter-spacing:0}
.rnf{display:inline-flex;flex-direction:column;font-size:.64em;line-height:.92;vertical-align:.32em;margin-left:.06em;font-weight:inherit}
.rnf.two{vertical-align:.5em}
.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;gap:12px;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:#b8432f}
/* 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 */
.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 */
.g6-gal figure.g6-ex .mn-sheet:has(> .mn-sheet-bar){display:grid;grid-template-columns:minmax(0,auto) auto;column-gap:4px;align-items:start}
.g6-gal figure.g6-ex .mn-sheet > .mn-sheet-bar{order:2;width:auto;margin:0}
.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:center;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;align-items:center;gap:8px}
.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%}
/* 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:#b8432f;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}
.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}