:root { color-scheme: light dark; --accent: #2a9d6e; --muted: #888; }
* { box-sizing: border-box; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 48rem; margin: 0 auto; padding: 1rem 1.25rem 4rem;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* top nav */
nav.top {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  padding: 0.5rem 0 1rem; border-bottom: 1px solid #8884; margin-bottom: 1.25rem;
}
nav.top .brand { font-weight: bold; font-size: 1.2rem; margin-right: auto; }
nav.top form.inline { display: inline; }

/* buttons */
.btn, button {
  font: inherit; cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 6px;
  padding: 0.35rem 0.8rem; text-decoration: none; display: inline-block;
}
.btn:hover, button:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost, button.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 0.2rem 0.55rem; font-size: 0.85rem; }

h1 { font-size: 1.7rem; margin: 0.2rem 0; }
.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

/* index */
.filters { margin: 0.75rem 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filters a { border: 1px solid #8884; border-radius: 999px; padding: 0.15rem 0.7rem;
  font-size: 0.85rem; color: inherit; }
.filters a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#search { width: 100%; padding: 0.55rem; font-size: 1rem; margin: 0.5rem 0; }
ul.index { list-style: none; padding: 0; columns: 2; }
@media (max-width: 36rem) { ul.index { columns: 1; } body { max-width: 100%; } }
ul.index li { margin: 0.18rem 0; break-inside: avoid; }
ul.index li.no-lyrics a { color: var(--muted); }
ul.index li small { color: var(--muted); }

/* song page */
.lyrics { white-space: pre-wrap; font-size: 1.08rem; }
.todo { color: var(--muted); font-style: italic; }
.banner { background: #2a9d6e22; border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.5rem 0.8rem; margin: 1rem 0; font-size: 0.95rem; }
hr { border: none; border-top: 1px solid #8884; margin: 2rem 0 1rem; }
.src { font-size: 0.85rem; color: var(--muted); }

/* forms */
form.stack { display: flex; flex-direction: column; gap: 0.6rem; max-width: 34rem; }
label { font-size: 0.9rem; color: var(--muted); }
input[type=text], input[type=password], textarea, select {
  font: inherit; padding: 0.5rem; width: 100%;
  border: 1px solid #8886; border-radius: 6px; background: transparent; color: inherit;
}
textarea { min-height: 16rem; font-family: inherit; }
textarea.lyrics-edit { font-size: 1.05rem; }
.error { color: #c0392b; }

/* comments */
.comments { margin-top: 1rem; }
.comment { border-left: 2px solid #8884; padding: 0.3rem 0 0.3rem 0.8rem; margin: 0.6rem 0; }
.comment .who { font-weight: bold; font-size: 0.9rem; }
.comment .when { color: var(--muted); font-size: 0.8rem; }
.comment .body { white-space: pre-wrap; }
.comment .replies { margin-left: 0.6rem; }
.reply-toggle { font-size: 0.8rem; cursor: pointer; color: var(--accent); }

/* font-size control for performance/reading */
.fontsize { float: right; font-size: 0.85rem; color: var(--muted); }
.fontsize button { background: transparent; color: var(--accent); border: 1px solid #8884;
  padding: 0 0.5rem; }

@media print {
  nav.top, .filters, form, .fontsize, .reply-toggle, .btn, button { display: none !important; }
  body { max-width: 100%; }
}