/* ---------- Lied: echtes Notenblatt ---------- */
.sheet {
  --mark: #2563eb; --mark-bg: rgba(37, 99, 235, .12); --play: #d1281f; --bad: rgba(209, 40, 31, .1);
  flex: 1; min-width: 0; min-height: 0; overflow: auto;
  padding: 8px 0 24px; color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .sheet { --mark: #8fb4ff; --mark-bg: rgba(143, 180, 255, .16); --play: #ff8f86; --bad: rgba(255, 143, 134, .16); }
}
.score { display: block; }
.score .hit { fill: transparent; cursor: pointer; }
.score .cur { fill: var(--mark-bg); stroke: var(--mark); stroke-width: .1; }
.score .caret { fill: var(--mark); }
.score .ghost { opacity: .22; }
.score .bad { fill: var(--bad); }
/* Der zuletzt gesetzte Ton (auf ihn wirken Vorzeichen und Bogen) und der gerade klingende */
.score .ev.target { color: var(--mark); }
.score .ev.playing { color: var(--play); }
.score .playbar { fill: var(--play-bg); }
/* Taktart: zwei Ziffern übereinander, jede so hoch wie zwei Linienabstände */
/* Versalziffern: Georgias Mediävalziffern (3, 4, 5 …) reichen unter die Grundlinie und säßen zu tief */
.score .mt { font: 700 2.75px "Times New Roman", Times, "Noto Serif", serif; font-variant-numeric: lining-nums; text-anchor: middle; dominant-baseline: central; }
.score .ly { font: 600 1.4px var(--font-ui); text-anchor: middle; }
.score .lyx { fill: currentColor; }
.score .vt { font: 700 1.2px var(--font-ui); }
.score .nm { font: 800 1.75px var(--font-ui); text-anchor: middle; fill: var(--muted); }
.score .cnt { font: 700 1.35px var(--font-display); text-anchor: middle; }
.score .cnt.held { opacity: .4; }

/* ---------- Leiste des Lieds ---------- */
.steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.steps .btn { padding: 0; min-height: 40px; font: 700 1.2rem/1 var(--font-display); }
.meterrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.meterrow .btn { min-height: 48px; padding: 0; }
.meterrow .mtr { font-size: 1.05rem; }
.meterrow .sym { height: 1.7rem; }
.lyrow { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.lyrow input { min-width: 0; min-height: 42px; padding: 0 .6rem; border: 2px solid var(--line); border-radius: 10px; font: 600 1.05rem var(--font-ui); color: var(--fg); background: var(--btn); }
.lyrow input:disabled { opacity: .5; }
.lyrow .btn { min-height: 42px; padding: 0 .7rem; font: 800 .85rem var(--font-ui); }
.keyrow { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 5px; align-items: center; }
.keyrow .btn { min-height: 42px; font: 800 .95rem var(--font-ui); }
.keyrow .acc { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", serif; font-size: 1.2rem; font-weight: 400; }
.transrow { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.transrow .btn { min-height: 42px; font: 800 .85rem var(--font-ui); }
.keyname { text-align: center; font: 800 .95rem var(--font-ui); }
.tools.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tools.three .btn { min-height: 52px; }
.btn .volta { font: 800 1rem/1 var(--font-ui); letter-spacing: .02em; }
.btn.more { width: 100%; min-height: 34px; margin: 5px 0; font: 800 .78rem var(--font-ui); color: var(--muted); }
.tools.shows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn.tomel { width: 100%; min-height: 46px; gap: .5rem; font: 800 .92rem var(--font-ui); }
.btn.tomel .dots, .shows .dots { display: inline-flex; gap: 2px; }
.btn.tomel .dots i { width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35); }
.shows .btn { min-height: 40px; font: 800 .85rem var(--font-ui); }
.shows .dots { display: inline-flex; gap: 2px; }
.shows .dots i { width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35); }
.tools.accs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tools.accs .btn { min-height: 44px; }
.btn .acc { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", serif; font-weight: 400; }
.values.v6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.values.v6 .sym { height: 1.9rem; }
#liedRests .sym, #rests .sym, #restsMel .sym { height: 2.2rem; }

/* ---------- Ziehen auf dem Notenblatt ---------- */
/* Die markierte Note lässt sich ziehen: Ein unsichtbares Feld liegt darüber, dort scrollt der Finger nicht */
.sheet { position: relative; }
.grabber { position: absolute; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.score .ev.lifting { opacity: .35; }
.score .ev.drop { color: var(--mark); }

/* ---------- Menü: Notengröße ---------- */
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- Druckansicht (Als PDF speichern) ---------- */
/* Nur beim Drucken sichtbar; dann ist alles andere ausgeblendet. Immer schwarz auf weiß, auch im dunklen Modus. */
.printout { display: none; }
@media print {
  @page { size: A4; margin: 15mm; }
  body > :not(.printout) { display: none !important; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body { padding: 0 !important; }
  .printout { display: block; color: #000; --muted: #555; }
  .printout h1 { margin: 0 0 6mm; font: 700 20pt var(--font-display); text-align: center; }
  .printout .score { max-width: 100%; height: auto; margin: 0 auto 3mm; break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- Leiste des Lieds in Blöcken: einrichten, Noten schreiben, Liedtext, abspielen ---------- */
.panel .block {
  gap: 7px; padding: 10px 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.panel .block > .glabel { margin-top: 1px; }
.btitle { margin: 0 0 2px; display: flex; align-items: center; gap: .45rem; font: 800 .82rem var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--fg); }
.btitle .num { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--fg); color: var(--panel); font-size: .75rem; letter-spacing: 0; }
.btitle > span:not(.num) { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted); }
.btitle .ico { width: 1rem; height: 1rem; }

/* Aufklappbare Blöcke (alle Bereiche): die ganze Überschrift ist der Knopf, eingeklappt nur sie mit Kurzinfo */
.bhead {
  width: 100%; min-height: 40px; margin: -4px 0; padding: 0; display: flex; align-items: center; gap: .45rem;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bhead .bname { flex: none; }
.bhead .bhint, .bhead .bsum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted); }
.bhead .bsum { font-weight: 800; color: var(--fg); }
.bhead .chev { flex: none; margin-left: auto; width: 1.25rem; height: 1.25rem; color: var(--muted); transition: transform .18s ease; }
.block.open .bhead .chev { transform: rotate(180deg); }
.block.open .bhead .bsum, .block:not(.open) .bhead .bhint { display: none; }
.panel .block:not(.open) { padding-bottom: 10px; }
.panel .block:not(.open) > :not(.btitle) { display: none !important; }
.panel .block:not(.open) > .btitle { margin-bottom: 0; }

/* Tonart und Transponieren in einer Reihe */
.keyrow { grid-template-columns: 1fr 1.3fr 1fr .85fr .85fr; gap: 4px; }
.keyrow .btn { padding: 0 .15rem; }
.keyrow .btn.trans { flex-direction: column; gap: 0; line-height: 1; }
.keyrow .trans .big { font-size: .9rem; }
.keyrow .trans .small { font-size: .62rem; }
.keyname { font-size: .82rem; line-height: 1.15; text-align: center; }
/* Vorzeichen und „alle Töne“ in einer Reihe */
.tools.accs { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.tools.accs .btn.more { width: auto; min-height: 44px; margin: 0; }
/* Als Melodie übernehmen: unten neben Speichern, nur im Bereich Lied */
.side:not([data-area="lied"]) #btnToMelody { display: none; }
/* Ins Notenblatt: das Gegenstück in Farbnoten und Rhythmus */
.side[data-area="lied"] #btnToLiedSide { display: none; }
.actions > .btn.tolied { gap: .4rem; }
.actions > .btn.tomel { width: auto; min-height: 0; flex-direction: column; gap: .2rem; font: inherit; font-size: .88rem; }
/* eingeklappte Blöcke flacher */
.panel .block:not(.open) { padding-top: 6px; padding-bottom: 6px; }

/* ---------- Leiste: mittlerer Teil scrollt, Werkzeugreihe oben und Knöpfe unten bleiben stehen ---------- */
aside.side { padding: 12px; overflow: hidden; }
.side > .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 4px; }
.panel .block { padding-left: 8px; padding-right: 8px; }
.side .actions { margin-top: 0; }

/* ---------- Große Knöpfe zum Schreiben (darf scrollen) ---------- */
/* Lied */
.steps { gap: 5px; }
.steps .btn { min-height: 58px; font-size: 1.65rem; }
.values.v6 .btn { min-height: 62px; }
.values.v6 .sym { height: 2.3rem; }
.tools.accs .btn, .tools.accs .btn.more { min-height: 54px; }
.meterrow .btn { min-height: 56px; }
.keyrow .btn { min-height: 52px; }
.shows .btn { min-height: 50px; }
/* Melodie: Farbpunkte 5 pro Reihe (Stammtöne, dann die hohen Töne mit Fis und B), groß */
.side .palette { display: flex; flex-direction: column; gap: 8px; }
.side .pal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.side .note { font-size: 2rem; }
#panelMel .tools .btn { min-height: 60px; }
/* Rhythmus */
#panelRhy .values .btn { min-height: 76px; }
#panelRhy .values .sym { height: 2.7rem; }
#panelRhy .tools.five .btn { min-height: 72px; }
#panelRhy .tools.five .big .ico { width: 1.7rem; height: 1.7rem; }
#panelRhy .zbtns .btn { min-height: 60px; font-size: 1.7rem; }

/* Hochformat: Werkzeugreihe oben schmaler beschriftet */
@media (orientation: portrait) and (min-width: 601px) {
  .side .tools.toprow { gap: 4px; }
  .side .tools.toprow .small { font-size: .56rem; }
}
/* Handy: Leiste unter der Tafel, nichts scrollt einzeln */
@media (max-width: 600px) {
  aside.side { overflow: visible; }
  .side > .panel { overflow: visible; }
}

/* Lied: Taktstriche automatisch oder von Hand */
.tools.barmode { grid-template-columns: 1fr 1fr; }
.tools.barmode .btn { min-height: 50px; font: 800 .9rem var(--font-ui); }
/* Lied: Tonnamen auf den Knöpfen in der Schrift der Überschriften der Leiste */
.side .steps .btn { font-family: var(--font-ui); font-weight: 800; }
@media (orientation: portrait) and (min-width: 601px) {
  .side .steps .btn { font-size: 1.35rem; }
}

/* ---------- Verdecken ---------- */
/* Tuch und Karten liegen als Felder über dem Notenblatt; das Tuch aus zwei Stücken (Rest der Zeile, alles darunter) */
.sheet > .cloth { position: absolute; z-index: 4; }
.sheet > .cloth:not(.rest) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.sheet > .cloth.rest { border-top-left-radius: 0; border-top: 0; }
/* Beim Mitspielen: schlicht in der Farbe des Blatts, ohne Rand und Hinweis */
.sheet > .cloth.stepcloth { background: var(--board); border: 0; cursor: default; pointer-events: none; }
/* verdeckt: die Note (nh) bzw. ihr Name, je nach Karte */
.score .ev.quiz > .nh, .score .nm.quiz { visibility: hidden; }
.sheet > .qcard { position: absolute; z-index: 3; font-size: 2.2rem; }
.sheet > .qcard.qname { font-size: 1.1rem; border-radius: 8px; }

/* ---------- Zeilennummern und eingeklappte Zeilen ---------- */
/* Vor jeder Zeile ihre Nummer; ein Tipp auf die Spalte davor klappt die Zeile ein */
.score .lnum { font: 700 1.3px var(--font-ui); text-anchor: end; dominant-baseline: central; fill: var(--muted); }
.score .fold { fill: transparent; cursor: pointer; }
/* Eingeklappt: nur die Nummer als Knopf mit Pfeil und eine feine Linie auf Höhe der Mittellinie */
.score .fpill { fill: var(--btn); stroke: var(--btn-line); stroke-width: .16; }
.score .fnum { text-anchor: middle; }
.score .fline { fill: var(--btn-line); }

/* ---------- Tonnamen-Quiz: die Zufallsnote groß auf eigenen Notenlinien ---------- */
.qstaff { height: 100%; max-height: 62vh; width: auto; max-width: 100%; overflow: visible; }
.qstaff .qnm { font: 400 2.6px var(--font-display); text-anchor: middle; }
/* Note setzen: der Name groß unter den Notenlinien, die Note wird mit dem Finger auf die Linien geschoben (blass, ihr
   Platz hinterlegt); eine falsche Note bleibt kurz rot */
.quizview > .qset { align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.qset .qstaff { flex: 1 1 0; height: 0; width: 100%; max-height: none; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.qstaff .qn.ghost { opacity: .45; }
.qstaff .qband { fill: var(--play-bg); }
.qset .qname { font-size: 3rem; letter-spacing: .1em; } /* Abstand, sonst verschwindet der Oktavstrich im Bogen des f */
.qstaff .qn.miss { color: var(--bad); opacity: .7; }
/* Schritt oder Sprung?: die klingende Note leuchtet */
.qstaff .qn.on { color: var(--play); }