/* Web songbook (/<ui>/songbook/): album menu on the left, one song on the right laid out
   like its PDF sheet — landscape columns across the full width (see songbook-web.js). */

body.wsb { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }

/* ── Top bar ── */
.wsb-bar {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  height: 44px; padding: 0 12px; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.wsb-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
  font: 1rem var(--mono); line-height: 1; width: 32px; height: 28px; cursor: pointer;
}
.wsb-btn:hover { color: var(--text); border-color: #555; }
.wsb-home { color: var(--muted); text-decoration: none; white-space: nowrap; }
.wsb-home:hover { color: var(--text); }
.wsb-title { color: var(--accent); letter-spacing: 0.08em; text-transform: lowercase; margin-right: auto; }
.wsb-bar .uilangs { margin-left: 0.4rem; }

/* ── Menu ── */
.wsb-wrap { flex: 1; min-height: 0; display: flex; }
.wsb-nav {
  flex: none; width: 250px; overflow-y: auto; padding: 0.6rem 0.5rem 2rem;
  border-right: 1px solid var(--border); font-size: 0.85rem;
}
body.nav-hidden .wsb-nav { display: none; }
.wsb-album { margin-bottom: 0.6rem; }
.wsb-album > summary {
  cursor: pointer; color: var(--accent); font-size: 0.75rem; letter-spacing: 0.06em;
  padding: 0.3rem 0.4rem; list-style: none; user-select: none;
}
.wsb-album > summary::-webkit-details-marker { display: none; }
.wsb-album > summary::before { content: "▸ "; color: var(--muted); }
.wsb-album[open] > summary::before { content: "▾ "; }
.wsb-album ol { list-style: none; }
.wsb-album a {
  display: block; padding: 0.3rem 0.4rem 0.3rem 1.1rem; border-radius: 3px;
  color: var(--text); text-decoration: none; line-height: 1.3;
}
.wsb-album a:hover { background: var(--surface); }
.wsb-album a.on { background: var(--surface); color: var(--accent); }
.wsb-date { font: 0.7rem var(--mono); color: var(--muted); margin-right: 0.3rem; }

/* ── Song: the PDF sheet on screen ── */
.wsb-main { flex: 1; min-width: 0; overflow: hidden; padding: 14px 22px; }
.wsb-song { height: 100%; }
.wsb-song[hidden] { display: none; }
.wsb-flow {
  height: 100%; column-count: 2; column-gap: 44px; column-fill: auto;
  column-rule: 1px dashed var(--border);
}
.wsb-flow.cols-3 { column-count: 3; column-gap: 30px; }

.wsb .head { margin-bottom: 0.4rem; gap: 0.8rem; align-items: center; }
.wsb .cover { width: 56px; height: 56px; }
.wsb .head h1 { font-size: 1.45rem; margin: 0; }
.wsb .subtitle { font-size: 0.8rem; color: var(--muted); font-style: italic; }
.wsb .credits { font-size: 0.75rem; }
.wsb .print-meta {
  display: block; font-size: 0.78rem; font-style: italic; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 0.35rem; margin: 0.35rem 0 0.5rem;
}
.wsb .print-meta b { font-style: normal; color: var(--text); }
.wsb .layout { display: flex; flex-direction: column; gap: 0; }
.wsb .chords { order: -1; position: static; margin-bottom: 0.7rem; }
.wsb .chords h2 { display: none; }
.wsb .dg-grid { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.wsb .dg-card { border: none; padding: 0; background: none; cursor: default; }
.wsb .dg { width: 58px; height: auto; }
.wsb .sheet { font-size: 1rem; }
.wsb .ch { cursor: default; }
.wsb .ch:hover { text-decoration: none; }
.wsb .sec { margin-bottom: 0.9rem; }
.wsb .sec, .wsb .ln, .wsb .head, .wsb .chords { break-inside: avoid; }

/* ── Narrow screens (phone, portrait): one scrolling column, the menu over the song ── */
@media (max-width: 760px) {
  body.wsb { overflow: auto; height: auto; }
  .wsb-wrap { position: relative; }
  .wsb-nav { position: absolute; z-index: 5; top: 0; bottom: 0; background: var(--bg); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5); }
  .wsb-main { overflow: visible; padding: 12px 16px; }
  .wsb-flow { height: auto; column-count: 1; }
  .wsb-home, .wsb-title { display: none; }
}