/* FolkScore learning pages: Learn by Ear, Tune Types, Ornaments, Transposer */
:root{
  --paper:#f3f6fa; --card:#ffffff; --ink:#1d2b3a; --muted:#5d6d7e; --line:#d5dfea;
  --band:#1f3d63; --band2:#2a5285; --accent:#2b5f96; --accent2:#22507f; --tint:#e3edf7; --hot:#b8452f; --gold:#c8902b;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:"IM Fell English",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.45;min-height:100vh}
.band{background:var(--band);color:#fff;border-bottom:4px solid var(--band2)}
header{max-width:1100px;margin:0 auto;padding:22px 20px 18px}
h1{font-family:"IM Fell English SC","IM Fell English",Georgia,serif;font-weight:400;font-size:clamp(30px,5.5vw,44px);margin:0;line-height:1.1;color:#fff}
h1 span{color:#a9c8ec}
.sub{color:#c9d8ea;font-style:italic;margin:4px 0 0;font-size:17px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px 40px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin:16px 0}
h2{font-weight:400;font-size:24px;margin:0 0 6px;color:var(--band);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h2 small{font-size:15px;color:var(--muted);font-style:italic}
h3{font-weight:400;font-size:20px;margin:14px 0 4px;color:var(--band)}
p{margin:6px 0}
.muted{color:var(--muted)}
.small{font-size:15px}
.controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;font-size:16px}
.controls label{display:flex;gap:8px;align-items:center;color:var(--muted)}
select,input[type=text],input[type=number]{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #c3d1e0;border-radius:4px;padding:5px 8px}
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}
input[type=range]{accent-color:var(--accent)}
textarea{width:100%;min-height:150px;font:14px/1.4 ui-monospace,Menlo,Consolas,monospace;border:1px solid #c3d1e0;border-radius:4px;padding:8px;color:var(--ink);background:#fbfdff}
button{font:inherit;cursor:pointer;border-radius:4px;padding:6px 16px;font-size:16px;border:1px solid #c3d1e0;background:#fff;color:var(--accent2)}
button:hover{border-color:var(--accent);background:var(--tint)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover{background:var(--accent2)}
button:disabled{opacity:.5;cursor:default}
.grow{flex:1}
.pnote{color:var(--muted);font-size:14px;font-style:italic;margin:10px 2px 0}
.xlink{color:#a9c8ec;margin-left:10px;font-style:normal;white-space:nowrap}
.xlink:hover{color:#fff}
.score{overflow-x:auto}
.score svg{max-width:100%}
.score .abcjs-note.cur path,.score .abcjs-note.cur,.score .cur{fill:var(--hot)!important;stroke:none}
.score .ph path{fill:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{border:1px solid #c3d1e0;border-radius:16px;padding:4px 12px;font-size:15px;background:#fff;color:var(--accent2);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.done{border-color:#8fb3d8;background:var(--tint)}
details summary{cursor:pointer;color:var(--accent2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
@media print{
  body{background:#fff}
  .band,.controls,.noprint,#fs-top,#fs-foot{display:none!important}
  .panel{border:0;padding:0;margin:0 0 10px;break-inside:avoid}
}
[hidden]{display:none!important}