/* ============================================================
   Psalmen 1773
   ============================================================ */

@font-face {
  font-family: "EB Garamond";
  src: url("vendor/ebgaramond-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("vendor/ebgaramond-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("vendor/librefranklin-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("vendor/librefranklin-medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("vendor/librefranklin-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


* {
  box-sizing: border-box;
}



/* ============================================================
   Koppen en overslaan-links
   Een schermlezer springt van kop naar kop en een toetsenbord
   springt met een overslaan-link. Deze app had geen van beide:
   elke kop zat in een paneel dat dicht was, en de honderdvijftig
   knoppen van de lijst lagen tussen de bovenbalk en het lied.
   Zie bevinding W8 en W11 in audit/wcag.html.

   De koppen hieronder waren div's en zijn h1, h2 en h3 geworden.
   Ze zien er hetzelfde uit als daarvoor: alleen de marge en het
   vette van de browser worden hier weer weggehaald, de rest staat
   ongewijzigd bij de opmaak zelf.

   Op de naam van de klasse en niet op de tag. Sinds elke bladzijde
   zijn eigen bestand is, bepaalt de generator per bladzijde welk
   niveau een kop krijgt: de titel van het lied is een h1 op de
   bladzijde van dat lied en een h2 op de lijst, en op een bladzijde
   waar het beginscherm alleen de weg terug is, is die kop helemaal
   geen kop meer. Stond dit op de tag, dan sprong de opmaak mee met
   dat niveau — en dat is precies wat niet mag.
   ============================================================ */

.begin-titel,
.volgen-naam,
.sectielabel,
.liedtitel,
.regel-kop,
.verse-num {
  margin: 0;
  font-weight: inherit;
}


/* Wel voorgelezen, niet te zien. Niet display: none en niet
   visibility: hidden — die halen het ook bij de schermlezer weg.
   Dit is de gangbare manier: één beeldpunt groot, weggeknipt. */

.alleen-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* De overslaan-link ligt buiten beeld tot hij focus krijgt. Dan
   komt hij tevoorschijn op de plek waar hij hoort: linksboven,
   los van de bovenbalk. Wie met een muis werkt ziet hem nooit. */

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;

  padding: 10px 16px;

  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;

  font-family: var(--ui);
  font-size: 15px;

  border: 2px solid var(--accent-ink);
}

.overslaan:focus {
  left: 8px;
  top: 8px;
}


/* De browser schuift een element dat focus krijgt netjes in beeld,
   maar hij weet niet dat er boven en onder een balk staat die blijft
   liggen. Twee van de vierentwintig tabstops op het liedscherm
   belandden daardoor geheel achter de onderbalk: u drukt Tab, er
   gebeurt zichtbaar niets, en de knop waar u nu staat is onzichtbaar.
   Deze twee marges zeggen de browser hoeveel ruimte hij extra moet
   houden. De maten worden in app.js opgemeten. Zie bevinding W9. */

a,
button,
input,
select,
textarea,
[tabindex] {
  scroll-margin-top: calc(var(--topbar-hoogte, 58px) + 12px);
  scroll-margin-bottom: calc(var(--onderbalk-hoogte, 96px) + 12px);
}


/* Waar een sprong u neerzet, hoort te zien te zijn. */

.overslaan-landing:focus {
  /* currentColor en niet --accent. In Kerkblauw ís --accent dezelfde
     kleur als de kopbalk (#16263c), dus daar was deze ring onzichtbaar
     én tekende hij een donkere streep dwars door het gouden woordmerk
     erboven — precies het "half doorgesneden" dat Benny meldde. De
     kleur van de tekst zelf steekt per definitie af tegen zijn eigen
     achtergrond, en dus doet de ring dat ook.

     En twee beeldpunten marge in plaats van vier: met vier liep hij
     bij de kop van het beginscherm tot in de regel erboven. */
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* De landing van een overslaan-link is een kóp en geen vak, juist
   zodat de focusring er wél omheen valt — zie springNaarDoel(). Hier
   stond eerst het omgekeerde: outline: none op #verses en .song. Dat
   maakte de sprong onzichtbaar, en dat was precies de klacht. */


/* ============================================================
   Kleuren
   Drie thema's: Papier (standaard), Kerkblauw en Avond. Tokens
   uit design_handoff_psalmen1773/README.md.

   Hier stond dat de notenbalklijnen en het maatstreepje een
   gedempte --staff-kleur kregen. Dat was ooit zo en is het niet
   meer: ABCJS krijgt zijn inktkleur mee bij het tekenen
   (foregroundColor), niet uit deze stylesheet, en de hele balk
   volgt dus --ink. Het token --staff stond er nog wel, in vijf
   thema's, en werd nergens gebruikt. Het is weg. Zie bevinding W7
   — die staat in het rapport niet omdat er iets aan mankeerde,
   maar omdat dit commentaar de audit zelf op een dwaalspoor bracht:
   er is een ronde lang aan een kleur gerekend die niet bestond.
   ============================================================ */

:root,
[data-theme="papier"] {
  --bg: #f7f3ea;
  --panel: #fffdf8;
  --header-bg: #f7f3ea;
  --header-ink: #1e1b16;
  /* Alleen Papier had hier een probleem: 2,79 op de kopbalk, en het
     draagt de toevoeging onder de bundelnaam ("Berijming 1773").
     Kerkblauw en Avond halen het met hun eigen waarde ruim, want daar
     is de kopbalk donker.

     11 september 2026: bij het testen op de live site voelde deze
     bruinige familie — hier, in --muted en in het goud van het
     woordmerk hieronder — lichter aan dan het cijfer deed vermoeden.
     Alle drie een stap donkerder: 4,62 → 5,62, en 5,01 → 6,30 bij
     --muted. Alleen in Papier, want dat is waar deze kleur op een
     lichte ondergrond staat; in Kerkblauw en Avond is de kopbalk
     zelf al donker en zou donkerder hier juist averechts werken. */
  --header-muted: #676052;
  --ink: #1e1b16;
  --muted: #5e594c;
  --line: #dcd4c2;

  /* De rand van een knop is iets anders dan een scheidslijn. Bij een
     scheidslijn stelt WCAG niets — die is versiering. Maar in het
     nummerraster is het haarlijntje het enige dat van honderdvijftig
     getallen honderdvijftig knoppen maakt, en dan geldt 3:1. Vandaar
     twee tokens waar er eerst één was. Zie bevinding W3. */
  --rand-knop: #9e895b;

  --accent: #2f4a3a;
  --accent-ink: #f7f3ea;

  /* Stond op #a98b4f, 2,92 op de kopbalk — hier is de kopbalk net zo
     licht als de rest van de bladzijde, dus dit gold droeg zijn eigen
     tekst (het woordmerk) nauwelijks. Nu 4,60. Niet naar de 5,6+ van
     --header-muted hierboven: dan verdwijnt het verschil tussen goud
     en het gewone bruingrijs, en juist dat verschil is het punt van
     een woordmerk. Zie ook de aantekening bij Kerkblauw: dezelfde
     kleur, tegenovergestelde beslissing. */
  --gold: #826b3d;
  --error: #6b2f2f;
}

[data-theme="kerkblauw"] {
  --bg: #fbfaf6;
  --panel: #ffffff;
  --header-bg: #16263c;
  --header-ink: #f4f1ea;
  --header-muted: #9fb0c6;
  --ink: #16263c;
  /* Was #8a8272 en haalde daarmee 3,81 op wit — de hele uitleglaag
     van de app staat in deze kleur. Zie bevinding W1.

     11 september 2026: nog een stap donkerder, van 4,63 naar 6,06.
     Dezelfde reden als bij Papier hierboven — deze kleur staat hier
     op de lichte ondergrond van het beginscherm, niet op de donkere
     kopbalk, dus donkerder helpt hier wél. */
  --muted: #655f54;
  --line: #d3cfc4;
  --rand-knop: #998f76;
  --accent: #16263c;
  --accent-ink: #f4f1ea;

  /* Bewust ongewijzigd. Het woordmerk staat hier op de donkere
     kopbalk, en dit goud haalt daar al 6,62 — ruim boven de eis.
     Donkerder maken zou de tekst juist dichter naar de achtergrond
     toe schuiven en het contrast verlagen, niet verbeteren. Dezelfde
     kleur als in Papier, maar de kopbalk erachter is hier donker in
     plaats van licht, en dat draait de vraag om. */
  --gold: #c7a75c;
  --error: #6b2f2f;
}

[data-theme="avond"] {
  --bg: #101820;
  --panel: #16202b;
  --header-bg: #0c141b;
  --header-ink: #f0ede4;
  --header-muted: #8fa0b4;
  --ink: #ede9df;
  --muted: #8fa0b4;
  --line: #2a3440;
  --rand-knop: #586d86;
  --accent: #c7a75c;
  --accent-ink: #101820;
  --gold: #c7a75c;
  --error: #e7a8a8;
}

/* Zonder expliciete keuze volgt het toestel donker/licht; "Volg de
   telefoon" in Instellingen zet dan zelf hetzelfde data-theme, dus
   dit is puur de eerste tekening vóór JS heeft kunnen draaien. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #101820;
    --panel: #16202b;
    --header-bg: #0c141b;
    --header-ink: #f0ede4;
    --header-muted: #8fa0b4;
    --ink: #ede9df;
    --muted: #8fa0b4;
    --line: #2a3440;
    --rand-knop: #586d86;
    --accent: #c7a75c;
    --accent-ink: #101820;
    --gold: #c7a75c;
    --error: #e7a8a8;
  }
}

:root {
  --ui: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --book: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
}


/* ============================================================
   Basis
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;

  -webkit-text-size-adjust: 100%;
}

hr.hairline {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}


/* ============================================================
   Beginscherm
   Alleen de bundelkeuze; verder niets. Geen sticky balk nodig,
   het scherm zelf is kort.
   ============================================================ */

.beginscherm {
  display: flex;
  flex-direction: column;

  /* 100vh is op Android de hoogte zónder de adresbalk: staat die in
     beeld, dan valt de voettekst met Instellingen en Mijn liturgieën
     net onder de rand en moet je ervoor scrollen. dvh volgt wél wat
     er werkelijk zichtbaar is; vh blijft als terugval staan voor
     oudere browsers. */
  min-height: 100vh;
  min-height: 100dvh;

  max-width: 640px;
  margin: 0 auto;
}

.begin-header {
  padding: calc(22px + env(safe-area-inset-top)) 26px 26px;
  background: var(--header-bg);

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.begin-wordmark {
  /* Elf was de dunste tekst in de app: kapitalen, wijde letterafstand,
     goud. Twaalf met iets minder spatiëring leest merkbaar rustiger.
     De marge eronder geeft de focusring van de kop ruimte. */
  margin-bottom: 5px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.begin-titel {
  font-family: var(--book);
  font-size: 38px;
  line-height: 1.1;
  color: var(--header-ink);
}

.gold-rule {
  height: 2px;
  background: var(--gold);
}

/* 11 september 2026: stond op --muted (6,3:1), en dat las bij nader
   inzien mistig aan — bij nameten bleek dit de enige lopende alinea in
   de hele app die niet gewoon --ink is. In de handleiding en overal
   elders staat een alinea van deze lengte in --ink (.infopagina p);
   alleen hier, op het allereerste scherm dat iemand ziet, kreeg de
   tekst een lichtere toon mee. Dat verklaart waarom donkerder --muted
   niet hielp: het probleem zat niet in de tint, maar in de keuze om
   deze ene alinea uit te zonderen. Zie ook .liturgie-leeg hieronder,
   dezelfde soort tekst, dezelfde reparatie. */
.welkom {
  padding: 22px 26px 0;

  font-family: var(--book);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);

  text-wrap: pretty;
}

.welkom p {
  margin: 0;
}

/* Browserblauw vloekt met deze kleuren. Donkerder dan de lopende tekst
   plus een streep is genoeg om als verwijzing te lezen. */
.welkom a {
  color: var(--ink);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.welkom a:hover {
  /* Was goud, en daarmee werd een link mínder leesbaar op het moment
     dat u hem aanwees. Zie bevinding W2. */
  color: var(--accent);
}

/* De ondertekening. Stond op het beginscherm onder de welkomtekst en
   staat nu onder "Soli Deo Gloria" in Over deze site, met een witregel
   ertussen — vandaar de ruimere marge dan een gewone alinea krijgt.
   De selector noemt .infopagina mee omdat .infopagina p anders wint:
   die is specifieker dan een losse klasse.

   Cursief en gedempt: het blijft een handtekening. Goud was het,
   maar dat haalde 2,92 in Papier en 2,21 in Kerkblauw. */

.infopagina .ondertekening {
  margin: 30px 0 0;

  font-size: 16px;
  font-style: italic;
  color: var(--muted);
}

.bundelblok {
  padding: 24px 26px 8px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* De liturgierijen op het beginscherm staan wat dichter op elkaar dan
   de bundels erboven: het zijn er meer, en ze zijn ondergeschikt. */
#beginLiturgieen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Het blok is een flexkolom met een eigen tussenruimte. Een lege lijst
   telt daarin gewoon mee als vak, en dan staat die ruimte er twee keer
   — dát was het gat dat overbleef zodra de instelling op Geen stond.
   Een eigen marge erbij zetten hielp niet; die kwam er nog eens
   bovenop. Weg uit de rij dus, en de tussenruimte van het blok doet de
   rest. */

#beginLiturgieen:empty {
  display: none;
}

/* Zie de aantekening bij .welkom hierboven: dezelfde volzin-tekst,
   dezelfde reden om ink te gebruiken in plaats van muted. */
.liturgie-leeg {
  margin: 0 0 12px;

  font-family: var(--book);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.alle-liturgieen {
  align-self: flex-start;

  padding: 8px 0;

  border: 0;
  background: none;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 13px;

  cursor: pointer;
}

.alle-liturgieen:hover {
  color: var(--accent);
}

.sectielabel {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

#bundelrijen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bundelrij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  min-height: 56px;
  padding: 18px 20px;

  background: var(--panel);
  border: 1px solid var(--rand-knop);
  border-left: 3px solid var(--accent);
  border-radius: 0 2px 2px 0;

  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bundelrij:hover {
  border-color: var(--accent);
}

.bundelrij:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.bundel-naam {
  display: block;
  font-family: var(--book);
  font-size: 24px;
  color: var(--ink);
}

.bundel-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.bundel-aantal {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.begin-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.begin-kop .icon-btn {
  margin: -4px -8px 0 0;
  color: var(--header-ink);
}

.begin-footer {
  margin-top: auto;
  padding: 20px 26px calc(30px + env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-link {
  padding: 0;
  border: 0;
  background: none;

  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);

  cursor: pointer;
}

.footer-link:hover {
  color: var(--accent);
}


/* Eén link in Over deze site had geen enkele opmaak en hield dus het
   blauw van de browser: in Avond een contrast van 1,90. Dit dekt hem
   en elke link die er later bij komt. Zie bevinding W5. */

/* Alleen links zónder eigen klasse. Bij de eerste poging stond hier
   .infopagina a, en dat trof ook de knop-links (a.knop-hoofd): die
   kregen de accentkleur als tékst terwijl het ook hun achtergrond is
   — contrast 1,0, oftewel onzichtbaar. Gevonden door na te meten, en
   dat is precies waarvoor die meting er is. */

.infopagina a:not([class]) {
  color: var(--accent);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ============================================================
   Bovenbalk
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: calc(14px + env(safe-area-inset-top)) 16px 13px;

  background: var(--header-bg);
  border-bottom: 2px solid var(--gold);
}

/* De titel is tevens de weg omhoog: in een bundel naar de
   liederenlijst, in een liturgie naar het overzicht. Het chevronnetje
   maakt dat zichtbaar — zonder zo'n teken is een aantikbare titel
   nauwelijks te herkennen, en in de liturgie is hij de enige route
   omhoog (in een bundel staat er ook nog een Lijst-knop onderin). */

.topbar-titel {
  flex: 1;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0;
  border: 0;
  background: none;

  font-family: var(--book);
  font-size: 19px;
  color: var(--header-ink);
  text-align: left;

  cursor: pointer;
}

/* De tekst zelf houdt de opmaak die de titel vroeger had: naam en
   toevoeging naast elkaar op dezelfde schriftlijn. */

.topbar-titel-tekst {
  min-width: 0;

  display: flex;
  align-items: baseline;
  gap: 7px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Alleen tonen als er ook werkelijk ergens heen te gaan valt: op het
   overzicht zelf, en op de handleiding, leidt de titel nergens heen. */

.topbar-chevron {
  flex: 0 0 auto;
  display: none;
  color: var(--header-muted);
}

.topbar-titel.naar-lijst {
  cursor: pointer;
}

.topbar-titel.naar-lijst .topbar-chevron {
  display: block;
}

.topbar-titel:not(.naar-lijst) {
  cursor: default;
}

/* De naam krimpt niet mee; alleen de toevoeging erachter wijkt als
   het krap wordt. */

.topbar-naam {
  flex: 0 0 auto;
}

.topbar-sub {
  flex: 0 1 auto;
  min-width: 0;

  font-family: var(--ui);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--header-muted);

  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hier stond bij het indrukken color: var(--gold). Dat is eruit: in
   Papier haalde dat 2,92 op de kopbalk, en een andere kleur die het
   wél haalt is er niet — in Kerkblauw is de kopbalk donker en in
   Papier licht, dus elke vaste kleur valt aan één van de twee kanten
   weg. Een perskleur die een tiende seconde duurt weegt niet op tegen
   een label dat in die tiende seconde onleesbaar is. De knop houdt
   zijn chevron, zijn focusring en het hele vlak als aanraakvlak. */

.topbar-meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--header-muted);
  white-space: nowrap;
}

/* De naam van het lied, alleen in de compacte (liggende) opmaak. Hij
   krimpt wél mee en kapt af: de bundelnaam ervoor is de knop naar de
   lijst en moet heel blijven. */

.topbar-lied {
  flex: 1 1 auto;
  min-width: 0;

  font-family: var(--book);
  font-size: 17px;
  color: var(--header-ink);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Standaard de gewone inktkleur: deze knop staat namelijk niet
   alleen in de bovenbalk maar ook in de vensters onderin. In
   Kerkblauw is --header-ink bijna wit — bedoeld voor de donkerblauwe
   balk — en dan was het sluitkruisje daar wit op wit. */

/* De twee stapknopjes in de bovenbalk. Ze delen .icon-btn, maar de
   uit-stand moet er wel bij: aan het begin of het eind van een bundel
   valt er niet verder te stappen, en dat hoort te zien te zijn. Zie
   bevinding W16. */

.topbar .kop-stap:disabled {
  color: var(--header-muted);
  cursor: default;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 40px;
  height: 40px;

  padding: 0;
  border: 0;
  border-radius: 2px;

  background: transparent;
  color: var(--ink);

  cursor: pointer;
}

.topbar .icon-btn {
  color: var(--header-ink);
}

.icon-btn:active {
  background: var(--line);
}

main {
  max-width: 720px;
  margin: 0 auto;
}


/* ============================================================
   Kiezen
   ============================================================ */

/* De onderbalk staat vast onderaan en ligt dus óver het einde van de
   lijst heen. Zonder deze ruimte is de laatste rij (psalm 150, of de
   rij 141–150 in het raster) niet meer aan te tikken: de pagina is
   dan niet lang genoeg om hem eronderuit te scrollen. Op een iPhone
   viel dat op, want daar telt de veilige zone rond de home-indicator
   mee; --onderbalk-hoogte wordt in app.js opgemeten. */

.index {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px;
  padding-bottom: calc(16px + var(--onderbalk-hoogte, 96px));
}

.segmented {
  display: flex;
  gap: 4px;

  padding: 4px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
}

.segmented button {
  flex: 1;

  min-height: 36px;
  padding: 0 8px;

  border: 0;
  border-radius: 2px;

  background: transparent;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 14px;

  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}


.search {
  display: flex;
  align-items: center;
  gap: 10px;

  height: 46px;
  padding: 0 14px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
}

.search svg {
  flex: 0 0 auto;
  color: var(--muted);
}

.search input {
  flex: 1;
  min-width: 0;

  border: 0;
  padding: 0;

  background: transparent;
  color: var(--ink);

  font-family: var(--book);
  font-size: 15px;
}

/* De outline gaat eraf omdat hij om het invoerveld zou vallen en niet
   om het vak eromheen, waar de rand zit. In plaats daarvan kleurt de
   rand van dat vak, precies zoals .kiezer-zoek het al deed. Zonder
   dit was dit het énige focuspunt in de hele app waar niets te zien
   was — en meteen het eerste dat iemand aandoet die een psalm zoekt.
   Zie bevinding W10. */

.search input:focus {
  outline: none;
}

.search:focus-within {
  border-color: var(--accent);
}

/* Het kruisje van de browser zelf is een paar pixels groot; we
   zetten er een eigen knop met een echt aanraakvlak voor in de plaats. */

.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 40px;
  height: 40px;

  padding: 0;
  border: 0;
  border-radius: 20px;

  background: transparent;
  color: var(--muted);

  cursor: pointer;
}

.search-clear:active {
  background: var(--line);
}


/* De weergaveschakelaar hoort bij de lijst eronder, niet bij het
   zoekveld ernaast; het haarlijntje maakt dat zichtbaar zonder een
   eigen regel te kosten. Die regel zou de winst van "alle 150 in
   beeld" juist weer opeten. */

.search-view {
  position: relative;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 40px;
  height: 40px;
  margin-left: 2px;
  margin-right: -10px;

  padding: 0;
  border: 0;
  border-radius: 20px;

  background: transparent;
  color: var(--muted);

  cursor: pointer;
}

.search-view::before {
  content: "";

  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -6px;

  width: 1px;

  background: var(--line);
}

.search-view:active {
  background: var(--line);
}

/* Uit staat voor nummers in beeld; dan wijst de knop naar de titels. */
.search-view .naar-nummers {
  display: none;
}

.search-view[aria-pressed="true"] .naar-titels {
  display: none;
}

.search-view[aria-pressed="true"] .naar-nummers {
  display: block;
}


.jump {
  display: flex;
  gap: 6px;

  overflow-x: auto;
}

.jump button {
  flex: 0 0 auto;

  min-height: 30px;
  padding: 0 12px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: transparent;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 12px;

  cursor: pointer;
}


/* Nummerknoppen. In de compacte stand passen alle 150 in beeld. */

/* Het aantal knoppen per rij is een instelling, dus een vast
   aantal kolommen: "auto-fill" zou per toestelbreedte verschillen. */

.grid {
  display: grid;
  gap: var(--grid-gap, 4px);

  grid-template-columns: repeat(var(--grid-cols, 10), minmax(0, 1fr));
}

/* Enige Gezangen: de vaste 12 en het overige materiaal (Eigen
   Geschrift Davids e.d.) lopen door in hetzelfde raster; een kopje
   boven het eerste "overige" nummer laat zien dat daar een ander
   soort lied begint. */
.grid-heading {
  grid-column: 1 / -1;

  margin-top: 8px;
  margin-bottom: 2px;

  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Een liednummer is een link en geen knop: zonder adres valt er voor
   een zoekmachine niets te volgen, en dan blijven honderdvijfenzestig
   liederen één bladzijde. Zie audit/seo.html, S2. Alleen een nummer
   dat er nog niet is blijft een knop — daar is niets om heen te
   linken. */
.grid button,
.grid a {
  display: grid;
  place-items: center;

  text-decoration: none;

  min-height: var(--grid-height, 38px);
  padding: 0;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);

  font-family: var(--book);
  font-size: var(--grid-font, 16px);

  /* Garamond zet standaard mediëvale cijfers, die in hoogte en
     breedte verschillen; in een raster oogt dat scheef. */
  font-variant-numeric: lining-nums tabular-nums;

  line-height: 1;
  cursor: pointer;
}

.grid button[aria-current="true"],
.grid a[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.grid button:disabled {
  color: var(--line);
  background: transparent;
  cursor: default;
}


/* Lijst met titels */

.titlelist {
  display: flex;
  flex-direction: column;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  overflow: hidden;
}

/* Een rij in de liederenlijst is een link (S2). Dezelfde vorm wordt
   hergebruikt door de liedkiezer van de liturgieën, en dáár is een rij
   wél een knop: die kiest iets, die gaat nergens heen. Beide staan
   hier, want ze horen er hetzelfde uit te zien. */
.titlelist a,
.titlelist button {
  display: grid;
  text-decoration: none;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  /* align-items centreert de kolommen binnen hun eigen rij, maar de
     rij zelf is maar één regel hoog: zonder align-content bleef al
     die extra ruimte tot aan min-height onderin liggen, waardoor de
     tekst bovenin de knop leek te "zweven". */
  align-content: center;

  min-height: 56px;
  padding: 8px 14px;

  border: 0;
  border-bottom: 1px solid var(--rand-knop);

  background: var(--panel);
  color: var(--ink);

  text-align: left;
  cursor: pointer;
}

/* De overige liederen hebben geen nummer. Zonder deze regel valt hun
   titel in de nummerkolom van 34 pixels en blijft er "Ere..." van
   over: een grid met een kolomopgave zet een eenzaam kind altijd in
   de eerste kolom. */
.titlelist.zonder-nummers a,
.titlelist.zonder-nummers button {
  grid-template-columns: minmax(0, 1fr);
}

.titlelist a:last-child,
.titlelist button:last-child {
  border-bottom: 0;
}

.titlelist .nr {
  font-family: var(--book);
  font-size: 19px;
  color: var(--muted);
  text-align: right;
}

.titlelist .titel {
  display: block;
  font-family: var(--book);
  font-size: 17px;
  line-height: 1.3;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.empty-note {
  padding: 20px 4px;
  color: var(--muted);
  font-size: 14px;
}


/* ============================================================
   Het lied
   ============================================================ */

.song {
  padding-bottom: 90px;
}

/* Blijft staan zolang een lied openstaat, vlak onder de bovenbalk:
   je weet dan altijd welk lied het is, kunt meespelen en naar een
   ander vers springen zonder eerst terug naar boven te scrollen.
   --topbar-hoogte wordt in app.js gezet (zetTopbarHoogteVar), want
   de bovenbalk zelf verschilt per toestel (safe-area-inset). */
.vaste-kop {
  position: sticky;
  top: var(--topbar-hoogte, 58px);
  z-index: 15;

  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.lied-titelblok {
  padding: 14px 16px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lied-titel-rij {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.liedtitel {
  flex: 1;
  min-width: 0;

  font-family: var(--book);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.play-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  width: 36px;
  height: 36px;

  padding: 0;
  border: 0;
  border-radius: 2px;

  background: var(--accent);
  color: var(--accent-ink);

  cursor: pointer;
}

.play-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Versrij: springt naar een vers, en toont via scrollen welk vers nu
   in beeld is (zie updateVerseSpy in app.js). Blijft één regel hoog,
   want de rij staat vast (zie .lied-titelblok) — bij een handvol
   verzen past dat vanzelf; bij méér (VEEL_VERZEN in app.js, psalm
   119: 88) komt er een "⋯"-knop bij om even alles te tonen. */

.versrij {
  display: flex;
  gap: 6px;

  overflow-x: auto;
  scrollbar-width: none;
}

.versrij::-webkit-scrollbar {
  display: none;
}

/* Alleen tijdelijk, na een tik op "⋯": alles in beeld, over zoveel
   regels als nodig. Springt de lezer naar een vers, dan klapt de rij
   vanzelf weer dicht (zie renderVersrij). */
.versrij.uitgeklapt {
  flex-wrap: wrap;
  overflow-x: visible;
}

.verscel {
  flex: 0 0 auto;

  /* Was een link en is nu een knop, omdat een link niet op de
     spatiebalk reageert: die scrolt dan een scherm omlaag. Wie met het
     toetsenbord werkt drukt hier spatie — elke andere bediening in
     deze app is immers een knop — en belandde zo drie verzen verder.
     Een knop heeft wél een eigen achtergrond van de browser, en die
     moet dus uitgezet: zonder deze regel staat er een grijs blokje.
     Zie ook bevinding W4, waar dezelfde vergetelheid zat. */
  background: none;

  min-width: 30px;
  height: 30px;
  padding: 0 6px;

  display: grid;
  place-items: center;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);

  text-decoration: none;
  cursor: pointer;
}

.verscel.actief {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.verscel-meer {
  /* Stond zonder achtergrond en viel daarmee terug op het grijs van de
     browser — in Avond een lichtgrijs blokje op een donkere bladzijde.
     Zie bevinding W4. */
  background: var(--panel);

  border-style: dashed;
  color: var(--muted);
  font-family: var(--ui);
}

.versrij.uitgeklapt .verscel-meer {
  border-style: solid;
  background: var(--line);
}


/* De vier weergaven, als miniatuur van de opmaak */

.sheet-uitleg {
  margin-bottom: 9px;

  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

.views {
  display: flex;
  gap: 7px;
}

.views button {
  flex: 1;

  display: grid;
  place-items: center;

  min-height: 48px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);

  cursor: pointer;
}

.views button[aria-pressed="true"] {
  border: 1.5px solid var(--accent);
  background: var(--line);
  color: var(--accent);
}

.viewname {
  margin-top: 7px;

  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--accent);
}


/* Verzen */

.verse {
  padding: 14px 16px 0;
}

.verse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  /* Loopt gelijk met het notenblad eronder, zodat de keuze rechts
     op de rand van de balk uitkomt in plaats van erbuiten. */
  max-width: var(--bladbreedte, none);

  margin-bottom: 8px;
}

.verse-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);

  min-width: 0;
}

/* Per vers om te zetten tussen noten en alleen woorden. Klein
   gehouden: het hoort bij de kop, niet erboven te staan. */

.verse-switch {
  /* Twee gelijke vakken: anders is "Tekst" smaller dan "Noten" en
     verspringt de knop bij elke omzetting. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 auto;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
}

.verse-switch button {
  min-height: 26px;
  padding: 0 9px;

  border: 0;

  background: transparent;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .04em;

  cursor: pointer;
}

.verse-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.verse-lines {
  overflow-x: auto;
}

/* De grootte komt van de knoppen rechtsonder (zie .tekstknoppen). De
   regelhoogte is een verhouding en de inspring hieronder staat in em,
   dus die lopen vanzelf mee. */

.lyrics {
  font-family: var(--book);
  font-size: var(--verstekst, 19.5px);
  line-height: 1.52;

  text-wrap: pretty;
}

/* Loopt een dichtregel om, dan springt het vervolg in, zodat je
   ziet dat het dezelfde regel is. */

.lyrics .regel {
  padding-left: 1.15em;
  text-indent: -1.15em;
}

.short-note {
  font-style: italic;
}

/* ============================================================
   Notenbalk
   De notenbalk heeft geen eigen "papieren" kaart meer: hij staat
   los op de paginakleur. ABCJS krijgt de inktkleur mee via
   foregroundColor (zie inktkleur() in app.js); alleen de
   notenbalklijnen en het maatstreepje worden hier gedempt.
   ============================================================ */

/* .music-sheet is de buitenste, geschaalde doos: app.js (fitSheet)
   zet zijn width/height rechtstreeks op de geschaalde afmetingen,
   want transform verandert niets aan de ruimte die een element
   claimt. .music-sheet-schaal daarbinnen krijgt de eigenlijke
   transform: scale() en houdt zijn natuurlijke (ongeschaalde) maat,
   zodat alle noten/tekst daarbinnen gewoon normaal worden opgebouwd. */

.music-sheet {
  overflow: hidden;

  color: var(--ink);

  /* Een notenbalk is om van te zingen, niet om te selecteren; een
     lange druk mocht anders halve regels blauw zetten. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.music-sheet-schaal {
  width: fit-content;
  transform-origin: top left;
}

.music-line + .music-line {
  margin-top: 1px;
}

/* De balklijnen krijgen hier bewust géén eigen, gedempte kleur: ze
   staan even zwart als de noten, zoals in een psalmboek. Het ontwerp
   stelde een lichtere balk voor, maar op het scherm oogt dat te vaag.
   Alles — balk, noten, sleutel, tekst — komt dus uit de inktkleur die
   ABCJS meekrijgt (foregroundColor, zie inktkleur() in app.js). */

.musicbox svg {
  display: block;
  max-width: none;
}

.musicbox svg text.song-lyric {
  font-family: var(--book);
  fill: currentColor;
}

.error-inline {
  padding: 16px;
  color: var(--error);
}


/*
   Verborgen notenbalk, alleen om ABCJS een visualObj voor de
   synthesizer te laten opbouwen.
*/

.audio-paper {
  position: absolute;
  top: 0;
  left: 0;

  width: 1px;
  height: 1px;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* ============================================================
   Onderbalk
   ============================================================ */

.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;

  display: flex;
  align-items: stretch;

  padding: 8px 8px 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));

  background: var(--panel);
  border-top: 1px solid var(--line);
}

.bottombar button {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;

  min-height: 46px;
  padding: 4px 2px;

  border: 0;
  border-radius: 2px;

  background: transparent;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 11px;

  cursor: pointer;
}

.bottombar button:disabled {
  color: var(--line);
  cursor: default;
}

.bottombar button.mark {
  color: var(--accent);
}


/* ============================================================
   Compacte opmaak — telefoon liggend
   Draai je de telefoon, dan wordt de notenbalk vanzelf twee keer zo
   groot, maar bleef er van de hoogte zo weinig over dat er precies
   één notenbalkregel paste: bovenbalk, liedtitel en onderbalk aten
   samen twee derde van het scherm.

   Daarom liggend: de liedtitel verhuist naar de bovenbalk (daar is
   breedte zat), de rij eronder houdt alleen de versnummers, en de
   onderbalk vervalt — Vorige en Volgende doe je liggend met vegen,
   en de lijst bereik je via de bundelnaam bovenaan. Dat brengt de
   vrije hoogte van ongeveer 200 naar 340 pixels: drie regels.

   De klasse zet app.js (zetCompacteKop), niet een @media-regel: het
   omschakelen vraagt ook dat de afspeelknop verhuist, en dan is één
   plek waar de grens staat beter dan twee.
   ============================================================ */

.compact body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.compact .topbar {
  padding-top: calc(7px + env(safe-area-inset-top));
  padding-bottom: 7px;
  gap: 10px;
}

/* "Berijming 1773" mag wijken; die ruimte is voor de liedtitel. */

.compact .topbar-sub {
  display: none;
}

.compact .topbar-titel {
  flex: 0 1 auto;
}

/* De afspeelknop staat liggend in de bovenbalk en hoort zich daar te
   gedragen als de andere knoppen daar: geen accentvlak op de gekleurde
   balk, dat botst in Kerkblauw. */

.compact .topbar .play-btn {
  width: 40px;
  height: 40px;

  background: transparent;
  color: var(--header-ink);
}

.compact .lied-titel-rij {
  display: none;
}

.compact .lied-titelblok {
  padding: 7px 16px 8px;
  gap: 0;
}

/* Een liturgie volgen is net zo krap: ook daar verhuist de naam naar
   de bovenbalk en blijft alleen de rij liederen staan. */

.compact .volgen-naam {
  display: none;
}

.compact .volgen-kop {
  padding: 7px 16px 8px;
  gap: 0;
}

.compact .bottombar {
  display: none;
}


/* ============================================================
   Groter en kleiner voor de verstekst
   Zwevend, niet in een balk: op een telefoon komen we hoogte tekort en
   zo kost het er geen. Boven de onderbalk als die er staat, anders
   boven de veilige zone.
   ============================================================ */

.tekstknoppen {
  position: fixed;
  right: 12px;
  bottom: calc(12px + var(--onderbalk-hoogte, 0px));
  z-index: 18;

  display: flex;
  align-items: center;
  gap: 6px;
}

.tekstknoppen button {
  width: 44px;
  height: 40px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);
  opacity: 0.9;

  font-family: var(--ui);
  font-size: 15px;

  cursor: pointer;
}

.tekstknoppen button:active {
  opacity: 1;
  border-color: var(--accent);
}

.tekstknoppen button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* De naam van de stap verschijnt even bij een tik en vervaagt weer;
   permanent zou hij de bladzijde bedekken. */

.tekst-naam {
  padding: 5px 9px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--muted);

  font-family: var(--ui);
  font-size: 12px;
  white-space: nowrap;

  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.tekst-naam.toon {
  opacity: 1;
}

/* Dezelfde twee knoppen in de instellingen. */

.tekststappers {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.tekststappers button {
  width: 44px;
  height: 38px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);

  font-family: var(--ui);
  font-size: 15px;

  cursor: pointer;
}

.tekststappers button:disabled {
  opacity: 0.35;
  cursor: default;
}


/* Zie de toelichting bij #veiligeRand in index.html. */

#veiligeRand {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;

  width: 0;
  height: env(safe-area-inset-bottom, 0px);

  pointer-events: none;
}


/* ============================================================
   Vensters onderin (instellingen, verzen)
   ============================================================ */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;

  background: rgba(36, 34, 30, 0.34);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;

  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;

  /* Geen ruimte bovenaan: die zit in .sheet-vast, zodat die kop
     precies op de bovenrand kan blijven plakken. */
  padding: 0 20px 26px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom));

  background: var(--bg);
  border-top: 2px solid var(--gold);
}

/* De greep en de kop blijven staan terwijl de inhoud eronder
   doorscrolt — zoals een venster-van-onderen dat hoort te doen.
   Anders moet je eerst helemaal terugscrollen voordat je het kruisje
   of de sleepbalk weer kunt pakken. De negatieve marges trekken de
   achtergrond door tot de randen van het venster, zodat er niets
   onderdoor schuift. */

.sheet-vast {
  position: sticky;
  top: 0;
  z-index: 2;

  margin: 0 -20px;
  padding: 10px 20px 8px;

  background: var(--bg);
}


/* De zichtbare balk is smal, maar het sleepvlak eromheen is ruimer
   gemaakt zodat hij op een telefoon makkelijk te pakken is. */

.sheet .grip {
  display: flex;
  justify-content: center;

  margin: -4px 0 8px;
  padding: 14px 0 10px;

  touch-action: none;
  cursor: grab;
}

.sheet .grip span {
  width: 38px;
  height: 4px;

  border-radius: 2px;
  background: var(--line);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sheet h2 {
  margin: 0 0 6px;

  font-family: var(--book);
  font-weight: 400;
  font-size: 23px;
}

.sheet-close {
  margin-top: -6px;
  margin-right: -8px;
}

.sheet-kop {
  margin-top: 16px;

  /* Was 11,5, en de uitlegregels hieronder 12,5. Dat waren met afstand
     de kleinste teksten van de app, in een venster dat iedereen
     gebruikt, voor een publiek dat voor een deel op leeftijd is. Het
     eigen ontwerpdocument zegt bovendien: nooit onder 13px voor tekst
     in iets dat je aantikt. */
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-height: 52px;

  border-bottom: 1px solid var(--line);
}

.sheet-rij .lbl {
  font-size: 15px;
}

/* Een instelling die op dit moment niets doet, blijft zichtbaar
   maar wordt gedempt, met de reden erbij. */

.sheet-rij.uit .lbl,
.sheet-rij.uit .sub {
  color: var(--muted);
}

.sheet-rij.uit .toggle {
  opacity: 0.45;
  cursor: default;
}

.sheet-rij .sub {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}

/* Schakelaar */

.toggle {
  flex: 0 0 auto;

  width: 46px;
  height: 28px;
  padding: 3px;

  display: flex;
  align-items: center;

  border: 0;
  border-radius: 14px;

  background: var(--line);

  cursor: pointer;
}

.toggle span {
  width: 22px;
  height: 22px;

  border-radius: 11px;
  background: var(--panel);

  transition: transform 0.14s ease;
}

.toggle[aria-pressed="true"] {
  background: var(--accent);
}

.toggle[aria-pressed="true"] span {
  transform: translateX(18px);
}

/* Groottekiezer */

.size-row {
  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 52px;

  border-bottom: 1px solid var(--line);
}

.size-row input {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.tempo-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tempo-getal {
  display: flex;
  align-items: baseline;
  gap: 5px;

  color: var(--muted);
  font-family: var(--ui);
  font-size: 13px;
}

.tempo-getal input {
  width: 46px;
  padding: 5px 0 5px 8px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);

  font-family: var(--ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tempo-getal input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Firefox en Safari tonen de op/neer-pijltjes niet standaard gelijk;
   Chrome laat ze staan, wat naast een smal getal prima oogt. */

.tempo-uit {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);

  /* Beide uiteinden even breed, anders staat de schuif scheef. */
  min-width: 20px;
  text-align: center;
}

.versie {
  margin-top: 20px;
  padding-top: 14px;

  border-top: 1px solid var(--line);

  font-size: 12px;
  color: var(--muted);
  text-align: center;
}


/* Thema-rijen */

.theme-rows {
  margin-top: 6px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-row {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 15px 18px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: inherit;
  text-align: left;

  cursor: pointer;
}

.theme-row[aria-pressed="true"] {
  border-color: var(--accent);
}

.theme-radio {
  flex: 0 0 auto;

  width: 15px;
  height: 15px;
  border-radius: 50%;

  border: 1px solid #b6b0a2;
  background: var(--bg);
}

.theme-row[aria-pressed="true"] .theme-radio {
  border: 4px solid var(--accent);
}

.theme-info {
  flex: 1;
  min-width: 0;
}

.theme-naam {
  display: block;
  font-family: var(--book);
  font-size: 20px;
  color: var(--ink);
}

.theme-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

.theme-swatch {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}

.theme-swatch span {
  display: block;
  width: 18px;
  height: 26px;
  border: 1px solid var(--line);
}

#followSystemRow {
  margin-top: 12px;
}


/* ============================================================
   Menu
   ============================================================ */

.menu-lijst {
  display: flex;
  flex-direction: column;

  margin: 0 -20px;
}

.menu-rij {
  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 54px;
  padding: 0 20px;

  border: 0;
  border-bottom: 1px solid var(--rand-knop);

  background: none;
  color: var(--ink);

  font-family: var(--ui);
  font-size: 15px;
  text-align: left;

  cursor: pointer;
}

.menu-rij:last-child {
  border-bottom: 0;
}

.menu-rij:active {
  background: var(--line);
}

.menu-rij svg {
  flex: 0 0 auto;
  color: var(--muted);
}

/* Een menuregel met een toelichting eronder — gebruikt in "Bewaren of
   kopiëren", waar het verschil tussen de drie manieren uitleg vraagt.
   De regels hebben dan meer hoogte nodig dan een kale menuregel. */

.menu-rij:has(.menu-tekst) {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.menu-rij:has(.menu-tekst) svg {
  margin-top: 2px;
}

.menu-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-tekst small {
  /* Was 12,5, net als de uitlegregels in de instellingen. Dit staat in
     het deelvenster onder elke keuze, en het is precies de tekst die
     zegt wélke van de drie wegen u moet nemen — dan is klein het
     verkeerde formaat. */
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Op een breed scherm hangt het menu onder de knop in plaats van
   vanaf de onderrand op te schuiven; app.js zet dan top en right. */

@media (min-width: 700px) {

  .menu-sheet {
    left: auto;
    bottom: auto;

    width: 260px;
    max-height: none;

    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
  }

  .menu-sheet .grip {
    display: none;
  }

}


/* ============================================================
   Handleiding en Over deze site
   ============================================================ */

#infoScherm {
  max-width: 680px;
  margin: 0 auto;
}

.infopagina {
  padding: 24px 20px calc(48px + env(safe-area-inset-bottom));
}

.infopagina h1 {
  margin: 0 0 6px;

  font-family: var(--book);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
}

.infopagina h2 {
  margin: 30px 0 8px;
  padding-top: 14px;

  border-top: 1px solid var(--line);

  font-family: var(--book);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
}

.infopagina p,
.infopagina li {
  margin: 0 0 12px;

  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);

  text-wrap: pretty;
}

.infopagina ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.infopagina li {
  margin-bottom: 8px;
}

.info-lead {
  font-family: var(--book);
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}

/* De icoontjes uit de app, op regelhoogte tussen de tekst. */

.info-icoon {
  display: inline-grid;
  place-items: center;

  width: 26px;
  height: 22px;

  vertical-align: -6px;

  border: 1px solid var(--line);
  border-radius: 2px;

  color: var(--muted);
}

.info-icoon svg {
  width: 15px;
  height: 15px;
}

.info-icoon-vol {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.info-let-op {
  padding: 12px 14px;

  border-left: 3px solid var(--gold);
  background: var(--panel);

  font-size: 13px !important;
}

/* Wat nog vervangen moet worden, staat er zichtbaar anders bij. */

.info-plaatshouder {
  color: var(--muted) !important;
  font-style: italic;
}

.info-knop {
  display: inline-block;
  line-height: 44px;
  text-decoration: none;
}

.info-adres {
  margin-left: 12px;
  font-size: 13px;
  color: var(--muted);
}

.info-links {
  list-style: none;
  padding-left: 0;
}

/* Zonder dit plakken twee verwijzingen aan elkaar; een li draagt, anders
   dan de p die hier eerst stond, geen eigen marge. */
.info-links li + li {
  margin-top: 14px;
}


/* ============================================================
   Liturgie
   ============================================================ */

#liturgieScherm {
  max-width: 720px;
  margin: 0 auto;
}

.liturgie-overzicht,
.liturgie-bewerken {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}

.knop-hoofd,
.knop-vlak {
  min-height: 44px;
  padding: 0 18px;

  border: 1px solid var(--accent);
  border-radius: 2px;

  background: var(--accent);
  color: var(--accent-ink);

  font-family: var(--ui);
  font-size: 14px;

  cursor: pointer;
}

.knop-vlak {
  background: var(--panel);
  border-color: var(--rand-knop);
  color: var(--ink);
}

.knop-vlak.gevaar,
.knop-hoofd.gevaar {
  color: var(--error);
}

.knop-hoofd.gevaar {
  background: var(--error);
  border-color: var(--error);
  color: var(--panel);
}

.breed-knop {
  width: 100%;
}


/* Overzicht */

.liturgie-rij {
  display: flex;
  align-items: stretch;
  gap: 10px;

  border: 1px solid var(--rand-knop);
  border-left: 3px solid var(--accent);
  border-radius: 0 2px 2px 0;

  background: var(--panel);
}

.liturgie-open {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 15px 16px;
  border: 0;
  background: none;

  text-align: left;
  cursor: pointer;
}

.liturgie-naam {
  font-family: var(--book);
  font-size: 20px;
  color: var(--ink);
}

.liturgie-sub {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}

.liturgie-volg {
  flex: 0 0 auto;

  padding: 0 18px;
  border: 0;
  border-left: 1px solid var(--line);

  background: none;
  color: var(--accent);

  font-family: var(--ui);
  font-size: 13px;

  cursor: pointer;
}

/* Alleen op het overzicht (zie verwijderbaar in liturgieRijenHtml).
   Rustig in kleur zolang er niets gebeurt — het is de enige knop in de
   rij die iets onherroepelijks doet, en dat hoort niet het eerste te
   zijn wat opvalt. Bij aanraken of focus wordt hij pas --error, en
   dan is precies op dat moment duidelijk wat de knop doet. */
.liturgie-verwijder {
  flex: 0 0 auto;
  width: 44px;
  height: auto;
  border-left: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
}

.liturgie-verwijder:hover,
.liturgie-verwijder:focus-visible {
  color: var(--error);
}

.liturgie-let-op {
  margin: 14px 0 0;

  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}


/* Samenstellen */

.naam-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.naam-veld input {
  padding: 12px 14px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--panel);
  color: var(--ink);

  font-family: var(--book);
  font-size: 17px;
}

.naam-veld input:focus {
  outline: none;
  border-color: var(--accent);
}

.regelrij {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 4px;
  border-bottom: 1px solid var(--rand-knop);
}

.regel-nr {
  flex: 0 0 20px;

  font-family: var(--book);
  font-size: 17px;
  color: var(--muted);
  text-align: right;
}

.regel-tekst {
  flex: 1;
  min-width: 0;
}

.regel-lied {
  display: block;

  font-family: var(--book);
  font-size: 17px;
  color: var(--ink);
}

.regel-sub {
  display: block;
  margin-top: 2px;

  font-size: 11px;
  color: var(--muted);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.regel-knoppen {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

.regel-knoppen button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 2px;

  background: transparent;
  color: var(--muted);

  cursor: pointer;
}

.regel-knoppen button svg {
  width: 21px;
  height: 21px;
}

.regel-knoppen button[data-op="weg"] {
  color: var(--error);
}

.regel-knoppen button:disabled,
.regel-knoppen button[data-op="weg"]:disabled {
  color: var(--line);
  cursor: default;
}

.regel-knoppen button:active {
  background: var(--line);
}


/* De kiezer: bundel, nummer, verzen */

.liturgie-kiezer {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 16px;

  border: 1px solid var(--accent);
  border-radius: 2px;

  background: var(--panel);
}

.kiezer-kop {
  font-family: var(--book);
  font-size: 20px;
  color: var(--ink);
}

/* De ingeklapte liedkeuze: één regel die het antwoord laat staan.
   Zie de toelichting bij renderLiedKiezerHtml in app.js — het paneel
   was op een telefoon ruim duizend beeldpunten hoog omdat honderdvijftig
   nummers bleven staan nadat u er één had gekozen. */

.kiezer-samenvatting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;

  margin: 4px 0 6px;
  padding: 12px 14px;

  border: 1px solid var(--rand-knop);
  border-left: 3px solid var(--accent);
  border-radius: 0 2px 2px 0;

  background: var(--panel);
  color: var(--ink);

  font-family: var(--ui);
  text-align: left;

  cursor: pointer;
}

.kiezer-sam-label {
  flex: 0 0 auto;

  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kiezer-sam-tekst {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kiezer-sam-naam {
  font-family: var(--book);
  font-size: 17px;
  color: var(--ink);
}

.kiezer-sam-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kiezer-chevron {
  flex: 0 0 auto;
  color: var(--muted);
}

/* De kop boven de uitgeklapte kiezer, met de knop om hem weer dicht te
   doen — die staat er alleen als er al een lied gekozen ís. */

.kiezer-open-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kiezer-inklap {
  min-width: 34px;
  min-height: 34px;

  border: 0;
  background: none;
  color: var(--muted);

  cursor: pointer;
}

/* Het zoekveld in de kiezer. Dit kan er alleen zijn doordat de kiezer
   meestal dicht staat; zichtbaar zijn kost dus geen blijvende hoogte.
   Cijfers filteren het raster, een woord geeft een lijst met titels —
   en dát is de weg om op een tablet de titel van een lied te zien,
   waar de muisaanwijzer niet bestaat. */

.kiezer-zoek {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 10px 0 4px;
  padding: 0 12px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;
  background: var(--panel);
}

.kiezer-zoek svg {
  flex: 0 0 auto;
  color: var(--muted);
}

.kiezer-zoek input {
  flex: 1;
  min-width: 0;

  padding: 11px 0;
  border: 0;
  background: none;
  color: var(--ink);

  font-family: var(--ui);
  font-size: 16px;
}

.kiezer-zoek input:focus {
  outline: none;
}

.kiezer-zoek:focus-within {
  border-color: var(--accent);
}

.kiezer-zoek input::-webkit-search-cancel-button,
.kiezer-zoek input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Een woord kan veel treffers geven; die lijst mag het paneel niet
   opnieuw eindeloos maken. */

.kiezer-titels {
  max-height: 45vh;
  margin-top: 4px;
  overflow-y: auto;
}

.kiezer-verzenblok {
  margin-top: 4px;
}

.kiezer-grid {
  --grid-cols: 10;
  --grid-gap: 4px;
  --grid-height: 34px;
  --grid-font: 15px;

  max-height: 40vh;
  overflow-y: auto;
}

.kiezer-verzen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 5px;

  max-height: 34vh;
  overflow-y: auto;
}

.kiezer-verzen button {
  min-height: 38px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--book);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;

  cursor: pointer;
}

.kiezer-verzen button.gekozen {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.kiezer-keuze {
  font-size: 12px;
  color: var(--muted);
}

.kiezer-fout {
  font-size: 12px;
  color: var(--error);
}

.kiezer-snel {
  display: flex;
  gap: 8px;
}

.kiezer-snel button {
  padding: 7px 12px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: transparent;
  color: var(--muted);

  font-family: var(--ui);
  font-size: 12px;

  cursor: pointer;
}

/* De kiezer: vrije tekst en Bijbelverwijzing */

.kiezer-textarea {
  padding: 12px 14px;
  resize: vertical;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--book);
  font-size: 16px;
  line-height: 1.45;
}

.kiezer-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.kiezer-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;

  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);

  cursor: pointer;
}

.kiezer-checkbox input {
  width: 17px;
  height: 17px;
}

.kiezer-verwijzing {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 12px;
  border: 1px solid var(--rand-knop);
  border-radius: 2px;
}

.kiezer-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kiezer-versrange {
  display: flex;
  gap: 10px;
}

.kiezer-veld-smal {
  flex: 1;
}

.kiezer-veld select,
.kiezer-veld input[type="number"] {
  padding: 10px 12px;

  border: 1px solid var(--rand-knop);
  border-radius: 2px;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--ui);
  font-size: 14px;
}

.kiezer-veld select:focus,
.kiezer-veld input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}


.kiezer-acties,
.bevestig-knoppen {
  display: flex;
  gap: 8px;
  justify-content: flex-end;

  margin-top: 4px;
}

.liturgie-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 1px solid var(--line);
}


/* Volgen */

.liturgie-volgen {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.volgen-kop {
  padding: 12px 16px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.volgen-kop-rij {
  display: flex;
  align-items: center;
  gap: 10px;
}

.volgen-kop-rij .icon-btn {
  flex: 0 0 auto;
}

.volgen-naam {
  flex: 1;
  min-width: 0;

  font-family: var(--book);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.verscel.breed {
  min-width: 58px;
  padding: 0 10px;
}

.liturgieregel {
  padding-top: 20px;
}

.liturgieregel + .liturgieregel {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.regel-kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  padding: 0 16px 10px;
}

.regel-kop {
  font-family: var(--book);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.regel-eerste {
  margin-top: 2px;

  font-size: 12px;
  color: var(--muted);
}


/* Een vrije-tekstregel binnen de liturgie: geen notenbalk, alleen
   tekst — en eventueel de Bijbeltekst van de verwijzing erbij. */

.tekstregel .regel-kop-rij {
  padding-bottom: 4px;
}

.bijbeltekst-blok {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lyrics.bijbeltekst .regel b {
  margin-right: 5px;
  color: var(--muted);
  font-weight: 600;
}


/* ============================================================
   Herstel en vangnet

   Twee soorten melding, één vormtaal. Het vangnet (.opstartfout)
   verschijnt als er iets misgaat waar de app niet op gerekend heeft;
   de herstelmeldingen als de bewaarde liturgieën niet helemaal
   leesbaar bleken. Allebei dragen ze een uitklapblok met de ruwe
   gegevens (.techniek), want die zijn er om gekopieerd en opgestuurd
   te worden — niet om ter plekke bewerkt te worden.
   ============================================================ */

.opstartfout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;

  padding: 12px;

  /* Het strookje neemt het scherm niet over: draait de app verder
     gewoon, dan is dit een melding bovenaan en blijft alles eronder
     bereikbaar. */
  pointer-events: none;
}

.opstartfout-kaart {
  pointer-events: auto;

  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;

  border: 1px solid var(--line);
  border-top: 3px solid var(--error);
  border-radius: 2px;

  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.opstartfout-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.opstartfout-kop h2 {
  margin: 0;

  font-family: var(--book);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

#opstartfoutLijst p {
  margin: 8px 0 0;

  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.opstartfout-knoppen,
.herstel-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 14px;
}

.opstartfout-gerust {
  margin: 10px 0 0;

  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* De meldingen bij de liturgieën zelf. */

.herstel-melding,
.herstel-paneel {
  margin: 0 0 14px;
  padding: 14px 16px;

  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 2px 2px 0;

  background: var(--panel);
}

.herstel-paneel {
  margin: 4px 0 18px;
}

.herstel-kop {
  font-family: var(--book);
  font-size: 18px;
  color: var(--ink);
}

.herstel-melding p,
.herstel-paneel > p {
  margin: 6px 0 0;

  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.herstel-punten {
  margin: 10px 0 0;
  padding-left: 20px;

  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.herstel-punten li {
  margin-bottom: 3px;
}

.herstel-let-op {
  font-size: 12px !important;
}

/* Het merkje in het overzicht, zodat een herstelde liturgie opvalt
   zonder dat er een venster voor open hoeft. */

.liturgie-merk {
  align-self: flex-start;

  margin-top: 2px;
  padding: 2px 7px;

  border-radius: 2px;
  background: var(--gold);
  color: var(--accent-ink);

  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-theme="avond"] .liturgie-merk {
  color: var(--bg);
}

/* Het wieltje in een knop die even bezig is. Zie knopBezig() in
   app.js: het klaarmaken van een kopie duurt seconden zodra er
   notenbalken bij moeten, en een uitgeschakelde icoonknop ziet er
   hier precies hetzelfde uit als een gewone. */

.wachtwiel {
  transform-origin: 50% 50%;
  animation: wachtwiel-draai .9s linear infinite;
}

@keyframes wachtwiel-draai {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wachtwiel {
    animation: none;
    opacity: .55;
  }
}


/* Het uitklapblok met de ruwe gegevens. */

.techniek {
  margin-top: 12px;
}

.techniek summary {
  cursor: pointer;

  font-size: 13px;
  color: var(--accent);
}

.techniek pre {
  max-height: 260px;
  margin: 8px 0 0;
  padding: 10px 12px;

  overflow: auto;

  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);

  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);

  /* Lange regels mogen afbreken; de bladzijde mag niet zijwaarts
     gaan schuiven. */
  white-space: pre-wrap;
  word-break: break-word;
}

.techniek > button {
  margin-top: 8px;
}


[hidden] {
  display: none !important;
}


/* ============================================================
   Afdrukken — en daarmee ook "bewaren als pdf"

   De browser maakt de pdf, wij bepalen wat erin staat. Dat pakt beter
   uit dan zelf een pdf schrijven: de notenbalken zijn op het scherm
   al SVG, dus ze gaan als vector mee. Geen beeldpunten, geen
   megabytes, en scherp bij elke vergroting.

   Drie afspraken:
     - alles wat bediening is verdwijnt, alles wat inhoud is blijft;
     - altijd donkere inkt op wit, ook als het scherm op Avond staat;
     - een lied breekt niet middenin over twee bladzijden.
   ============================================================ */

@page {
  size: A4 portrait;
  margin: 18mm 16mm;
}

@media print {

  /* Het thema gaat overboord: een afdruk is zwart op wit. Deze
     variabelen sturen de hele opmaak, dus dit is genoeg. */
  :root,
  :root[data-theme="papier"],
  :root[data-theme="kerkblauw"],
  :root[data-theme="avond"] {
    --bg: #ffffff;
    --panel: #ffffff;
    --header-bg: #ffffff;
    --header-ink: #000000;
    --header-muted: #444444;
    --ink: #16130f;
    --muted: #4a463c;
    --line: #cccccc;
    --rand-knop: #666666;
    --accent: #16130f;
    --accent-ink: #ffffff;
    --gold: #16130f;
    --error: #000000;
  }

  html,
  body {
    background: #ffffff !important;
    color: var(--ink) !important;
  }

  /* Bediening hoort niet op papier. */
  .topbar,
  .bottombar,
  .tekstknoppen,
  .backdrop,
  .sheet,
  .opstartfout,
  .versrij,
  .play-btn,
  .verse-switch,
  .volgen-kop-rij .icon-btn,
  #veiligeRand,
  .beginscherm,
  #bundelscherm,
  #infoScherm,
  #liturgieOverzicht,
  #liturgieBewerken,
  .liturgie-let-op,
  .herstel-paneel,
  .herstel-melding {
    display: none !important;
  }

  /* De pagina zelf mag alle hoogte gebruiken die er is; de app zet op
     het scherm ruimte onderaan om te kunnen scrollen. */
  main,
  .liturgie-volgen,
  #volgenInhoud,
  .liturgieregel,
  .regel-kop-rij,
  .verse,
  .verse-head,
  .verse-lines,
  .lyrics {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  main,
  .liturgie-volgen,
  #volgenInhoud {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .liturgie-volgen {
    /* zetEindruimte() zet dit op het scherm; op papier is het een
       lege bladzijde aan het eind. */
    padding-bottom: 0 !important;
  }

  /* De naam van de liturgie is de titel van het stuk. */
  .volgen-kop {
    position: static !important;
    border: 0 !important;
    padding: 0 0 6mm !important;
  }

  /* Liggend op een telefoon verhuist de naam van de liturgie naar de
     bovenbalk (zie .compact hierboven) — en die drukken we niet af.
     Papier is geen kort scherm: hier hoort de naam gewoon boven het
     stuk te staan, anders komt de liturgie zonder titel uit de
     printer. */
  .volgen-naam,
  .compact .volgen-naam {
    display: block !important;
    font-size: 20pt;
    font-weight: 600;
  }

  .compact .volgen-kop {
    padding: 0 0 6mm !important;
  }

  /* Bladovergangen.

     "Houd dit blok bij elkaar" mag alleen op iets dat ook werkelijk op
     een bladzijde pást. Anders schuift de browser het naar een verse
     bladzijde, waar het nog steeds niet past, en blijft de vorige leeg
     achter. Precies dat gebeurde: een blad met alleen de naam van de
     liturgie, een blad met alleen de naam van de psalm, en pas op het
     derde blad de noten.

     Opgemeten op A4 met deze marges, bruikbare hoogte 986 beeldpunten:

       psalm 35, hele lied   2295 px   ruim twee bladzijden
       psalm 35, één vers    1110 px   groter dan een blad
       één notenbalk          131 px   past altijd

     Dus: de grote blokken mógen breken, en alleen de notenbalk — het
     enige dat gegarandeerd past — wordt bij elkaar gehouden. */

  .liturgieregel {
    break-inside: auto;
    page-break-inside: auto;
    padding-bottom: 6mm !important;
  }

  .verse {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Een notenbalk nooit doormidden. Let op: níet .music-sheet — dat is
     het hele notenblad van een vers, bij psalm 35 zo'n 1050 px, en dus
     precies zo'n blok dat niet past. Alleen de losse balk. */
  .music-line,
  .musicbox {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Het blad wordt op het scherm met transform: scale() op de
     kolombreedte gezet (zie fitSheet). Op papier deugt dat niet om
     twee redenen: die maat is voor het browservenster berekend en niet
     voor een A4, en een geschaald blok laat zich slecht over
     bladzijden verdelen.

     De notenbalk is een SVG met een viewBox, dus die schaalt uit
     zichzelf mee als we hem de volle breedte geven — en blijft daarbij
     vector. Dat is meteen de reden dat deze weg een scherpere en veel
     kleinere pdf oplevert dan een plaatje. */
  .music-sheet {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .music-sheet-schaal {
    width: 100% !important;
    transform: none !important;
  }

  .musicbox svg {
    width: 100% !important;
    height: auto !important;
  }

  /* En een kop hoort nooit onderaan een bladzijde achter te blijven
     met zijn inhoud op de volgende. */
  .volgen-naam,
  .regel-kop-rij,
  .regel-kop,
  .regel-eerste,
  .verse-head,
  .verse-num {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Geen losse regel tekst boven- of onderaan een bladzijde. */
  .lyrics,
  .lyrics .regel {
    orphans: 2;
    widows: 2;
  }

  /* De notenbalk vult de tekstbreedte van de bladzijde. */
  .music-sheet {
    max-width: 100% !important;
  }

  /* Verwijzingen laten zien waar ze heen gaan heeft op papier geen
     zin bij een app die alles op één pagina houdt. */
  a[href]::after {
    content: none !important;
  }

}


/* ============================================================
   Ruimere schermen
   ============================================================ */

@media (min-width: 700px) {

  .index {
    padding: 20px;
    padding-bottom: calc(20px + var(--onderbalk-hoogte, 96px));
  }

  .verse {
    padding: 16px 20px 0;
  }

  .lied-titelblok {
    padding: 30px 20px 14px;
  }

}



/* ============================================================
   Het Register
   Twee kolommen: de wijs, en wie hem meezingt. Op een smal
   scherm onder elkaar, want "De wijs van Psalm 100" en drie
   liednamen ernaast passen daar niet samen op een regel.
   ============================================================ */

.register-wijzen {
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.register-wijzen > div {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 4px 18px;

  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}

.register-wijzen dt {
  margin: 0;
  font-family: var(--book);
}

.register-wijzen dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 560px) {

  .register-wijzen > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

}