/* ── Page header ── */
.page-header {
  padding: 4rem 2rem 2.5rem; 
  max-width: 900px; 
  margin: 0 auto;
  border-bottom: 1px solid rgba(44,35,24,0.1);
}
.page-eyebrow { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; }
.page-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3rem); font-weight:400; line-height:1.1; }
.page-title em { font-style:italic; color:var(--rust); }
.page-sub { margin-top:1rem; color:var(--bark-md); font-style:italic; font-size:1rem; }

/* ── Search + filter controls ── */
.controls {
  max-width: 900px; margin: 2rem auto 0; padding: 0 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.search-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:220px; }
.search-wrap input {
  width:100%; background:var(--cream-dk); border:1px solid rgba(44,35,24,0.15);
  border-radius:2px; padding:0.65rem 1rem 0.65rem 2.6rem;
  font-family:'Lora',serif; font-size:0.9rem; color:var(--bark);
  outline:none; transition:border-color 0.2s;
}
.search-wrap input:focus { border-color:var(--gold); }
.search-wrap input::placeholder { color:var(--sage); }
.search-icon { position:absolute; left:0.8rem; top:50%; transform:translateY(-50%); opacity:0.4; pointer-events:none; }
.clear-btn {
  position:absolute; right:0.7rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1rem; color:var(--sage);
  opacity:0; transition:opacity 0.15s; line-height:1; padding:0;
}
.search-wrap.has-value .clear-btn { opacity:0.6; }
.search-wrap.has-value .clear-btn:hover { opacity:1; }
.song-count { font-size:0.8rem; color:var(--sage); white-space:nowrap; }

/* ── Tag filter row ── */
.tag-filter-row { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; min-height:2rem; }
.tag-filter-label { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); white-space:nowrap; margin-right:0.25rem; }
.tag-btn {
  font-family:'Lora',serif; font-size:0.72rem; letter-spacing:0.06em;
  padding:0.28rem 0.7rem; border-radius:20px; border:1px solid rgba(44,35,24,0.2);
  background:transparent; color:var(--bark-md); cursor:pointer; transition:all 0.15s;
  white-space:nowrap;
}
.tag-btn:hover { border-color:var(--gold); color:var(--bark); }
.tag-btn.active { background:var(--bark); border-color:var(--bark); color:var(--cream); }
.tag-btn.clear-tags { color:var(--sage); border-style:dashed; }
.tag-btn.clear-tags:hover { border-color:var(--rust); color:var(--rust); }
.no-tags-msg { font-size:0.8rem; color:var(--sage); font-style:italic; }

/* ── Song list layout ── */
.song-list { max-width:900px; margin:2rem auto 0; padding:0 2rem 6rem; flex: 1; }
.song-card { border-bottom:1px solid rgba(44,35,24,0.1); overflow:hidden; }
.song-card:first-child { border-top:1px solid rgba(44,35,24,0.1); }

.song-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 0; cursor:pointer; gap:1rem; user-select:none;
}
.song-header:hover .song-title { color:var(--rust); }

.song-left { display:flex; align-items:baseline; gap:0.9rem; flex:1; min-width:0; }
.song-week { display:none; }
.song-title-wrap { min-width:0; }
.song-title { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:400; color:var(--bark); transition:color 0.2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.song-inline-tags { display:flex; gap:0.3rem; flex-wrap:wrap; margin-top:0.2rem; }
.tag-pill {
  font-size:0.62rem; letter-spacing:0.07em; padding:0.15rem 0.5rem;
  border-radius:20px; border:1px solid rgba(44,35,24,0.18); color:var(--sage);
  white-space:nowrap; cursor:pointer; transition:all 0.12s;
}
.tag-pill:hover { border-color:var(--gold); color:var(--bark); }
.tag-pill.highlighted { background:var(--bark); border-color:var(--bark); color:var(--cream); }

.song-right { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.song-date { font-size:0.78rem; color:var(--sage); }
.listen-badges { display:flex; gap:0.35rem; }
.badge { font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.22rem 0.55rem; border-radius:2px; text-decoration:none; border:1px solid currentColor; transition:background 0.15s,color 0.15s; }
.badge-sc { color:var(--rust); }
.badge-sc:hover { background:var(--rust); color:var(--cream); }
.badge-bc { color:var(--sage); }
.badge-bc:hover { background:var(--sage); color:var(--cream); }
.toggle-icon { font-size:1.1rem; color:var(--gold); transition:transform 0.25s; flex-shrink:0; }
.song-card.open .toggle-icon { transform:rotate(45deg); }

/* ── Lyrics panel drawer ── */
.lyrics-panel { max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.song-card.open .lyrics-panel { max-height:4000px; }
.lyrics-inner { padding:0.25rem 0 2.25rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }

.lyrics-text {
  font-family:'Source Code Pro',monospace; font-size:0.82rem; line-height:1.9;
  color:var(--bark-md); white-space:pre-wrap;
  border-left:2px solid var(--gold); padding-left:1.25rem;
}
.lyrics-text mark { background:rgba(200,145,58,0.22); color:var(--bark); border-radius:2px; padding:0 2px; }

.song-sidebar { display:flex; flex-direction:column; gap:1rem; padding-top:0.25rem; }
.song-notes { font-size:0.85rem; font-style:italic; color:var(--sage); line-height:1.6; }
.links-panel, .print-panel { display:flex; flex-direction:column; gap:0.6rem; }

/* Universal sidebar action button styles */
.link-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Lora',serif; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(44,35,24,0.2); color:var(--bark-md); background: transparent;
  padding:0.55rem 0.9rem; border-radius:2px; transition:border-color 0.2s,color 0.2s; width:fit-content;
  cursor: pointer;
}
.link-btn:hover { border-color:var(--gold); color:var(--bark); }
.link-btn svg { width:13px; height:13px; opacity:0.55; flex-shrink:0; }

.no-results { text-align:center; padding:4rem 0; color:var(--sage); font-style:italic; }

/* ── Lyrics box & copyright ── */
.lyrics-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.song-copyright {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--sage);
  font-style: italic;
  padding-left: 1.25rem;
}

@media (max-width: 600px) {
  .lyrics-inner { grid-template-columns:1fr; }
  .page-header,.controls,.song-list { padding-left:1.25rem; padding-right:1.25rem; }
  .song-title { font-size:1rem; }
  .song-date { display:none; }
}