.wpchords-notation-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px 10px;
  background: #f6f4ef;
  border: 1px solid #e2ddd0;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.wpchords-notation-label {
  font-weight: 600;
  color: #5b4636;
  margin-right: 4px;
}

.wpchords-notation-btn {
  border: 1px solid #cbbfa4;
  background: #fff;
  color: #5b4636;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wpchords-notation-btn:hover {
  background: #f0ead9;
}

.wpchords-notation-btn.active {
  background: #8a5a2b;
  border-color: #8a5a2b;
  color: #fff;
}

.wpchords-swara .chordBlock {
  background: transparent;
  color: #1a1300;
  font-weight: 700;
  letter-spacing: 0;
  border: none;
  border-radius: 0;
  outline: none;
  /* Was a fixed px value taken straight from --cswaras-chip-size, which
     never responds to the A+/A- font-size buttons (those only scale the
     .wp-chords wrapper's own font-size via a runtime %, which the lyric
     text inherits normally). Express the chip size as an em relative to
     the inherited size instead, so it scales right along with A+/A-.
     The inherited size here is .chordHold's 80% (see base plugin CSS),
     so multiply by 1.25 (1/0.8) to cancel that out and land back on the
     configured --cswaras-chip-size at the default zoom level.
     --cswaras-chip-ratio (chip_size / 17, set server-side in init.php)
     folds in the admin's custom chip-size setting. It has to be a plain
     number, not a length: calc() can't divide one length by another
     (px / px is invalid CSS and gets the whole declaration dropped by
     the browser), which is what silently broke this the first time. */
  font-size: calc(var(--cswaras-chip-ratio, 1) * 1.25em);
  line-height: 1.4;
  padding: 0;
  box-shadow: none;
  top: -1.6em;
  white-space: nowrap;
}

/* .chordHold's own "top"/"margin-bottom" (set by the base plugin CSS)
   reserve vertical space sized for the DEFAULT chord badge, which sits
   at top:-2.5em. The swara/solfège badge above sits closer in, at
   top:-1.6em (0.9em less). Left uncorrected, .chordHold still reserves
   the bigger gap, so the swara/lyric rows end up pulled apart. Shrink
   the reserved space by that same 0.9em so the swara row sits snug
   against its lyric line instead of floating above it. */
.wpchords-swara .chordHold {
  top: 1.6em;
  margin-bottom: 0.5em;
}

.chordHold {
  border: none;
  outline: none;
}

/* NOTE: there used to be a margin-right here intended to stop adjacent
   swara chips from touching. It didn't actually do that - each chip is
   absolutely positioned relative to its OWN zero-width .chordHold
   anchor, so a margin on that anchor can't move a neighbouring chip
   closer or further away. All it did was push every character of real
   lyric text that follows a swara a few px to the right, which is
   exactly what put every single swara chip visibly to the left of the
   syllable it's meant to sit above. Removed so the chip's left edge
   lands exactly on the character it's anchored to, with zero offset.
   If two swara codes really are typed with too little lyric text/space
   between them, add more spacing in the lyrics themselves (or rely on
   the auto-inserted spacer for back-to-back "][" brackets) rather than
   forcing a gap here, since that gap review breaks the alignment for
   every other pair on the line. */

/* Base look-and-feel for the lyric text under the chips: clean, bold,
   readable, with just enough line spacing that each swara/lyric pair
   is clear of the row above and below without feeling loose. Anything
   typed into "Lyrics Line Style" in Formatting Options loads after
   this and will override it. */
.wpChordsBody {
  font-size: 17px;
  font-weight: 700;
  line-height: 2.2;
  color: #1a1a1a;
  letter-spacing: 0;
}

.wpChordsBody br {
  content: "";
  display: block;
  margin-top: 0.3em;
}

/* Harmonica tab numbers rendered as swaras: same look as regular
   swara chips, no colored accent border (kept flat/plain per the
   site's preferred style). Hover still shows "Blow/Draw N (Note)". */
.wpchords-harmonica .chordBlock {
  cursor: help;
}

/* Front-end "type your own lyrics" tool ([swaras_tool] shortcode) */
.cswaras-tool {
  max-width: 720px;
  margin: 0 0 24px;
}

.cswaras-tool-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #5b4636;
  margin-bottom: 6px;
}

.cswaras-tool-input {
  width: 100%;
  box-sizing: border-box;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid #cbbfa4;
  border-radius: 8px;
  background: #fffdf8;
  resize: vertical;
}

.cswaras-tool-hint {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: #a89684;
  font-style: italic;
}

.cswaras-tool-result {
  padding: 14px 16px;
  border: 1px solid #e2ddd0;
  border-radius: 8px;
  background: #f6f4ef;
  font-size: 130%;
  min-height: 2.5em;
}