/* Loopelo free templates: the printed sheet.
   One .tpl-page is one sheet at its real size in millimetres. --tpl-scale
   scales type and spacing so A3 and A5 keep the proportions of A4. Used by the
   live preview (scaled down by editor.css) and by the print dialog (PDF). */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; src: url("/assets/fonts/SourceSans3-Regular.woff2") format("woff2"); font-display: swap }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; src: url("/assets/fonts/SourceSans3-SemiBold.woff2") format("woff2"); font-display: swap }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; src: url("/assets/fonts/SourceSans3-Bold.woff2") format("woff2"); font-display: swap }

@page tpl-a3 { size: 297mm 420mm; margin: 0 }
@page tpl-a4 { size: 210mm 297mm; margin: 0 }
@page tpl-a5 { size: 148mm 210mm; margin: 0 }
.tpl-size-a3 { page: tpl-a3 }
.tpl-size-a4 { page: tpl-a4 }
.tpl-size-a5 { page: tpl-a5 }

.tpl-page {
  --tpl-ink: #14213A; --tpl-muted: #4A5570; --tpl-rule: #9AA3B5; --tpl-light: #D9D3C6;
  box-sizing: border-box; position: relative; display: flex; flex-direction: column;
  width: var(--tpl-w); height: var(--tpl-h); overflow: hidden;
  padding: calc(15mm * var(--tpl-scale));
  background: #fff; color: var(--tpl-ink); text-align: left;
  font: 400 calc(10.5pt * var(--tpl-scale))/1.45 "Source Sans 3", Arial, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tpl-page *, .tpl-page *::before, .tpl-page *::after { box-sizing: border-box }
.tpl-page p, .tpl-page dl, .tpl-page ul { margin: 0 }
.tpl-page > * + * { margin-top: calc(3mm * var(--tpl-scale)) }
.tpl-align-center { text-align: center }
.tpl-align-right { text-align: right }

.tpl-h { font-weight: 700; line-height: 1.08; letter-spacing: -.02em }
.tpl-h1 { font-size: 2.3em }
.tpl-h2 { font-size: 1.45em; line-height: 1.15 }
.tpl-meta { color: var(--tpl-muted); font-size: 1.05em }
.tpl-text-small { font-size: .86em; color: var(--tpl-muted) }
.tpl-text-large { font-size: 1.25em }
.tpl-big { font-weight: 700; font-size: 3.6em; line-height: 1; letter-spacing: -.03em; color: var(--tpl-accent) }

.tpl-facts { display: grid; gap: .45em; font-size: 1.25em }
.tpl-facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: .6em }
.tpl-facts dt { color: var(--tpl-muted); font-weight: 600 }
.tpl-facts dd { margin: 0 }

.tpl-table { width: 100%; border-collapse: collapse; table-layout: fixed }
.tpl-table th { text-align: left; font-weight: 700; border-bottom: .5mm solid var(--tpl-ink); padding: .35em .4em }
.tpl-table td { border-bottom: .25mm solid var(--tpl-light); padding: .3em .4em; height: calc(8mm * var(--tpl-scale)); vertical-align: middle; overflow-wrap: anywhere }
.tpl-cell-number { color: var(--tpl-muted); font-variant-numeric: tabular-nums }
.tpl-cell-check { text-align: center }
.tpl-box { display: inline-block; width: 1.1em; height: 1.1em; border: .35mm solid var(--tpl-ink); border-radius: .2em; vertical-align: -.2em; margin-right: .4em }
.tpl-cell-check .tpl-box { margin-right: 0 }

.tpl-line { display: block; border-bottom: .25mm solid var(--tpl-rule); height: calc(8mm * var(--tpl-scale)) }
.tpl-lines-label { color: var(--tpl-muted) }
.tpl-list { padding: 0; list-style: none; display: grid; gap: .35em }
.tpl-list-dot li { position: relative; padding-left: 1.1em }
.tpl-list-dot li::before { content: "\2022"; position: absolute; left: 0; color: var(--tpl-accent); font-weight: 700 }
.tpl-signature, .tpl-slip-lines { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(8mm * var(--tpl-scale)) }
.tpl-ruled small { display: block; color: var(--tpl-muted); font-size: .82em; margin-top: .3em }
.tpl-notice { font-size: .82em; font-style: italic; color: var(--tpl-muted); border-left: .6mm solid var(--tpl-light); padding-left: .6em }
.tpl-image img { display: inline-block; width: auto; max-width: 100%; object-fit: contain }

.tpl-qr { display: flex; align-items: center; gap: calc(4mm * var(--tpl-scale)); border-top: .25mm solid var(--tpl-light); padding-top: calc(4mm * var(--tpl-scale)) }
.tpl-qr-code { flex: none; width: calc(26mm * var(--tpl-scale)); height: calc(26mm * var(--tpl-scale)) }
.tpl-qr-code canvas, .tpl-tab-qr canvas { display: block; width: 100% !important; height: 100% !important }
.tpl-qr-text b { display: block; font-weight: 700 }
.tpl-qr-text span { display: block; color: var(--tpl-muted); font-weight: 600 }
.tpl-fill { flex: 1 1 auto; margin: 0 !important }

.tpl-song + .tpl-song { margin-top: calc(6mm * var(--tpl-scale)) }
.tpl-song-title { font-weight: 700; font-size: 1.35em }
.tpl-verse { margin-top: .5em !important }
.tpl-verse-no { font-weight: 700; color: var(--tpl-accent) }
.tpl-song-credit { margin-top: .5em !important; font-size: .82em; color: var(--tpl-muted) }

/* Placed after the generic spacing rule on purpose: these push to the bottom. */
.tpl-slip { margin-top: auto; position: relative; border-top: .35mm dashed var(--tpl-rule); padding-top: calc(5mm * var(--tpl-scale)) }
.tpl-slip::before { content: "\2702"; position: absolute; top: -.75em; left: 0; padding-right: .3em; background: #fff; color: var(--tpl-rule) }
.tpl-slip-title { font-weight: 700; margin-bottom: .4em }
.tpl-slip-checks { display: flex; flex-wrap: wrap; gap: 1.5em; margin-top: .8em }
.tpl-tearoffs {
  margin: auto calc(-15mm * var(--tpl-scale)) calc(-15mm * var(--tpl-scale));
  display: grid; grid-template-columns: repeat(var(--tpl-tabs), minmax(0, 1fr));
  height: calc(55mm * var(--tpl-scale)); border-top: .35mm dashed var(--tpl-rule)
}
.tpl-tab { display: flex; flex-direction: column; align-items: center; gap: 1.5mm; padding: 2mm 1mm; overflow: hidden; border-left: .35mm dashed var(--tpl-rule) }
.tpl-tab:first-child { border-left: 0 }
.tpl-tab-qr { width: min(17mm, 92%); aspect-ratio: 1 }
.tpl-tab span, .tpl-tab small { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 700; font-size: .85em }
.tpl-tab small { font-weight: 600; font-size: .72em; color: var(--tpl-muted) }

/* Poster style "auffällig": the accent fills the sheet. */
.tpl-style-bold { background: var(--tpl-accent); color: #fff }
.tpl-style-bold .tpl-big { color: #fff; font-size: 4.6em }
.tpl-style-bold .tpl-meta, .tpl-style-bold .tpl-facts dt, .tpl-style-bold .tpl-qr-text span, .tpl-style-bold .tpl-text-small { color: rgba(255, 255, 255, .88) }
.tpl-style-bold .tpl-qr { border-top-color: rgba(255, 255, 255, .5) }
.tpl-style-bold .tpl-qr-code { background: #fff; padding: 1.5mm; border-radius: 2mm }

/* Display sheets have their own type scale; all other sheets keep the base rules. */
.tpl-display > * { flex-shrink: 0 }
.tpl-display .tpl-big { font-size: calc(var(--tpl-title-size) * var(--tpl-scale)); overflow-wrap: anywhere }
.tpl-display .tpl-facts { font-size: calc(var(--tpl-facts-size) * var(--tpl-scale)); line-height: 1.2; gap: .35em }
.tpl-display .tpl-facts div { grid-template-columns: minmax(0, 24fr) minmax(0, 76fr); gap: .6em }
.tpl-display .tpl-meta { font-size: calc(var(--tpl-meta-size) * var(--tpl-scale)); line-height: 1.25; overflow-wrap: anywhere }
.tpl-display .tpl-text { font-size: calc(var(--tpl-text-size) * var(--tpl-scale)); line-height: 1.25; overflow-wrap: anywhere }
.tpl-display .tpl-facts dt, .tpl-display .tpl-facts dd { overflow-wrap: anywhere }
.tpl-display .tpl-fill { flex: 1 0 auto }
.tpl-display .tpl-qr-text { min-width: 0; overflow-wrap: anywhere }
.tpl-display .tpl-tab {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-items: start;
  gap: calc(1.5mm * var(--tpl-scale)) 0;
  padding: calc(2mm * var(--tpl-scale)) calc(1mm * var(--tpl-scale))
}
.tpl-display .tpl-tab-qr { grid-column: 1 / -1; width: min(calc(17mm * var(--tpl-scale)), 92%); flex-shrink: 0 }
.tpl-display .tpl-tab span, .tpl-display .tpl-tab small {
  white-space: normal; overflow-wrap: anywhere; height: 100%; max-height: calc(30mm * var(--tpl-scale));
  font-size: calc(8pt * var(--tpl-scale)); line-height: 1.1; flex-shrink: 0
}
.tpl-display .tpl-tab small { font-size: calc(7pt * var(--tpl-scale)) }

/* Printing: only the sheets, one per page, at the template's size. */
.tpl-print-root { display: none }
@media print {
  body.tpl-printing { margin: 0 !important; padding: 0 !important; background: #fff !important }
  body.tpl-printing > *:not(.tpl-print-root) { display: none !important }
  body.tpl-printing .tpl-print-root { display: block }
  .tpl-print-root .tpl-page { break-after: page; box-shadow: none }
  .tpl-print-root .tpl-page:last-child { break-after: auto }
}