/* Shared BabamBook styles. Pages may add their own <style> on top. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; background: #222; color: #fff; font-family: sans-serif; font-size: 18px; line-height: 1.4; }
#wrap { max-width: 800px; margin: 0 auto; }
a { color: #ff0; }

header {
  border-bottom: 3px solid #ff0;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.header-left { min-width: 0; }
h1 { font-size: 2.5rem; margin: 0; letter-spacing: 0.03em; }
h1 .babam { color: #ff0; }
h1 .book  { color: #fff; }
h1 .page-sub { color: #aaa; font-size: 1.2rem; font-weight: normal; }
.header-right { font-size: 0.8rem; color: #888; }

h2 { color: #ff0; font-size: 1.2rem; margin: 2rem 0 0.75rem 0; }
h2:first-of-type { margin-top: 0; }

.text-btn { background: none; border: none; color: #888; cursor: pointer; font-size: 0.8rem; text-decoration: underline; padding: 0; }
.text-btn:hover { color: #ff0; }

.btn { font-size: 0.95rem; padding: 0.35rem 0.9rem; cursor: pointer; background: #ff0; color: #111; border: none; font-weight: bold; text-decoration: none; display: inline-block; }
.btn-small { font-size: 0.75rem; color: #888; text-decoration: none; border: 1px solid #444; padding: 0.1rem 0.4rem; background: none; cursor: pointer; }
.btn-small:hover { border-color: #ff0; color: #ff0; }
.btn-small.danger:hover { border-color: #f66; color: #f66; }
form.inline { display: inline; }

.item-list { list-style: none; margin: 0; padding: 0; }
.item-list li { border-bottom: 1px solid #333; padding: 0.55rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; }
.item-list li:last-child { border-bottom: none; }
.item-title { font-size: 1.1rem; }
.item-meta { font-size: 0.8rem; color: #777; }
.item-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.empty { color: #666; font-style: italic; }
.msg { padding: 0.75rem 1rem; margin: 1rem 0; border-left: 4px solid #ff0; background: #1a1a1a; color: #ccc; }
.msg.error { border-color: #f66; color: #f99; }

/* forms */
.field { margin: 0.9rem 0; }
.field > label { display: block; color: #ccc; font-size: 0.95rem; margin-bottom: 0.25rem; }
.field .hint { color: #666; font-size: 0.8rem; }
input[type=text], input[type=password], input[type=url], select, textarea {
  font-size: 0.95rem; padding: 0.3rem 0.5rem; background: #1a1a1a; color: #ff9; border: 1px solid #555;
  font-family: inherit; max-width: 100%;
}
.field input[type=text], .field textarea { width: 100%; }
textarea { resize: vertical; line-height: 1.4; }
textarea.mono { font-family: monospace; font-size: 0.9rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.row > .field { flex: 1 1 14rem; }

/* formatted notes (form & leading) */
.notes { color: #ddd; line-height: 1.55; }
.notes h3 { color: #ff0; font-size: 1.05rem; margin: 1.2rem 0 0.3rem 0; }
.notes h3:first-child { margin-top: 0; }
.notes p { margin: 0.4rem 0; }
.notes ul { margin: 0.3rem 0; padding-left: 1.4rem; }

/* instrument picker bar */
.picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
  background: #1a1a1a; border-left: 4px solid #ff0; padding: 0.6rem 0.9rem; margin: 0 0 1.5rem 0;
  font-size: 0.95rem; color: #ccc;
}
.picker select { font-size: 1rem; margin-left: 0.3rem; }
.pick-notes { white-space: nowrap; }
.pick-hint { color: #ff0; font-size: 0.85rem; }

/* rendered parts (lib/babam-abc.js) */
.part-block { margin: 1.5rem 0 2rem 0; }
.part-block h3 { margin: 0 0 0.3rem 0; font-size: 1.1rem; color: #ff0; text-transform: capitalize; }
.part-block .part-comments { font-size: 0.9rem; color: #bbb; margin: 0 0 0.4rem 0; }
.abc-render { background: #fff; color: #000; padding: 0.5rem; overflow-x: auto; }
.abc-render path, .abc-render rect, .abc-render ellipse, .abc-render polygon { fill: #000; }
.abc-render text { fill: #000; }
.abc-render .abcjs-note_selected path, .abc-render .abcjs-note_selected rect { fill: #d60 !important; }
.abc-warnings { color: #f66; font-size: 0.8rem; }
.abc-warnings:empty { display: none; }
.abc-play { margin-top: 0.5rem; font-size: 0.95rem; padding: 0.3rem 1rem; background: #ff0; color: #111; border: none; cursor: pointer; font-weight: bold; }
.abc-play:disabled { background: #666; color: #999; cursor: default; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #333; font-size: 0.8rem; color: #555; }
footer a { color: #777; }

pre.raw { background: #111; color: #ccc; font-size: 0.8rem; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; margin: 0.25rem 0 0 0; }
details summary { cursor: pointer; color: #888; font-size: 0.85rem; }

@media (max-width: 500px) {
  h1 { font-size: 1.9rem; }
}