/* Registrant
   Donker is de standaard en de bedoelde stand: "er mag niet teveel licht
   schijnen, leidt af". Vandaar een lage grondhelderheid; alleen wat betekenis
   heeft licht op. Het lichte thema staat er weer naast omdat het bij daglicht
   of thuis aan tafel soms prettiger is; de keuze wordt onthouden. */

:root {
  --versie: "11-10-2026";   /* moet gelijk zijn aan APP_VERSIE en DATA_VERSIE */
  --knop: 92px;          /* wordt in JS overschreven op basis van de breedte */
  --hw:    #b8892f;   /* Hoofdwerk  */
  --borst: #3d81a8;   /* Borstwerk  */
  --boven: #c77fc2;   /* Bovenwerk  */
  --zwel:  #c77fc2;   /* Zwelwerk — tweede klavier, zelfde kleur als Bovenwerk;
                         ze komen nooit op hetzelfde orgel voor */
  --pos:   #3d81a8;   /* Positief — tweede klavier, zelfde blauw als het
                         Borstwerk; ze komen nooit op hetzelfde orgel voor */
  --rug:   #2a9d8f;   /* Rugwerk — eigen kleur; komt bij ons niet samen met
                         een Borstwerk voor, maar krijgt er toch een zodat het
                         niet met blauw verwisseld kan worden */
  --ped:   #8c9199;   /* Pedaal     */
  --overig:#4f9e74;   /* Klokjes, Nachtegaal — klinken wel, horen bij geen werk */
  --hulp:  #6e6b8a;   /* koppels, wind, licht */
  /* Ventil en afsluiters: knoppen die (delen van) het orgel uitzetten. Op de
     Sint-Jan doen ze er zwarte sokjes omheen; hier een donkere kap met een
     oranje ring. Oranje omdat het de enige vrije kleur is: goud is Hoofdwerk,
     blauw Borstwerk en Positief, magenta Bovenwerk en Zwelwerk, groen de
     overige registers, grijs het Pedaal en paars de hulpen. En het is de enige
     kleur die uit zichzelf "let op" zegt. */
  --afsluiter:    #f07818;
  --afsluiterVul: #241a12;
  --uit:  #34a85d;       /* uittrekken */
  --in:   #c9453a;       /* induwen */
}

body[data-thema="donker"] {
  --vlak:  #0b0d11;      /* achtergrond */
  --vlak2: #151920;      /* knoppen, velden */
  --tekst: #e4e8ef;
  --zacht: #6d7583;
  --rand:  #232833;
  --vul:   #d5dae3;      /* uitgetrokken register */
  --vulTekst: #0b0d11;
  --dialoog: #b9c1cf;    /* tekst in vensters — leesbaar, niet gedempt */
  --aanwijzing: #e0a33c;  /* "eerst alles dicht" */
}

body[data-thema="papier"] {
  --vlak:  #efece6;
  --vlak2: #ffffff;
  --tekst: #16181d;
  --zacht: #6b7280;
  --rand:  #cfc9bd;
  --vul:   #16181d;
  --vulTekst: #ffffff;
  --dialoog: #454b55;
  --aanwijzing: #a15c07;
  --afsluiter: #c2570a;
  --afsluiterVul: #f2e3d5;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  overscroll-behavior: none;        /* geen meeveren aan de randen */
  touch-action: manipulation;       /* geen dubbeltik-zoom op de knoppen */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  user-select: none;
}
/* Kolomindeling in plaats van een vaste hoogte voor de kop: die kop wordt in
   staande stand twee regels hoog, en dan viel de onderbalk van het scherm. */
body { background: var(--vlak); color: var(--tekst); display: flex; flex-direction: column; }

/* ── kop ── */
.balk {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--rand);
}
/* Wikkelen mag, maar Wijzig/Klaar en Terug gaan vóórop. Stonden ze achteraan,
   dan zakten ze naar een tweede regel zodra de stuktitel lang werd — en dat is
   uitgerekend de knop die je het vaakst zoekt; Hans raakte hem kwijt.
   Niet-wikkelen was geen alternatief: bij een iPad staand werden de Orgel- en
   Stukknop tot 26 px platgedrukt en bleef alleen het opschrift over.
   (31-08-2026) */
.kiezers { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; align-items: center; }
.kiezers .mini { order: -1; flex: none; }
.kiesknop .waarde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De knop draagt zelf wat er gekozen is: hij is tegelijk opschrift en
   bediening. Uitklapmenu's werden onwerkbaar bij veel orgels of stukken. */
.kiesknop {
  font: inherit; display: flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border-radius: 9px;
  background: var(--vlak2); color: var(--tekst);
  border: 1px solid var(--rand); text-align: left;
}
.kiesknop:active { border-color: var(--zacht); }
.kiesknop:disabled { opacity: .4; }
.kiesknop .kop { font-size: 12px; color: var(--zacht); }
.kiesknop .waarde { font-size: 15px; }

select {
  font: inherit; font-size: 15px; padding: 6px 8px;
  background: var(--vlak2); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 8px;
}

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── keuzeschermen ────────────────────────────────────────────────────────
   Orgels, lijsten en stukken krijgen elk een eigen scherm in plaats van een
   uitklapmenu: alles tegelijk in beeld, grote raakvlakken. */
.scherm { display: none; }
body[data-scherm=""] .scherm { display: none; }
body:not([data-scherm=""]) .wand,
body:not([data-scherm=""]) .standlijst,
body:not([data-scherm=""]) .onderbalk,
body:not([data-scherm=""]) .wijzigbalk { display: none; }
body:not([data-scherm=""]) .scherm {
  display: block; flex: 1; min-height: 0; overflow: auto; padding: 16px 20px;
}

.schermkop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.schermkop h2 { margin: 0; font-size: 21px; flex: 1; }
.scherm .fijn { margin: 0 0 14px; font-size: 14px; color: var(--dialoog); }
.scherm .leeg { color: var(--zacht); font-size: 16px; }

.keuzerij {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  font: inherit; font-size: 17px; text-align: left;
  padding: 8px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--dialoog);
}
.keuzerij + .keuzerij { border-top: 1px solid var(--rand); }
.keuzerij:active { background: var(--vlak2); }
.keuzerij .titel { flex: 1; }
.keuzerij .bij { font-size: 13px; color: var(--zacht); }
/* De componist hoort bij de naam en staat er in dezelfde letter achter, zoals
   op de uitgebreide afdruk. Niet mee vetten met een gekozen regel: dan valt de
   titel er niet meer uit. */
.keuzerij .achter { font-weight: 400; color: var(--dialoog); }
.keuzerij.actief { color: var(--tekst); font-weight: 600; }
.keuzerij.actief .titel::before { content: "▸ "; color: var(--aanwijzing); }
.keuzerij.erin { color: var(--tekst); font-weight: 600; }

.keuzerij .vink {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px;
  border: 2px solid var(--zacht); background: transparent; align-self: center;
}
.keuzerij.erin .vink { background: var(--aanwijzing); border-color: var(--aanwijzing); }
.keuzerij .nr {
  width: 1.6em; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--zacht); font-size: 15px;
}
/* Vooraan, en groot genoeg voor een vinger: 44 bij 44. Als teken achter de
   regel was het te klein om te zien en te klein om te raken. Het kader laat
   zien waar de knop ophoudt en de regel zelf begint. */
.keuzerij .potlood {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--rand); color: var(--dialoog); font-size: 18px;
}
.keuzerij .potlood.leeg { border-color: transparent; }
/* De naam van de speellijst als invulveld in het samenstelscherm. Zelfde maat
   en gewicht als een schermkop, met een streepje eronder dat laat zien dat je
   hem kunt aanpassen. Bij het typen wordt het streepje de accentkleur. */
.schermkop .lijstnaam {
  flex: 1; min-width: 0; margin: 0; padding: 2px 0 4px;
  font: inherit; font-size: 21px; font-weight: 700; color: var(--tekst);
  background: none; border: 0; border-bottom: 1px dashed var(--zacht); border-radius: 0;
  /* De app zet selecteren overal uit; hier moet je de oude naam juist in één
     keer kunnen selecteren om hem te vervangen, ook op de iPad. */
  -webkit-user-select: text; user-select: text;
}
.schermkop .lijstnaam:focus { outline: none; border-bottom: 2px solid var(--aanwijzing); }

/* De streep in de stukkenlijst. Geen kopje maar een merkteken: klein, gedempt
   en niet aantikbaar. De rij eronder verliest zijn eigen scheidingslijn, want
   die staat hier al. */
.scheiding {
  margin-top: 14px; padding: 8px 12px 0;   /* 12px zodat hij met de titels meeloopt */
  border-top: 1px solid var(--rand);
  font-size: 13px; color: var(--zacht);
}
/* Heb je op dit orgel nog niets, dan staat hij boven de hele lijst, direct
   onder de schermkop. Daar hoeft die lucht erboven niet. */
.schermkop + .scheiding { margin-top: 0; }

/* De klavieren tussen de twee registergroepen. Een stilstaand plaatje: wat er
   klinkt staat er niet in, want met een koppel open zou dat niet kloppen.

   Hier staat bewust geen enkel getal meer over breedtes. De ruimte tussen de
   knoppen loopt over de negen orgels van 33 tot 300 px, en elke vuistregel die
   op het ene orgel klopt gaat op het andere stuk. `klavierMaat()` in app.js
   meet na wat er past en zet de breedte; past er niets, dan blijft het bij het
   woord "klavieren". (Hans, 21-09-2026) */
.klavieren {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
  font-size: clamp(10px, calc(var(--knop) * 0.22), 14px);
}
.klavieren[hidden], .midden[hidden] { display: none; }

.klavier {
  padding: 0.3em 0.45em; border: 2px solid var(--werkkleur); border-radius: 6px;
  line-height: 1.3; color: var(--tekst);
}
/* Naam boven, bereik eronder, altijd. Ze naast elkaar zetten als het toevallig
   past gaf een balk die van vorm verandert als je het apparaat draait; in de
   hoogte is er toch altijd ruimte genoeg. (Hans, 21-09-2026)
   `nowrap` is niet alleen netter: het is ook waaraan de app ziet dat iets niet
   past, want dan steekt de tekst buiten zijn vakje uit. */
.klavier b, .klavier span {
  display: block; white-space: nowrap; overflow: hidden;
}
.klavier b { font-weight: 600; }
.klavier span { color: var(--zacht); font-variant-numeric: tabular-nums; }
/* Welke van de twee namen er staat, bepaalt `klavierMaat()` door te meten. */
.klavieren[data-naam="lang"] .kort { display: none; }
.klavieren[data-naam="kort"] .lang { display: none; }
/* Het pedaal ligt aan de voet en hoort niet in de stapel manualen; een beetje
   lucht erboven zegt dat zonder er woorden aan vuil te maken. */
.klavier[data-werk="ped"] { margin-top: 8px; }

/* Wissen staat achteraan en is de enige rode bediening in een keuzescherm:
   het is ook de enige handeling die je niet terug kunt draaien. */
.keuzerij .wis {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--rand); color: var(--in); font-size: 17px;
}

/* Het deelkopje op de afdruk. In punten, want dit komt op papier terecht:
   een px-maat wordt bij het afdrukken niet omgerekend. */
.blad .deelkop {
  font-size: calc(var(--maat) * 0.85); font-weight: 700;
  margin: calc(var(--maat) * 0.7) 0 calc(var(--maat) * 0.15);
}
.blad .brief .maatnr {
  display: block; font-size: calc(var(--maat) * 0.5); font-weight: 400;
  color: #555; white-space: nowrap;
}

/* ── de knoppenwand ── */
.wand { flex: 1; position: relative; padding: 18px 20px; min-height: 0; }
.paneel { position: relative; height: 100%; }

.knop {
  position: absolute;
  width: var(--knop); height: var(--knop);
  /* x = 0..1 over de bruikbare breedte, met een halve knop marge aan weerszijden */
  left: calc(var(--knop) / 2 + var(--x) * (100% - var(--knop)));
  top:  calc(50% + (var(--rij) - (var(--rijen) - 1) / 2) * var(--rijafstand));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--werkkleur);
  background: var(--vlak2);
  color: var(--tekst);
  text-align: center;
  line-height: 1.05;
  padding: 4px;
}
/* Zonder .knop ervoor, want de klavierbalken in het midden willen dezelfde
   kleur als de knoppen van hun werk. */
[data-werk="hw"]    { --werkkleur: var(--hw); }
[data-werk="borst"] { --werkkleur: var(--borst); }
[data-werk="boven"] { --werkkleur: var(--boven); }
[data-werk="zwel"]  { --werkkleur: var(--zwel); }
[data-werk="pos"]   { --werkkleur: var(--pos); }
[data-werk="rug"]   { --werkkleur: var(--rug); }
[data-werk="ped"]   { --werkkleur: var(--ped); }
[data-werk="overig"]{ --werkkleur: var(--overig); }
.knop[data-werk="hulp"]  { --werkkleur: var(--hulp); border-style: dashed; }

/* Een ventil of afsluiter zet (delen van) het orgel uit: een andere soort dan
   een register dat hooguit verkeerd klinkt. Vandaar een donkere kap met een
   dubbele ring, zodat hij er in één oogopslag anders uitziet. Het nummer blijft
   leesbaar, want daarop registreer je. */
.knop[data-afsluiter] {
  --werkkleur: var(--afsluiter);
  background: var(--afsluiterVul);
  box-shadow: inset 0 0 0 3px var(--vlak);
  border-style: dashed;   /* zoals de andere hulpen: dit klinkt niet zelf */
}

/* De klavieren zitten tussen de twee registergroepen in. Zonder aanduiding is
   dat een raadselachtig gat. */
.midden {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  color: var(--zacht); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; pointer-events: none;
  /* Staand gezet: de ruimte tussen de twee registergroepen is smal, zoals op
     een dispositiekaart gebruikelijk is. */
  writing-mode: vertical-rl; white-space: nowrap;
}

/* Een blind gat: er zit wel een plek, maar geen register. Hij hoort in beeld
   te staan, want je telt langs de posities — maar hij doet niets. */
.knop.leeg {
  border-style: dotted; border-color: var(--rand);
  background: transparent; color: var(--zacht); opacity: .55;
}
.knop.leeg .nummer { font-size: calc(var(--knop) * 0.22); font-weight: 500; }

/* Staat de naam níét in de knop, dan hoort hij daar ook niet te staan — en
   krijgt het nummer de vrijgekomen ruimte. */
.wand:not([data-labels="in"]) .naam,
.wand:not([data-labels="in"]) .maat { display: none; }
.wand:not([data-labels="in"]) .nummer { font-size: calc(var(--knop) * 0.42); }

/* De naam naast de knop. Alleen als er horizontaal ruimte over is — bij smalle
   kolommen naast elkaar is dat zo, bij twee lange rijen nooit. */
.knoplabel { display: none; }
.wand[data-labels="naast"] .knoplabel {
  display: block;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--labelbreedte);
  font-size: clamp(11px, calc(var(--knop) * 0.27), 15px);
  line-height: 1.2; color: var(--tekst);
}
.wand[data-labels="naast"] .knop.aan .knoplabel { color: var(--tekst); }
.knop[data-kant="rechts"] .knoplabel { left: 118%;  text-align: left; }
.knop[data-kant="links"]  .knoplabel { right: 118%; text-align: right; }
.knoplabel b { font-weight: 600; }

.knop .nummer { font-size: calc(var(--knop) * 0.30); font-weight: 700; letter-spacing: -0.02em; }
.knop .naam   { font-size: calc(var(--knop) * 0.145); font-weight: 600; max-width: 94%; hyphens: none; }
.knop .naam.lang { font-size: calc(var(--knop) * 0.115); }   /* Violagamba, Harmonica, … */
.knop .maat   { font-size: calc(var(--knop) * 0.135); opacity: .75; white-space: nowrap; }

/* Uitgetrokken. De rand houdt de kleur van het werk; die stond hier eerst op
   de vulkleur en dan zie je bij een open register niet meer bij welk werk het
   hoort. (Hans, 05-10-2026) */
.knop.aan { background: var(--vul); color: var(--vulTekst); }

/* Wisseling: groene pijl omhoog = uittrekken, rode pijl omlaag = induwen.
   Groen en rood zitten in de vúlling en niet in de rand, zodat ook een knop
   die iets moet doen laat zien bij welk werk hij hoort. (Hans, 05-10-2026)
   De tint rekent met de achtergrond van het thema, dus in het donker wordt het
   diep en op papier pastel, zonder dat het twee keer ingesteld hoeft.

   ⚠️ De tekstkleur hoort hier expliciet bij. Een knop die uitgetrokken moet
   worden is in de doelstand óók 'aan', en die regel zet de tekst op de kleur
   die bij een wítte vulling hoort. Op een groene vulling zakt het contrast dan
   naar 1,4 en is het nummer onleesbaar. Met de gewone tekstkleur is het 8,5.

   Deze regels moeten specifieker blijven dan .knop.aan hierboven, want die zet
   nog steeds de vulling en de tekstkleur. Vandaar `body` ervoor. */
body .knop.uittrekken { background: color-mix(in srgb, var(--uit) 32%, var(--vlak2)); color: var(--tekst); }
body .knop.induwen    { background: color-mix(in srgb, var(--in)  32%, var(--vlak2)); color: var(--tekst); }

.pijl {
  /* Staat grotendeels bóven de knop, zodat hij het nummer niet afdekt. */
  position: absolute; top: calc(var(--knop) * -0.15); left: 50%;
  transform: translateX(-50%);
  width: calc(var(--knop) * 0.38); height: calc(var(--knop) * 0.38);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--knop) * 0.26); font-weight: 700; line-height: 1;
  color: #fff;
  box-shadow: 0 0 0 3px var(--vlak);
}
.knop:not(.uittrekken):not(.induwen) .pijl { display: none; }
.knop.uittrekken .pijl { background: var(--uit); }
.knop.induwen    .pijl { background: var(--in); }

.vraag {
  position: absolute; right: 4%; bottom: 2%;
  width: calc(var(--knop) * 0.24); height: calc(var(--knop) * 0.24);
  border-radius: 50%; background: var(--zacht); color: var(--vlak);
  font-size: calc(var(--knop) * 0.16); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── volledige stand, altijd in beeld ── */
.standlijst {
  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px;
  padding: 8px 20px 10px;
  border-top: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}
.standrij { display: flex; align-items: baseline; gap: 7px; font-size: 15px; }
.standrij .label { font-size: 12px; color: var(--zacht); text-transform: lowercase; }
.standrij .cijfers { font-weight: 600; letter-spacing: 0.06em; }

/* De streep tussen links en rechts. Bij een orgel waarvan de opschriften aan
   beide zijden gelijk zijn (Oirschot heeft een A1 links én rechts) zegt de
   plek in de rij welke van de twee je moet hebben, precies zoals de organist
   het zelf opschrijft: A1 A2 | A1 A4. */
.cijfers .pijp, #verschil .pijp {
  color: var(--zacht); font-weight: 400; padding: 0 0.15em;
}
.standrij .leeg { color: var(--zacht); font-weight: 400; }

/* ── onderbalk ── */
.onderbalk {
  display: flex; align-items: stretch; border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav {
  flex: 0 0 22%; min-height: 96px;
  font-size: 56px; line-height: 1;
  background: transparent; color: var(--tekst); border: none;
}
.nav:active:not(:disabled) { background: var(--vlak2); }
.nav:disabled { color: var(--rand); }   /* aan het begin of eind */
/* Krapper dan voorheen (was 12/16 en 6px onder de letters). Die lucht is op
   14-09-2026 ingeleverd om de grotere omschrijving te betalen: zo kost de hele
   ingreep nog maar één pixel knopdiameter in plaats van drie. */
.stand { flex: 1; text-align: center; padding: 8px 8px 8px; min-width: 0; }
/* De letterbalk houdt de hoogte van één letter, ook als er nog geen letters
   zijn. Anders zakt bij een orgel zonder registratie de hele wand omlaag. */
.letters { display: flex; gap: 8px; justify-content: center; margin-bottom: 2px;
           flex-wrap: wrap; min-height: 38px; }
.letter {
  /* min-width en padding in plaats van een vaste breedte: een sub heet B1 en
     past niet in een vakje van één letter. (10-10-2026) */
  min-width: 38px; height: 38px; padding: 0 7px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
  background: var(--vlak2); color: var(--zacht); border: 1px solid var(--rand);
}
.letter.nu { background: var(--tekst); color: var(--vlak); border-color: var(--tekst); }

/* Een stip onder de letter markeert dat die opnieuw begint. Zo zie je de opzet
   van het hele stuk in de balk, zonder ergens in te duiken. */
.letter { position: relative; }
.letter.opnieuw::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--aanwijzing);
}
.letter.nu.opnieuw::after { background: var(--aanwijzing); }
#aanwijzing:empty { display: none; }
#aanwijzing {
  font-size: 18px; font-weight: 600; color: var(--aanwijzing);
  letter-spacing: .02em;   /* geen marge: die telde mee in de rijhoogte */
}
.wijzigbalk button.aan { background: var(--aanwijzing); color: #14100a; border-color: var(--aanwijzing); }
/* Deze twee regels stonden op --zacht, de gedempte kleur van het speelscherm.
   Op verzoek van Hans (28-08-2026) op --dialoog: nog steeds rustiger dan de
   knoppen, maar leesbaar. Het zijn ook de enige regels hier die je echt leest
   in plaats van in één blik ziet.

   En sinds 14-09-2026 een stuk groter, na de eerste publieke bespeling met de
   app erbij. Dit is wat de registrant ter plekke leest — "ik doe de
   rechterregisters wel" — en op 15px was dat vanaf de bank niet te doen. Het
   kost bijna niets: de knop wordt bijna altijd door de breedte begrensd, dus
   een paar pixels van de onderbalk merkt de wand niet. Gemeten op de krapste
   stand (1024×768 liggend, Sint-Jan): één pixel kleinere knop.

   Twee regels hoogte vast gereserveerd. Nu de omschrijving leesbaar is komen
   er zinnen in te staan in plaats van etiketten, en een zin die afbreekt zou
   de wand laten verschuiven op het moment dat je bladert. */
.omschrijving {
  font-size: 20px; color: var(--tekst); margin-bottom: 2px;
  line-height: 1.25; min-height: 2.5em;
}
/* Vaste line-height en een reservering van precies dat, om dezelfde reden als
   bij de contextregel hierboven: het minteken en de streep tussen links en
   rechts kunnen uit een ander lettertype komen en maken de regel anders hoger
   dan de plek die ervoor gereserveerd is. */
.verschil {
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.25; min-height: 1.25em;
}
.verschil .u { color: var(--uit); }
.verschil .i { color: var(--in); }


/* ── kopbalk-knoppen ── */
.knoppen { display: flex; align-items: center; gap: 8px; }
.mini:disabled { opacity: .35; }
.mini {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  background: var(--vlak2); color: var(--tekst); border: 1px solid var(--rand);
}
/* De modusknop is de meest ingrijpende bediening in de kopbalk: hij bepaalt
   of je iets kunt veranderen. Daarom nadrukkelijker dan Licht en Afdruk —
   maar niet gevuld zolang hij uit staat, want dat zou licht toevoegen op een
   scherm dat juist donker moet blijven. */
/* Terug hoort bij het scherm dat openstaat en staat daarom naast de knop die
   bepaalt wat je ermee kunt, niet aan de andere kant van de balk. */
/* Het i-tje bij de orgelkiezer. In de kleur die in deze app "let op" betekent,
   zodat je ziet dat er iets te lezen valt zonder dat het schreeuwt. */
/* ⚠️ Het i-tje hangt als badge in de hoek van de orgelknop en staat absoluut;
   het omhulsel is precies zo breed als de knop. Dat is geen opmaakgril maar de
   enige vorm die aan Hans' eis voldoet dat het de knoppen geen ruimte kost.
   Een balk die mag wikkelen wíkkelt namelijk, hij krimpt niet: liep de i als
   gewone knop mee, dan kostte hij 44 px en viel de balk op een tweede regel
   zodra het net niet paste. Bij Zaltbommel ging de kopbalk daardoor van 58
   naar 102 px, en die 44 px gingen van de knoppen af. (Hans, 05-10-2026) */
.orgelvak { position: relative; display: inline-flex; }
.info {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; padding: 0;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--aanwijzing); border-radius: 50%;
  background: var(--vlak); color: var(--aanwijzing);
}
.info[hidden] { display: none; }

/* De tekst in dat venster: koppen klein en in dezelfde kleur, alinea's gewoon
   leesbaar. Het venster schuift zelf als het lang wordt. */
.orgelinfo { overflow: auto; }
.orgelinfo h3 { margin: 16px 0 5px; font-size: 15px; color: var(--aanwijzing); }
.orgelinfo h3:first-child { margin-top: 0; }
.orgelinfo p { margin: 0; line-height: 1.5; color: var(--tekst); }
.orgelinfo a { color: var(--aanwijzing); }

.mini.terug { margin-left: 8px; }
.mini.wijzig {
  margin-left: 10px;
  font-weight: 600; font-size: 14px; padding: 8px 18px;
  color: var(--tekst); border: 2px solid var(--tekst);
}
body[data-modus="wijzig"] #wijzigKnop {
  background: var(--tekst); color: var(--vlak); border-color: var(--tekst);
}
/* De naam van de organist is een knop (afmelden), maar hij hoort niet als knop
   in beeld te staan: in de balk is het al druk genoeg. Een stippellijntje
   eronder is genoeg om te laten zien dat er iets achter zit. */
.organist {
  font: inherit; font-size: 12px; color: var(--dialoog);
  background: none; border: 0; padding: 2px 0; text-align: right;
  border-bottom: 1px dotted var(--rand);
}
.organist:disabled { border-bottom-color: transparent; }
.laadfout {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 12%; color: var(--tekst); font-size: 15px; line-height: 1.6;
}
.laadfout p { color: var(--dialoog); max-width: 46ch; }
/* De onderbalk houdt zijn hoogte, ook als een letter geen omschrijving of
   aanwijzing heeft. Anders verspringt de knoppenwand bij elke keer bladeren —
   en juist daar wil je dat de knoppen blijven staan waar ze stonden. Loopt een
   omschrijving over twee regels, dán mag hij groeien; dat is zeldzaam en het
   alternatief is tekst afkappen. */
/* De gereserveerde hoogte moet bij de grootste inhoud passen die erin kan
   staan, dus staat de font-size hier op dezelfde 18px als de regels erbinnen.
   Stond dit op de geërfde 16px, dan paste een regel van 18px er net niet in en
   groeide de balk zodra *eerst alles dicht* verscheen: 3 px, precies genoeg om
   de knoppenwand te laten verspringen bij het bladeren. (14-09-2026)

   ⚠️ En daarom óók een vaste line-height. Zonder die regel bepaalt het lettertype
   zelf hoe hoog een regel wordt, en een teken dat uit een reservelettertype komt
   maakt hem net iets hoger dan de reservering. Dat scheelde nog eens een halve
   pixel, genoeg om dezelfde proef te laten vallen. Reserveer met dezelfde
   line-height als waarmee je tekent. */
.contextregel {
  display: flex; gap: 10px; justify-content: center; align-items: baseline;
  font-size: 18px; line-height: 1.25; min-height: 1.25em; margin-bottom: 0;
}
/* Deel en maat blijven op --dialoog: ze horen erbij maar zijn niet de zin die
   je leest, en drie even luide regels naast elkaar worden een brij. */
.deelregel { font-size: 18px; color: var(--dialoog); }

.versie { font-size: 11px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.versie.mismatch {
  color: #fff; background: var(--in); font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.vlag {
  font: inherit; font-size: 12px; color: var(--in);
  background: transparent; border: 1px solid var(--in);
  padding: 4px 10px; border-radius: 999px;
}
.vlag.verouderd { background: var(--in); color: #fff; }

/* ── wijzigmodus ── */
.wijzigbalk {
  display: none; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 20px; border-top: 1px solid var(--rand);
}
body[data-modus="wijzig"] .wijzigbalk { display: flex; }
/* Op een keuzescherm gaat de wijzigbalk weg: die hoort bij de registratie die
   in beeld staat, en die staat er dan niet. Deze regel moet ná de regel
   hierboven staan én specifieker zijn, anders wint 'display: flex'. */
body[data-modus="wijzig"]:not([data-scherm=""]) .wijzigbalk { display: none; }
.wijzigbalk .uitleg { font-size: 13px; color: var(--dialoog); margin-right: auto; }
.wijzigbalk button {
  font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  background: var(--vlak2); color: var(--tekst); border: 1px solid var(--rand);
}
.wijzigbalk button:disabled { opacity: .35; }
.wijzigbalk button[data-doe="in-lijst"] { font-variant-numeric: tabular-nums; }
.wijzigbalk button.waarschuw { color: var(--in); border-color: var(--in); }

/* In wijzigmodus zijn de knoppen aantikbaar; dat mag je zien. */
body[data-modus="wijzig"] .knop { cursor: pointer; }
body[data-modus="wijzig"] .knop:active { transform: translate(-50%, -50%) scale(0.94); }
body[data-modus="wijzig"] .letter { cursor: pointer; }

/* ── doorgeven ── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.venster {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px;
  padding: 20px; width: min(680px, 100%); max-height: 85vh;
  display: flex; flex-direction: column; gap: 10px;
}
.venster h2 { margin: 0; font-size: 18px; }
.venster .fijn { margin: 0; font-size: 13px; color: var(--tekst); }
.venster .keuze label { color: var(--dialoog); }
.venster .fijn.nietsVanJou { color: var(--dialoog); }
.venster textarea {
  flex: 1; min-height: 220px; resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--vlak2); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 8px; padding: 10px;
  user-select: text; -webkit-user-select: text;
}
.venster-knoppen { display: flex; gap: 8px; justify-content: flex-end; }
.venster-knoppen button {
  font: inherit; font-size: 15px; padding: 11px 22px; border-radius: 8px;
  background: var(--vlak2); color: var(--tekst); border: 1px solid var(--rand);
  /* Even breed als hun buurman, ook al is het ene woord langer: twee knoppen
     naast elkaar die verschillen in maat lezen als een rangorde die er niet is. */
  min-width: 9rem;
}
.venster-knoppen button[hidden] { display: none; }


/* ── afdruklijst ──────────────────────────────────────────────────────────
   Op het scherm een voorbeeld in het venster; op papier alleen het blad.
   De | tekens staan in een eigen kolom, zodat ze recht onder elkaar komen. */

.keuze { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--dialoog); }
.keuze label { display: flex; align-items: center; gap: 6px; }
.keuze .lettergrootte select {
  font: inherit; font-size: 14px; padding: 5px 8px;
  background: var(--vlak2); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 6px;
}
.keuze .datum input {
  font: inherit; font-size: 14px; padding: 5px 8px; width: 15em;
  background: var(--vlak2); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 6px;
}

.blad {
  --maat: 14pt;        /* maat van de cijfers; de rest schaalt mee */
  flex: 1; overflow: auto; padding: 20px 24px; border-radius: 8px;
  background: #fff; color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.blad .kop { margin-bottom: 1em; }
.blad h3 { margin: 0; font-size: calc(var(--maat) * 1.15); letter-spacing: -0.01em; }
.blad .onderkop { margin-top: 0.3em; font-size: calc(var(--maat) * 0.6); color: #555; }

.blad .regel {
  display: flex; align-items: flex-start; gap: 0.5em;
  padding: 0.45em 0; border-top: 1px solid #e4e4e4;
}
.blad .regel:first-child { border-top: none; }
.blad .brief {
  flex: 0 0 2.2em;
  font-size: var(--maat); font-weight: 700; color: #111;
  line-height: 1.35;
}
.blad .inhoud { flex: 1; min-width: 0; }
.blad .toelichting { font-size: calc(var(--maat) * 0.6); color: #555; margin-bottom: 0.15em; }
.blad .namen { font-size: calc(var(--maat) * 0.5); color: #444; margin-top: 0.25em; line-height: 1.45; }
.blad .aanwijzing {
  font-size: calc(var(--maat) * 0.55); font-weight: 600; color: #b45309;
  margin-bottom: 0.1em;
}

/* Kolomindeling: per knoppenkolom een lijstje onder elkaar, met een streep
   tussen de twee registergroepen. Dat is de | uit het handgeschreven lijstje,
   maar dan als doorlopende lijn — dan staat hij altijd recht. */
.blad .blok { display: flex; align-items: stretch; gap: 0.55em; }
.blad .groep { display: flex; gap: 0.55em; }
.blad .kolom {
  display: flex; flex-direction: column;
  min-width: 2.2em; text-align: right;
}
.blad .pijp { border-left: 2px solid #bbb; }

/* Gemengde vorm: een horizontale band plus verticale kolommen, zoals Oirschot
   (band boven) en de Sint-Jan (band onder). Eén streep door het midden, en aan
   elke kant de band en de kolommen onder elkaar. De linkerkant lijnt naar de
   streep toe uit, de rechterkant ervandaan, zodat het blad de kast spiegelt. */
/* Twee kanten met één streep ertussen die door alle regels loopt. Zo staat de
   scheiding tussen links en rechts op één lijn in plaats van mee te schuiven
   met de tekst. Wordt gebruikt door de gemengde vorm (band plus kolommen) en
   door de rijvorm van een speeltafel met twee zijden, zoals Zaltbommel. */
.blad .tweezijdig {
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 0.55em;
  align-items: start;
}
.blad .tweezijdig .pijp  { grid-column: 2; align-self: stretch; }
.blad .tweezijdig .links  { grid-column: 1; justify-self: end; text-align: right; }
.blad .tweezijdig .rechts { grid-column: 3; justify-self: start; }
.blad .tweezijdig .groep { display: flex; gap: 0.55em; }

/* Rijindeling: één regel per knoppenrij. */
.blad .stapel { display: flex; flex-direction: column; }

.blad .blok, .blad .stapel {
  font-size: var(--maat); font-weight: 700; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.blad .rij { white-space: nowrap; }
.blad .kolom span { display: block; }

/* Uittrekken groen met een plus, induwen rood met een min. De tekens blijven
   staan, zodat het op een zwart-witprinter óók te onderscheiden is; de kleur
   is de snelle herkenning en niet de drager. Donkerder dan het groen van het
   scherm (#34a85d), want dat is op wit papier te licht. (Hans, 03-10-2026) */
.blad .uit { color: #14532d; }
.blad .namen .uit { color: #14532d; }
.blad .in { color: #c0392b; }
.blad .namen .in { color: #c0392b; }

@media print {
  @page { margin: 16mm; }
  /* Het papier is wit, het scherm niet. Zonder deze regel neemt de printer de
     achtergrond van de app mee: bij het donkere thema een zwart vlak over de
     hele pagina onder de lijst, en bij het lichte een grijze waas. Ontdekt op
     31-08-2026 toen Hans een pdf maakte en de onderste tweederde zwart was.
     `body` en `html` staan buiten #afdruk, dus het verbergen hieronder raakt
     ze niet — hun achtergrond moet apart weg. */
  html, body { background: #fff !important; color: #000; }
  #afdruk { background: none !important; }   /* het grijze waas van de overlay */
  body > *:not(#afdruk) { display: none !important; }
  #afdruk, #afdruk .venster {
    position: static; display: block; background: none; border: none;
    padding: 0; margin: 0; width: auto; max-height: none;
  }
  #afdruk h2, #afdruk .keuze, #afdruk .venster-knoppen { display: none !important; }
  .blad { overflow: visible; padding: 0; color: #000; border-radius: 0; }
  .blad .regel { break-inside: avoid; }
  .blad .kop { break-after: avoid; }
}

/* ── online bewaren ───────────────────────────────────────────────────────
   Eén regel onder de tekst: wachtwoord en knop. Hij verschijnt alleen als er
   iets te bewaren valt, zodat er nooit een vakje staat dat toch niets doet. */
.bewaarMelding {
  margin: .5rem 0 0;
  min-height: 1.2em;           /* houdt zijn hoogte, zodat het venster niet springt */
  font-size: .85rem;
  color: var(--dialoog);
}
.bewaarMelding.fout { color: var(--in); }
.bewaarMelding.goed { color: var(--uit); }

/* ── de knop 'Nieuw stuk' / 'Nieuwe lijst' ───────────────────────────────
   Onder de lijst, over de volle breedte, en met een plus ervoor. Groot genoeg
   om aan te tikken met een hand die net van de klavieren komt. */
.nieuwknop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 14px 0 4px;
  font: inherit; font-size: 17px; font-weight: 600;
  padding: 14px 16px; border-radius: 10px;
  background: var(--vlak2); color: var(--tekst);
  border: 1px dashed var(--zacht);
}
.nieuwknop .plus {
  font-size: 21px; font-weight: 700; line-height: 1;
  color: var(--uit);
}

/* ── het blaadje: omschrijving, deel en maat ─────────────────────────────── */
.venster.smal { width: min(420px, 100%); }
.venster label {
  font-size: .85rem; color: var(--zacht); margin: 4px 0 -4px;
}
.venster input[type="text"] {
  font: inherit; font-size: 17px;      /* 16 of meer, anders zoomt iOS in */
  padding: .6rem .7rem; border-radius: .4rem;
  background: var(--vlak2); color: var(--tekst); border: 1px solid var(--rand);
}
.venster input[type="text"]:focus { outline: 2px solid var(--aanwijzing); outline-offset: 1px; }
.venster-knoppen button.voorkeur { background: var(--vul); color: var(--vulTekst); border-color: var(--vul); }

/* Een knop met alleen een tekening erin. Even hoog als zijn buren in de balk. */
.wijzigbalk .blaadje {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.2rem; min-height: 3rem; padding: 4px 12px;
}
/* De maat staat hier en niet in de html: dan hoeft de tekening niet mee te
   veranderen als de knop groeit. */
.wijzigbalk .blaadje svg { display: block; width: 28px; height: 28px; }

/* ── het slot ─────────────────────────────────────────────────────────────
   Ligt over de hele app tot het wachtwoord is gegeven. Bewust rustig: het is
   geen waarschuwing maar een deur. */
.slot {
  position: fixed; inset: 0; z-index: 50;
  background: var(--vlak);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.slot[hidden] { display: none; }
.slotvenster {
  background: var(--vlak2); border: 1px solid var(--rand); border-radius: 14px;
  padding: 24px; width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 10px;
}
.slotvenster h1 { margin: 0; font-size: 22px; }
.slotvenster .wie { margin: 0 0 6px; font-size: 15px; color: var(--dialoog); }
.slotvenster label { font-size: .85rem; color: var(--zacht); }
.slotvenster input {
  font: inherit; font-size: 17px;          /* 16px of meer, anders zoomt iOS in */
  padding: .6rem .7rem; border: 1px solid var(--rand); border-radius: .4rem;
  background: var(--vlak); color: var(--tekst);
}
.slotvenster input:focus { outline: 2px solid var(--aanwijzing); outline-offset: 1px; }
.slotknoppen { display: flex; gap: 8px; }
.slotvenster button {
  font: inherit; font-size: 15px; padding: .6rem 1rem; border-radius: .4rem;
  background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand);
  flex: 1;
}
.slotvenster button.terug { flex: 0 0 auto; color: var(--zacht); }
.slotvenster .fijn { margin: 0; font-size: 12px; color: var(--zacht); }
.slotMelding {
  margin: 0; min-height: 1.2em;    /* houdt zijn hoogte, zodat het niet springt */
  font-size: .85rem; color: var(--dialoog); line-height: 1.35;
}
.slotMelding:empty { min-height: 0; }
.slotMelding.fout { color: var(--in); }

/* ── Letter erbij en eruit als teken ──────────────────────────────────────
   Twee knoppen die een handeling doen die je niet hoeft te lezen: een plus of
   een min bij een letter. Het teken draagt de betekenis, de X staat voor "een
   letter" — welke, dat hangt ervan af waar je staat.
   Minstens 44 px, anders zijn ze op een tablet niet te raken. */
.wijzigbalk .teken {
  min-width: 3.2rem;
  min-height: 3rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding-left: .7rem;
  padding-right: .7rem;
}
.wijzigbalk .teken span {
  font-size: 1.8rem;
  font-weight: 700;
  margin-right: .08em;
  vertical-align: -.05em;
}
.wijzigbalk .erbij span { color: var(--uit); }   /* zelfde groen als uittrekken */
.wijzigbalk .eruit span { color: var(--in);  }   /* zelfde rood als induwen    */

/* ── Opslaan in de kopbalk ────────────────────────────────────────────────
   Staat naast de melding "nog niet doorgegeven" en verschijnt tegelijk met
   haar. Iets nadrukkelijker dan de andere kopknoppen, want dit is de enige
   daar die iets vastlegt. */
/* De melding ís de opslaanknop. Groen zolang het gewoon nog moet gebeuren;
   de bestaande `verouderd`-opmaak neemt het over zodra het dagen blijft liggen. */
.vlag.kanBewaren:not(.verouderd) {
  border-color: var(--uit);
  color: var(--uit);
  font-weight: 600;
}

/* ── de schakelaar "eerst alles dicht" ────────────────────────────────────
   Twee helften in één pil: 0 = begin bij nul, +/− = verschil met de vorige.
   Allebei aantikbaar, de geldende helft is gevuld. Goud, dezelfde kleur als
   de regel "eerst alles dicht" onder de letterbalk — zo horen ze bij elkaar.
   Bij de eerste letter valt er niets te kiezen; dan staat de hele pil uit. */
.schakel {
  display: inline-flex;
  border: 1px solid var(--rand);
  border-radius: 999px;
  overflow: hidden;
  background: var(--vlak2);
}
.schakel button {
  font: inherit; font-size: 19px; font-weight: 600;
  min-width: 3.3rem; min-height: 3rem;
  padding: 0 .55rem;
  border: 0; border-radius: 0;
  background: transparent; color: var(--zacht);
}
.schakel button + button { border-left: 1px solid var(--rand); }
.schakel button.aan { background: var(--aanwijzing); color: #14100a; }
.schakel button:disabled { opacity: .35; }
.schakel:has(button:disabled) { opacity: .6; }