/* WP Chords styles - professional toolbar, fixed button sizes, chords above lyrics centered */

.wpchords-root {
  --wc-scale: 1;
  --wc-font: calc(16px * var(--wc-scale));
  --wc-chord-font: calc(var(--wc-font) * 0.95);
  font-family: ui-sans-serif, system-ui, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #111827;
  font-size: var(--wc-font);
  line-height: 1.45;
}

/* Toolbar */
.wpchords-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border: 1px solid #e6edf3;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
  margin-bottom: 10px;
}

/* fixed button size */
.wpchords-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f8fafc;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease;
  padding: 0;
}
.wpchords-btn .icon { width: 18px; height: 18px; color: #0f172a; stroke: currentColor; }
.wpchords-btn .label { font-weight: 600; font-size: 15px; color: #0f172a; line-height:1; }
.wpchords-btn:hover { background: #ffffff; box-shadow: 0 4px 12px rgba(2,6,23,0.06); transform: translateY(-1px); }
.wpchords-sep { width:1px; height:24px; background:#e6edf3; margin:0 6px; border-radius:2px; }

/* keys palette */
.wpchords-keys { margin-left: auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.wpchords-key {
  padding:6px 8px;
  border-radius:6px;
  background:#f1f5f9;
  border:1px solid #dbe7f5;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.wpchords-key.original { color:#b91c1c; background:#fff5f5; border-color:#fbcaca; }
.wpchords-key.other { color:#1e3a8a; background:#eef6ff; border-color:#cfe0ff; }
.wpchords-key.active { box-shadow: 0 6px 18px rgba(14,165,233,0.12); }

/* Content - keep native p and br */
.wpchords-content p { margin: 0 0 0.8rem 0; }
.wpchords-content br { display:block; height:0.6rem; }

/* Line container for each verse */
.wpchords-line { display:block; white-space:nowrap; margin-bottom:0.1rem; }

/* Chords above lyrics centered on each word using inline-blocks */
.wpchords-chunk {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-right: 0.25ch;
  /* make sure word wrapping respects chunks */
}
.wpchords-chord {
  display: block;
  font-weight: 700;
  font-size: var(--wc-chord-font);
  color: #b91c1c;
  background: #fff;
  border: 1px solid #ef4444;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
}
.wpchords-chord.blue { color:#1e3a8a; border-color:#60a5fa; background:#f0f8ff; }

.wpchords-lyric {
  display: block;
  padding-top: 0.18rem;
  white-space: pre-wrap;
  font-weight: 500;
}

/* small screens */
@media (max-width:520px) {
  .wpchords-toolbar { gap:8px; padding:6px; }
  .wpchords-btn { width:36px; height:36px; }
  .wpchords-key { padding:5px 7px; font-size:12px; }
}