/* ============================================================
   Plumline — the songbook
   Three views of one page: the list, one song, and the whole
   book laid out for printing. Built from tokens.css and site.css;
   nothing here is a colour or a radius of its own.
   ============================================================ */

.songbook-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: var(--space-text) 0 0; }
/* Thay's words on singing, folded under one line after the button, so
   opening them moves nothing above. The line ends in a round control, as
   the events on Sangha Builders do: a chevron pointing down on a raised
   disc, which sinks and turns up once the words are open (Alipasha,
   12 Oct 2026). The disc comes after the words and the chevron over it. */
.why-sing { margin: var(--space-text) 0 0; }
.why-sing > summary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  cursor: pointer; font-weight: 600; color: var(--ink); list-style: none;
}
.why-sing > summary::-webkit-details-marker { display: none; }
.why-sing > summary::before,
.why-sing > summary::after { content: ""; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; }
.why-sing > summary::before {
  order: 2;
  background: var(--white-knob);
  box-shadow: var(--white-face-lines);
}
.why-sing > summary::after {
  order: 3; margin-left: -2.3rem; background: var(--sect-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") center / 55% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") center / 55% no-repeat;
}
.why-sing[open] > summary::before {
  background: var(--sunk-face);
  box-shadow: var(--sunk-face-lines);
}
.why-sing[open] > summary::after { transform: rotate(180deg); }
.why-sing .teaching { margin: 0.8rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--sect); font-size: 0.95em; }
.why-sing .teaching p { margin-bottom: 0.7em; }
.why-sing .teaching footer { color: var(--muted); font-style: italic; }
.songbook-status { color: var(--muted); font-style: italic; margin: 0; }
/* Until the songs arrive the section keeps a screen's height, so the footer
   starts out of sight rather than in view and then pushed down by the list
   (PageSpeed, 20 Oct 2026). */
#songbook[aria-busy="true"] { min-height: 100vh; }

/* ---- the header steps aside ------------------------------------
   On this page the header slides up out of the way while the page or a
   song's words move on down, and comes back as soon as they are moved
   back up, so the words have the whole window (Alipasha, 3 Nov 2026).
   songbook.js sets header-away. --header-room is the room the header
   takes at the top of the window, the same 4.8rem as scroll-padding-top
   in site.css. The slide takes 0.3s, and songbook.js moves a song in
   view up or down with it over the same time. */
:root { --header-room: 4.8rem; }
html.header-away { --header-room: 0rem; scroll-padding-top: 0; }
.site-header { transition: transform 0.3s ease-in-out; }
html.header-away .site-header { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* ---- the list ------------------------------------------------
   Every title on one screen, so a sangha choosing a song can see
   the whole shelf. Columns rather than rows: a row per song was
   three screens of scrolling. */
.songbook-section + .songbook-section { margin-top: 2.2rem; }
.song-list {
  list-style: none; margin: 0; padding: 0;
  columns: 1; column-gap: 2rem;
}
@media (min-width: 621px) { .song-list { columns: 2; } }
@media (min-width: 901px) { .song-list { columns: 3; } }
.song-list li { break-inside: avoid; }
.song-list a {
  display: flex; align-items: baseline; padding: 0.55rem 0.2rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.song-list a .song-number { flex: none; }
.song-list a .song-title { flex: 1; min-width: 0; }
.song-list a:hover { text-decoration: none; color: var(--sect-text); background: var(--card); }

/* ---- one song ------------------------------------------------
   The old page's shape, kept because it works on a shared screen. The
   song fills the window: the picture, the title and the player at the
   left, and at the right one column of stanzas that scrolls. The player
   stays in view while the words move, by hand or with the recording.
   Each stanza snaps to the middle of the column, and the column fades
   towards its top and bottom, so the stanza being sung is the clear one
   and the rest step back. The words are set large, on a short measure. */
.song-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; }
.song-back { font-weight: 600; }
.song-back::before { content: "\2190\00a0"; }
.song-stage {
  display: grid; gap: 1rem; align-items: center; margin-top: 0.6rem;
  /* the window, less the sticky header while it is there, the row above
     and a little air */
  height: calc(100dvh - var(--header-room) - 4.2rem);
  min-height: 24rem;
  transition: height 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .song-stage { transition: none; } }
@media (min-width: 761px) { .song-stage { grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 3rem; } }
.song-picture { margin: 0; }
.song-picture img { width: 100%; display: block; }
/* On a narrow screen the picture, title and player sit above the words,
   the picture small beside the other two, so the words keep the room. */
@media (max-width: 760px) { .song-stage { grid-template-rows: auto minmax(0, 1fr); } }
.song-side { display: grid; gap: 1.2rem; align-content: center; min-width: 0; }
@media (max-width: 760px) {
  .song-side:has(.song-picture) { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .song-picture img { width: 5.5rem; height: 5.5rem; object-fit: cover; }
}
/* --rest is the line a stanza comes to rest on: the middle of the
   column, or, where songbook.js finds a picture beside the words, in line
   with its middle. The column is clear for a tenth of its height either
   side of that line and fades out towards its top and bottom; at 50% the
   stops are the even 20, 40, 60, 80. */
.song-scroller {
  --rest: 50%;
  height: 100%; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  display: flex; flex-direction: column;
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) calc(var(--rest) - 30%), rgba(0, 0, 0, 1) calc(var(--rest) - 10%),
    rgba(0, 0, 0, 1) calc(var(--rest) + 10%), rgba(0, 0, 0, 0.25) calc(var(--rest) + 30%), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) calc(var(--rest) - 30%), rgba(0, 0, 0, 1) calc(var(--rest) - 10%),
    rgba(0, 0, 0, 1) calc(var(--rest) + 10%), rgba(0, 0, 0, 0.25) calc(var(--rest) + 30%), rgba(0, 0, 0, 0));
}
.song-scroller::-webkit-scrollbar { display: none; }
.song-scroller:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-xs); }
/* Room above the first stanza and below the last, so each can come to
   rest on the line too. */
.song-scroller::before { content: ""; display: block; flex: none; height: var(--rest); }
.song-scroller::after { content: ""; display: block; flex: none; height: calc(100% - var(--rest)); }
.song-titlebox { min-width: 0; }
.song-titlebox h2 { margin: 0 0 0.6rem; }
.song-players { margin: 0; max-width: 40rem; display: grid; gap: 0.6rem; }
.song-players label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }
.song-players > div { min-width: 0; }
.song-players audio { width: 100%; max-width: 100%; display: block; }
.song-words {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.5; max-width: 34ch;
  flex: none;
}
.song-words.larger { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.song-words .verse + .verse { margin-top: 3.5em; }
.song-words .stanza { margin: 0 0 2.2em; scroll-snap-align: center; }
.song-words .stanza p { margin: 0; }
.song-words .stanza p.indent { padding-left: 1.4em; }
.song-words .stanza p.note { font-size: 0.7em; color: var(--muted); font-style: italic; line-height: 1.5; margin-bottom: 0.6em; }
.song-empty { color: var(--muted); font-style: italic; }
.song-number {
  display: inline-block; min-width: 2ch; margin-right: 0.6ch; text-align: right;
  color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums;
}
h3 .song-number { font-size: 0.7em; min-width: 0; margin-right: 0.5ch; vertical-align: 0.1em; }

/* ---- the whole book --------------------------------------------
   A4 pages, the same on screen as on paper. Sizes in the pages are in
   mm and pt so that what is measured on screen is what prints. The
   script fills the columns; this only draws them. */
.book { margin-top: 1.4rem; }
/* The page is the sheet's own width, whatever the site's .measure and
   .contents would make of the book's measuring page and contents page:
   a song measured narrower than it prints came out too tall, and was
   pushed on to a later page with room to spare. */
.page {
  box-sizing: border-box; width: 210mm; height: 297mm; max-width: none;
  padding: 18mm 20mm 20mm; position: relative; overflow: hidden;
  background: #fff; color: #000; margin: 0 0 1.2rem;
  border: 1px solid var(--rule); box-shadow: var(--shadow);
  font-size: 12.5pt; line-height: 1.45;
}
.page-body { height: 100%; display: flex; gap: 10mm; }
/* A column is half the page from the moment it is made. Left to share the
   width, the first column had the whole page to itself while it was being
   filled, so its lines were measured unwrapped, and words ran off its foot
   once the second column arrived. Two columns: PAGE_COLUMNS in songbook.js. */
.page .col { flex: 0 0 calc((100% - 10mm) / 2); min-width: 0; height: 100%; overflow: hidden; }
.page-number {
  position: absolute; left: 0; right: 0; bottom: 8mm; margin: 0;
  text-align: center; font-size: 10pt; color: #666;
}
.page .kicker { color: #666; margin-bottom: 0.2em; }
/* the cover: the drawing fills the sheet, edge to edge */
.page.cover { padding: 0; }
.page.cover .page-body { display: block; }
.page.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page.cover .book-colophon {
  position: absolute; left: 0; right: 0; bottom: 6mm; margin: 0;
  text-align: center; font-size: 9pt; color: #777;
}
/* the column songs are measured in, never seen */
.page.measure { position: absolute; left: -9999px; top: 0; visibility: hidden; }
/* the contents */
.page.contents h2 { font-size: 20pt; margin: 0 0 0.6em; }
.page.contents .contents-part { font-size: 13pt; margin: 1.2em 0 0.4em; }
.page.contents .contents-part.col-first { margin-top: 0; }
.contents-entry {
  display: flex; align-items: baseline; gap: 0.5ch; padding: 0.22em 0;
  border-bottom: 1px solid #e4e4e4; color: inherit; font-size: 11pt;
}
.contents-entry .song-number { flex: none; color: #666; min-width: 2ch; margin-right: 0; }
.contents-entry .song-title { flex: 1; min-width: 0; }
.contents-entry .contents-page { flex: none; color: #666; font-variant-numeric: tabular-nums; }
/* the songs */
.song-start { margin-top: 1.8em; }
.song-start.col-first, .col > .song-start:first-child { margin-top: 0; }
.song-start h3 { font-size: 16pt; margin: 0 0 0.6em; line-height: 1.2; }
.song-start h3 .song-number { font: inherit; color: inherit; min-width: 0; margin-right: 0.5ch; vertical-align: 0; }
.page .stanza { margin: 0 0 1em; }
.page .stanza.verse-start { margin-top: 1.8em; }
.page .stanza.col-first { margin-top: 0; }
.page .stanza p { margin: 0; }
.page .stanza p.indent { padding-left: 1.4em; }
.page .stanza p.note { font-size: 0.8em; color: #555; font-style: italic; margin-bottom: 0.4em; }
.page .song-empty { color: #666; font-style: italic; }

@page { size: A4; margin: 0; }
@media print {
  .site-header, .site-footer, .song-row,
  #songbook-head, #songbook-welcome, .skip { display: none !important; }
  html, body { background: #fff; }
  section.block { padding: 0; border: 0; }
  .wrap { max-width: none; padding: 0; margin: 0; }
  .book { margin: 0; zoom: 1 !important; }
  .page { margin: 0; border: 0; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
  a { color: inherit; text-decoration: none; }
  /* A song printed on its own: all of it, not the column's window of it,
     and the list or a song inside the paper's edges; only the book's own
     pages run to the sheet's edge. */
  .song-stage { height: auto; min-height: 0; }
  .song-scroller { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .song-scroller::before, .song-scroller::after { display: none; }
  body:not(:has(#songbook-all:not([hidden]))) .wrap { padding: 15mm 18mm; }
}

/* ---- small type ---------------------------------------
   Everything this sheet sets at 0.9rem or smaller, apart from
   small capitals, is set a little apart (--tracking-small in
   tokens.css). Kept in one list rather than beside each size,
   at no weight of its own, so a rule that sets its own spacing
   still has the last word. A new small size belongs here too. */
:where(
  .song-players label,
  .song-words .stanza p.note,
  h3 .song-number,
  .page .stanza p.note
) { letter-spacing: var(--tracking-small); }