/* ============================================================
   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 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 at the left, and at the right one
   column that scrolls, holding the title, the player and the stanzas.
   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, the row above and a little air */
  height: calc(100dvh - 4.8rem - 4.2rem);
  min-height: 24rem;
}
@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; }
@media (max-width: 760px) { .song-picture img { max-height: 16vh; object-fit: cover; } }
.song-scroller {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  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), rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.25), 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 title and below the last stanza, so each can sit in the
   middle of the column. Percentages of the column's own height. */
.song-scroller::before { content: ""; display: block; flex: none; height: 35%; }
.song-scroller::after { content: ""; display: block; flex: none; height: 45%; }
.song-titlebox { scroll-snap-align: center; flex: none; }
.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-scroller .song-words { margin-top: 3.5em; }
.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); }