/**
 * Brand Bridge B2 — Chord single (isolated from notation)
 */

body.kp-bb-chord {
  --bb-bg: #f8fcff;
  --bb-surface: #ffffff;
  --bb-surface-2: #eef6ff;
  --bb-text: #0f172a;
  --bb-muted: #64748b;
  --bb-border: #d4e5f7;
  --bb-accent: #e30613;
  --bb-accent-hover: #b8050f;
  --bb-link: #0059a8;
  --bb-kind: #0059a8;
  --bb-kind-hover: #00407a;
  --bb-kind-soft: #e8f1fb;
  --bb-kind-ink: #0b1220;
  --bb-chart-bg: #f4f7fb;
  --bb-chart-edge: #c5d4e8;
  --bb-chart-ink: #0f172a;
  --bb-radius: 0.75rem;
  --bb-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-chart-font: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
  background: var(--bb-bg) !important;
  color: var(--bb-text);
  font-family: var(--bb-font);
}

html[data-theme="dark"] body.kp-bb-chord {
  --bb-bg: #0f172a;
  --bb-surface: #1e293b;
  --bb-surface-2: #334155;
  --bb-text: #f8fafc;
  --bb-muted: #94a3b8;
  --bb-border: #334155;
  --bb-accent: #ff4d4d;
  --bb-accent-hover: #e30613;
  --bb-link: #93c5fd;
  --bb-kind: #93c5fd;
  --bb-kind-hover: #bfdbfe;
  --bb-kind-soft: rgba(147, 197, 253, 0.14);
  --bb-kind-ink: #0b1220;
  --bb-chart-bg: #121a29;
  --bb-chart-edge: #2a3a52;
  --bb-chart-ink: #e2e8f0;
}

body.kp-bb-chord,
body.kp-bb-chord #page,
body.kp-bb-chord .site,
body.kp-bb-chord .site-content,
body.kp-bb-chord #content,
body.kp-bb-chord .content-area,
body.kp-bb-chord .inside-article,
body.kp-bb-chord .one-container .site-content,
body.kp-bb-chord .separate-containers .inside-article {
  background: var(--bb-bg) !important;
  color: var(--bb-text);
}

body.kp-bb-chord .entry-meta,
body.kp-bb-chord .posted-on,
body.kp-bb-chord .hrCustom,
body.kp-bb-chord .kp-inline-top-cta,
body.kp-bb-chord .kp-app-promo-card,
body.kp-bb-chord #right-sidebar {
  display: none !important;
}

/* —— Layout —— */
.kp-chord-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 960px) {
  .kp-chord-layout {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    align-items: start;
    gap: 1.75rem;
  }
}

.kp-chord-main {
  min-width: 0;
}

/* —— Hero (stacked band, not song sheet card) —— */
.kp-chord-header {
  margin: 0 0 1.15rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.kp-chord-hero {
  padding: 1.25rem 0 1.15rem;
  border-bottom: 2px solid var(--bb-kind);
  background: transparent;
}

.kp-chord-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.55rem;
}

.kp-chord-hero__kind {
  margin: 0 !important;
  font-family: var(--bb-font) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-kind) !important;
}

.kp-chord-hero__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  background: var(--bb-kind);
  color: #fff;
  font-family: var(--bb-font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-theme="dark"] .kp-chord-hero__badge {
  color: var(--bb-kind-ink);
}

.kp-chord-hero .entry-title,
.kp-chord-header .entry-title,
body.kp-bb-chord .kp-chord-hero .entry-title {
  margin: 0 0 0.55rem !important;
  font-family: var(--bb-font) !important;
  font-size: clamp(1.65rem, 3.2vw, 2.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1.12 !important;
  color: var(--bb-text, #0f172a) !important;
  max-width: 40rem;
}

html[data-theme="dark"] body.kp-bb-chord .kp-chord-hero .entry-title {
  color: #f8fafc !important;
}

.kp-chord-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
}

.kp-chord-hero__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.4rem;
  background: var(--bb-surface, #fff);
  color: var(--bb-text, #0f172a) !important;
  font-family: var(--bb-font);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none !important;
}

html[data-theme="dark"] .kp-chord-hero__chip {
  background: #334155 !important;
  border-color: #64748b !important;
  color: #f8fafc !important;
}

a.kp-chord-hero__chip:hover {
  border-color: var(--bb-kind);
  color: var(--bb-kind) !important;
}

.kp-chord-hero__byline {
  margin: 0 0 0.85rem !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bb-muted, #64748b) !important;
}

.kp-chord-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.kp-chord-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.45rem 1.1rem;
  border-radius: 0.55rem;
  background: var(--bb-kind) !important;
  color: #fff !important;
  font-family: var(--bb-font);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none !important;
}

html[data-theme="dark"] .kp-chord-hero__cta {
  color: var(--bb-kind-ink) !important;
}

.kp-chord-hero__cta:hover {
  background: var(--bb-kind-hover) !important;
  color: #fff !important;
}

html[data-theme="dark"] .kp-chord-hero__cta:hover {
  color: var(--bb-kind-ink) !important;
}

.kp-chord-hero__link,
.kp-chord-hero__secondary,
a.kp-chord-hero__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.55rem;
  background: transparent !important;
  color: var(--bb-kind) !important;
  font-family: var(--bb-font);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none !important;
}

.kp-chord-hero__link:hover,
.kp-chord-hero__secondary:hover,
a.kp-chord-hero__secondary:hover {
  border-color: var(--bb-kind);
  background: var(--bb-kind-soft) !important;
}

.kp-chord-hero__cross {
  margin: 0.85rem 0 0 !important;
  font-size: 0.88rem;
  font-weight: 600;
}

.kp-chord-hero__cross a {
  color: var(--bb-accent, #e30613) !important;
  text-decoration: none !important;
}

.kp-chord-hero__cross a:hover {
  color: var(--bb-accent-hover, #b8050f) !important;
  text-decoration: underline !important;
}

/* —— Banner —— */
.kp-chord-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bb-kind) 35%, var(--bb-border, #d4e5f7));
  border-left: 4px solid var(--bb-kind);
  border-radius: 0.65rem;
  background: var(--bb-kind-soft);
}

.kp-chord-banner__icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bb-kind);
}

.kp-chord-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--bb-font);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--bb-muted, #64748b);
}

.kp-chord-banner__text strong {
  color: var(--bb-kind);
  font-weight: 800;
}

/* —— Chart panel (monospace density — not letter-note sheet) —— */
.kp-chord-chart {
  margin: 0 0 1.15rem;
  border: 1px solid var(--bb-chart-edge);
  border-radius: 0.75rem;
  background: var(--bb-chart-bg);
  /* overflow visible so toolbar stays above the scrollable body (not covering lines) */
  overflow: visible;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.kp-chord-chart__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bb-chart-edge);
  border-radius: 0.75rem 0.75rem 0 0;
  background: color-mix(in srgb, var(--bb-kind) 12%, var(--bb-chart-bg));
}

.kp-chord-chart__title {
  margin: 0 !important;
  font-family: var(--bb-font) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-kind) !important;
}

.kp-chord-chart__hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bb-muted, #64748b);
}

/* Unique-chord piano diagram strip */
.kp-chord-diagrams {
  padding: 0.75rem 1rem 0.85rem;
  border-bottom: 1px solid var(--bb-chart-edge);
  background: color-mix(in srgb, var(--bb-chart-bg) 88%, var(--bb-kind));
}

.kp-chord-diagrams__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.kp-chord-diagrams__label {
  margin: 0 !important;
  font-family: var(--bb-font) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-kind) !important;
}

.kp-chord-diagrams.is-collapsed .kp-chord-diagrams__row {
  display: none;
}

.kp-chord-diagrams__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  -webkit-overflow-scrolling: touch;
}

.kp-chord-diagram {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 0.4rem 0.4rem;
  border: 1px solid var(--bb-chart-edge);
  border-radius: 0.45rem;
  background: var(--bb-chart-surface, var(--bb-surface));
  text-align: center;
  min-width: 4.25rem;
  cursor: pointer;
}

.kp-chord-diagram:hover,
.kp-chord-diagram:focus-visible {
  border-color: var(--bb-accent);
  outline: 2px solid color-mix(in srgb, var(--bb-accent) 35%, transparent);
  outline-offset: 1px;
}

.kp-chord-diagram__name {
  margin: 0 0 0.3rem;
  font-family: var(--bb-font);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--bb-accent);
  line-height: 1.2;
}

.kp-chord-piano {
  display: block;
  margin: 0 auto;
}

.kp-chord-piano__key--white {
  fill: var(--bb-piano-white, #f8fafc);
  stroke: var(--bb-piano-edge, #94a3b8);
  stroke-width: 0.6;
}

.kp-chord-piano__key--black {
  fill: var(--bb-piano-black, #1e293b);
  stroke: var(--bb-piano-black-edge, #0f172a);
  stroke-width: 0.4;
}

.kp-chord-piano__key--white.is-on {
  fill: color-mix(in srgb, var(--bb-kind) 55%, var(--bb-piano-white, #fff));
  stroke: var(--bb-kind);
}

.kp-chord-piano__key--black.is-on {
  fill: var(--bb-accent);
  stroke: var(--bb-accent-hover);
}

/* Enlarge chord lightbox */
.kp-chord-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.55);
}

.kp-chord-lightbox[hidden] {
  display: none !important;
}

.kp-chord-lightbox__dialog {
  position: relative;
  width: min(22rem, 100%);
  padding: 1.25rem 1.15rem 1.35rem;
  border-radius: 0.85rem;
  border: 1px solid var(--bb-border, #d4e5f7);
  background: var(--bb-surface, #fff);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  text-align: center;
}

html[data-theme="dark"] .kp-chord-lightbox__dialog {
  background: var(--bb-surface, #1e293b);
  border-color: var(--bb-border, #334155);
}

.kp-chord-lightbox__close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--bb-muted, #64748b);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.kp-chord-lightbox__close:hover {
  color: var(--bb-accent, #e30613);
}

.kp-chord-lightbox__name {
  margin: 0 0 0.85rem !important;
  font-family: var(--bb-font) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--bb-text, #0f172a) !important;
}

html[data-theme="dark"] .kp-chord-lightbox__name {
  color: #f8fafc !important;
}

.kp-chord-lightbox__piano .kp-chord-piano--lg {
  width: 100%;
  max-width: 16rem;
  height: auto;
  margin: 0 auto;
}

body.kp-chord-lightbox-open {
  overflow: hidden;
}

.kp-chord-chart__body {
  --kp-chord-fs: 0.92rem;
  max-height: min(70vh, 42rem);
  padding: 1.1rem 1.15rem 1.35rem;
  color: var(--bb-chart-ink) !important;
  font-family: var(--bb-chart-font) !important;
  font-size: var(--kp-chord-fs) !important;
  font-weight: 500;
  line-height: 1.55 !important;
  letter-spacing: 0.01em;
  overflow: auto;
  tab-size: 4;
  border-radius: 0 0 0.75rem 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.kp-chord-chart__lines {
  margin: 0;
}

.kp-chord-pair {
  margin: 0 0 0.55rem;
}

.kp-chord-pair .kp-chord-line--chords {
  margin-bottom: 0;
}

.kp-chord-pair .kp-chord-line--lyrics {
  margin-bottom: 0;
}

.kp-chord-pair--lyrics-first .kp-chord-line--chords {
  margin-top: 0.1rem;
  opacity: 0.95;
}

.kp-chord-line {
  margin: 0;
  font-family: var(--bb-chart-font) !important;
  font-size: inherit;
  color: var(--bb-chart-ink) !important;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

.kp-chord-line--blank {
  min-height: 0.65em;
  white-space: pre;
}

.kp-chord-line--section {
  margin: 0.85rem 0 0.35rem;
  font-family: var(--bb-font) !important;
  font-size: 0.85em !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-kind) !important;
  white-space: normal;
}

.kp-chord-line--section:first-child {
  margin-top: 0;
}

.kp-chord-line--chords {
  line-height: 1.35 !important;
  min-height: 1.35em;
}

.kp-chord-line--lyrics {
  margin-bottom: 0.15rem;
  white-space: pre-wrap;
}

.kp-chord-sym {
  font-weight: 700 !important;
  color: var(--bb-accent, #e30613) !important;
}

.kp-chord-sym--inline {
  display: inline;
  margin: 0 0.1em;
  padding: 0 0.15em;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--bb-accent, #e30613) 10%, transparent);
}

/* Chart themes — each has light + dark site-mode variants */
.kp-chord-chart[data-kp-chord-theme="paper"] {
  --bb-chart-bg: #f4f7fb;
  --bb-chart-edge: #c5d4e8;
  --bb-chart-ink: #0f172a;
  --bb-chart-surface: #ffffff;
  --bb-kind: #0059a8;
  --bb-accent: #e30613;
  --bb-accent-hover: #b8050f;
  --bb-piano-white: #f8fafc;
  --bb-piano-black: #1e293b;
  --bb-piano-edge: #94a3b8;
}

html[data-theme="dark"] .kp-chord-chart[data-kp-chord-theme="paper"] {
  --bb-chart-bg: #121a29;
  --bb-chart-edge: #2a3a52;
  --bb-chart-ink: #e2e8f0;
  --bb-chart-surface: #1e293b;
  --bb-kind: #93c5fd;
  --bb-accent: #ff4d4d;
  --bb-accent-hover: #e30613;
  --bb-piano-white: #e2e8f0;
  --bb-piano-black: #0f172a;
  --bb-piano-edge: #64748b;
}

.kp-chord-chart[data-kp-chord-theme="stage"] {
  --bb-chart-bg: #141a22;
  --bb-chart-edge: #2a3544;
  --bb-chart-ink: #e8eef6;
  --bb-chart-surface: #1c2430;
  --bb-kind: #7dd3fc;
  --bb-accent: #fbbf24;
  --bb-accent-hover: #f59e0b;
  --bb-piano-white: #e2e8f0;
  --bb-piano-black: #0b1220;
  --bb-piano-edge: #64748b;
}

html[data-theme="dark"] .kp-chord-chart[data-kp-chord-theme="stage"] {
  --bb-chart-bg: #0b1016;
  --bb-chart-edge: #243041;
  --bb-chart-ink: #f1f5f9;
  --bb-chart-surface: #151c26;
  --bb-kind: #7dd3fc;
  --bb-accent: #fcd34d;
  --bb-accent-hover: #fbbf24;
}

/* Stage stays dark-leaning even on light site — keep readable chrome */
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-diagrams {
  background: #151c24;
  border-color: var(--bb-chart-edge);
  color: var(--bb-chart-ink);
}

.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__btn {
  background: var(--bb-chart-surface) !important;
  background-color: var(--bb-chart-surface) !important;
  color: var(--bb-chart-ink) !important;
  border-color: #3a4658 !important;
}

.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__btn:hover,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__btn:focus-visible {
  color: var(--bb-accent) !important;
  border-color: var(--bb-accent) !important;
}

.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__meter,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-chart__title,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-line--section,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-diagrams__label {
  color: var(--bb-kind) !important;
}

.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__label,
.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-chart__hint {
  color: #94a3b8 !important;
}

.kp-chord-chart[data-kp-chord-theme="stage"] .kp-chord-toolbar__select {
  background: var(--bb-chart-surface) !important;
  color: var(--bb-chart-ink) !important;
  border-color: #3a4658 !important;
}

.kp-chord-chart[data-kp-chord-theme="amber"] {
  --bb-chart-bg: #fff8eb;
  --bb-chart-edge: #e8d4a8;
  --bb-chart-ink: #3b2f1a;
  --bb-chart-surface: #fffdf7;
  --bb-kind: #b45309;
  --bb-accent: #c2410c;
  --bb-accent-hover: #9a3412;
  --bb-piano-white: #fffbeb;
  --bb-piano-black: #292524;
  --bb-piano-edge: #a8a29e;
}

html[data-theme="dark"] .kp-chord-chart[data-kp-chord-theme="amber"] {
  --bb-chart-bg: #1c150c;
  --bb-chart-edge: #5c4a2e;
  --bb-chart-ink: #fde68a;
  --bb-chart-surface: #2a2114;
  --bb-kind: #fbbf24;
  --bb-accent: #fb923c;
  --bb-accent-hover: #f97316;
  --bb-piano-white: #fef3c7;
  --bb-piano-black: #1c1917;
  --bb-piano-edge: #78716c;
}

.kp-chord-chart[data-kp-chord-theme="amber"] .kp-chord-toolbar,
.kp-chord-chart[data-kp-chord-theme="amber"] .kp-chord-diagrams {
  background: color-mix(in srgb, var(--bb-chart-bg) 82%, var(--bb-kind));
  border-color: var(--bb-chart-edge);
}

.kp-chord-chart[data-kp-chord-theme="slate"] {
  --bb-chart-bg: #eef2f6;
  --bb-chart-edge: #c0cbd8;
  --bb-chart-ink: #1e293b;
  --bb-chart-surface: #ffffff;
  --bb-kind: #334155;
  --bb-accent: #0f766e;
  --bb-accent-hover: #0d9488;
  --bb-piano-white: #f8fafc;
  --bb-piano-black: #1e293b;
  --bb-piano-edge: #94a3b8;
}

html[data-theme="dark"] .kp-chord-chart[data-kp-chord-theme="slate"] {
  --bb-chart-bg: #111827;
  --bb-chart-edge: #374151;
  --bb-chart-ink: #e5e7eb;
  --bb-chart-surface: #1f2937;
  --bb-kind: #94a3b8;
  --bb-accent: #2dd4bf;
  --bb-accent-hover: #14b8a6;
  --bb-piano-white: #e5e7eb;
  --bb-piano-black: #0f172a;
  --bb-piano-edge: #6b7280;
}

.kp-chord-chart[data-kp-chord-theme="slate"] .kp-chord-toolbar,
.kp-chord-chart[data-kp-chord-theme="slate"] .kp-chord-diagrams {
  background: color-mix(in srgb, var(--bb-chart-bg) 86%, var(--bb-kind));
  border-color: var(--bb-chart-edge);
}

.kp-chord-chart .kp-chord-diagram {
  background: var(--bb-chart-surface);
  border-color: var(--bb-chart-edge);
}

.kp-chord-chart .kp-chord-line,
.kp-chord-chart .kp-chord-chart__body {
  color: var(--bb-chart-ink) !important;
}

.kp-chord-chart .kp-chord-sym {
  color: var(--bb-accent) !important;
}

/* Practice toolbar — fixed above scrollable chart body (does not cover lines) */
.kp-chord-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--bb-chart-edge);
  background: color-mix(in srgb, var(--bb-chart-bg) 92%, var(--bb-kind));
}

.kp-chord-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.kp-chord-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--bb-chart-edge) !important;
  border-radius: 0.4rem;
  background: var(--bb-surface) !important;
  background-color: var(--bb-surface) !important;
  color: var(--bb-text) !important;
  font-family: var(--bb-font);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
}

.kp-chord-toolbar__btn:hover,
.kp-chord-toolbar__btn:focus,
.kp-chord-toolbar__btn:focus-visible,
.kp-chord-toolbar__btn:active {
  /* Kill GeneratePress --accent-hover pink (#FC5185) and style.css .button orange */
  background: var(--bb-surface) !important;
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-accent) !important;
  color: var(--bb-accent) !important;
  box-shadow: none !important;
}

.kp-chord-toolbar__btn.is-active,
.kp-chord-toolbar__btn[aria-pressed="true"] {
  background: var(--bb-accent) !important;
  background-color: var(--bb-accent) !important;
  border-color: var(--bb-accent) !important;
  color: #fff !important;
}

.kp-chord-toolbar__btn.is-active:hover,
.kp-chord-toolbar__btn[aria-pressed="true"]:hover {
  background: var(--bb-accent-hover) !important;
  background-color: var(--bb-accent-hover) !important;
  border-color: var(--bb-accent-hover) !important;
  color: #fff !important;
}

.kp-chord-toolbar__btn--wide {
  min-width: auto;
  padding-inline: 0.65rem;
}

.kp-chord-toolbar__meter {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--bb-font);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--bb-text, #0f172a);
}

html[data-theme="dark"] .kp-chord-toolbar__meter {
  color: #f8fafc;
}

.kp-chord-toolbar__label {
  margin-left: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bb-muted, #64748b);
}

.kp-chord-toolbar__range {
  width: 4.5rem;
  accent-color: var(--bb-accent, #e30613);
}

.kp-chord-toolbar__select {
  min-height: 2rem;
  max-width: 7.5rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--bb-chart-edge);
  border-radius: 0.4rem;
  background: var(--bb-surface, #fff);
  color: var(--bb-text, #0f172a);
  font-family: var(--bb-font);
  font-size: 0.8rem;
  font-weight: 600;
}

html[data-theme="dark"] .kp-chord-toolbar__select {
  background: var(--bb-surface, #151d2e);
  color: #f8fafc;
  border-color: var(--bb-border, #2a364a);
}

/* Intro — shared Read more wrap */
.kp-chord-intro-wrap {
  margin: 0 0 1rem;
}

body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__body,
body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__body p {
  font-family: var(--bb-font) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--bb-muted, #64748b) !important;
  font-weight: 500 !important;
}

body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__body h3 {
  margin: 0 0 0.45rem !important;
  font-family: var(--bb-font) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--bb-text, #0f172a) !important;
}

body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__body a {
  color: var(--bb-accent, #e30613) !important;
  font-weight: 700;
}

body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__more {
  color: var(--bb-accent, #e30613) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--bb-font) !important;
  font-weight: 700 !important;
  padding: 0 !important;
  cursor: pointer;
}

body.kp-bb-chord .kp-chord-intro-wrap .kp-bb-intro__more:hover {
  color: var(--bb-accent-hover, #b8050f) !important;
}

/* —— Extra stacked sections —— */
.kp-chord-extra {
  margin: 0 0 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.65rem;
  background: var(--bb-surface, #fff);
}

html[data-theme="dark"] .kp-chord-extra {
  background: var(--bb-surface, #151d2e);
  border-color: var(--bb-border, #2a364a);
}

.kp-chord-extra__title {
  margin: 0 0 0.65rem !important;
  font-family: var(--bb-font) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--bb-text, #0f172a) !important;
}

/* —— CTA —— */
.kp-chord-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
}

.kp-chord-cta__btn,
a.kp-chord-cta__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem !important;
  border-radius: 0.55rem !important;
  background: var(--bb-kind) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--bb-font) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .kp-chord-cta__btn,
html[data-theme="dark"] a.kp-chord-cta__btn {
  color: var(--bb-kind-ink) !important;
}

.kp-chord-cta__btn:hover,
a.kp-chord-cta__btn:hover {
  background: var(--bb-kind-hover) !important;
  color: #fff !important;
}

html[data-theme="dark"] .kp-chord-cta__btn:hover,
html[data-theme="dark"] a.kp-chord-cta__btn:hover {
  color: var(--bb-kind-ink) !important;
}

.kp-chord-cta__alt {
  color: var(--bb-accent, #e30613) !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none !important;
}

.kp-chord-cta__alt:hover {
  color: var(--bb-accent-hover, #b8050f) !important;
  text-decoration: underline !important;
}

/* —— Rail —— */
.kp-chord-rail {
  position: sticky;
  top: calc(var(--kp-site-nav-h, 72px) + 0.75rem);
}

.kp-chord-rail__card {
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.75rem;
  background: var(--bb-surface, #fff);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] .kp-chord-rail__card {
  background: var(--bb-surface, #151d2e);
  border-color: var(--bb-border, #2a364a);
}

.kp-chord-cover--rail {
  margin: 0;
  border-bottom: 1px solid var(--bb-border, #d4e5f7);
}

.kp-chord-cover__img {
  display: block;
  width: 100%;
  height: auto;
}

.kp-chord-cover--thumb {
  margin: 0;
  max-width: 7.5rem;
  border-radius: 0.55rem;
  overflow: hidden;
  border: 1px solid var(--bb-border, #d4e5f7);
}

.kp-chord-info-card {
  padding: 1rem 1.05rem 1.1rem;
}

.kp-chord-info-card__title {
  margin: 0 0 0.75rem !important;
  font-family: var(--bb-font) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bb-kind) !important;
}

/* Info table — chord-owned styles (no brand-bridge-song.css) */
.kp-chord-info-table,
body.kp-bb-chord .kp-chord-info-table.customTableCard {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.kp-chord-info-table th,
.kp-chord-info-table td {
  padding: 0.5rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bb-border, #d4e5f7) !important;
  text-align: left;
  vertical-align: top;
  font-size: 0.88rem !important;
  background: transparent !important;
  color: var(--bb-text, #0f172a) !important;
}

.kp-chord-info-table th {
  width: 7.25rem !important;
  min-width: 7.25rem !important;
  max-width: 40% !important;
  padding-right: 0.85rem !important;
  white-space: nowrap;
  color: var(--bb-muted, #64748b) !important;
  font-weight: 600 !important;
  font-family: var(--bb-font);
}

.kp-chord-info-table td {
  width: auto !important;
  padding-left: 0.25rem !important;
  word-break: break-word;
}

.kp-chord-info-table td,
.kp-chord-info-table td a,
.kp-chord-info-table a.link_custom,
.kp-chord-info-card a.link_custom {
  color: var(--bb-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.kp-chord-info-table a:hover,
.kp-chord-info-card a.link_custom:hover {
  color: var(--bb-accent, #e30613) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.kp-chord-info-table tr:last-child th,
.kp-chord-info-table tr:last-child td {
  border-bottom: 0 !important;
}

html[data-theme="dark"] .kp-chord-info-table td,
html[data-theme="dark"] .kp-chord-info-table td a,
html[data-theme="dark"] .kp-chord-info-card a.link_custom {
  color: #f8fafc !important;
}

.kp-chord-rail__notation {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0.85rem 1.05rem 1rem;
  border-top: 1px solid var(--bb-border, #d4e5f7);
  background: color-mix(in srgb, var(--bb-accent, #e30613) 6%, transparent);
  text-decoration: none !important;
}

.kp-chord-rail__notation-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-muted, #64748b);
}

.kp-chord-rail__notation-cta {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--bb-accent, #e30613) !important;
}

.kp-chord-rail__notation:hover .kp-chord-rail__notation-cta {
  color: var(--bb-accent-hover, #b8050f) !important;
}

/* —— Mobile meta —— */
.kp-chord-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
}

@media (min-width: 960px) {
  .kp-chord-mobile-meta {
    display: none;
  }
}

.kp-chord-info-mobile {
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.65rem;
  background: var(--bb-surface, #fff);
  padding: 0.35rem 0.85rem 0.85rem;
}

.kp-chord-info-mobile summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--bb-kind);
  padding: 0.55rem 0;
}

/* —— Related / share / video —— */
.kp-chord-related,
.kp-chord-share,
.kp-chord-video {
  margin: 0 0 1.25rem;
}

/* Tabbed related practice (chords + notation) */
.kp-related-practice {
  margin: 0;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-border, #d4e5f7);
  border-radius: 0.65rem;
  overflow: hidden;
}

html[data-theme="dark"] .kp-related-practice {
  background: var(--bb-surface, #151d2e);
  border-color: var(--bb-border, #2a364a);
}

.kp-related-practice__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--bb-border, #d4e5f7);
  background: color-mix(in srgb, var(--bb-kind, #0059a8) 6%, transparent);
}

.kp-related-practice__tab {
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--bb-muted, #64748b);
  font-family: var(--bb-font);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kp-related-practice__tab.is-active,
.kp-related-practice__tab[aria-selected="true"] {
  color: var(--bb-text, #0f172a);
  border-bottom-color: var(--bb-accent, #e30613);
}

.kp-related-practice__tab:hover {
  color: var(--bb-accent, #e30613);
}

.kp-related-practice__panel {
  padding: 0.85rem 1.05rem 1.05rem;
}

.kp-related-practice__heading {
  margin: 0 0 0.75rem !important;
  font-family: var(--bb-font) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--bb-text, #0f172a) !important;
}

.kp-related-practice__heading a {
  color: inherit !important;
  text-decoration: none !important;
}

.kp-related-practice__heading a:hover {
  color: var(--bb-accent, #e30613) !important;
  text-decoration: underline !important;
}

.kp-related-practice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kp-related-practice__list a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.15rem;
  color: var(--bb-text) !important;
  font-family: var(--bb-font);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kp-related-practice__list a:hover,
body.kp-bb-chord .similar-lyrics li a:hover {
  /* Override legacy style.css lavender/pink (#f8f7ff / #ddd6fe) */
  color: var(--bb-accent) !important;
  background: color-mix(in srgb, var(--bb-accent) 8%, var(--bb-surface)) !important;
  border-color: var(--bb-border) !important;
}

body.kp-bb-chord .similar-lyrics,
body.kp-bb-chord .kp-related-practice.similar-lyrics {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius) !important;
  box-shadow: none !important;
}

body.kp-bb-chord .similar-lyrics li a {
  background: var(--bb-bg) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 0.5rem !important;
  color: var(--bb-text) !important;
  box-shadow: none !important;
}

body.kp-bb-chord .similar-lyrics h3,
body.kp-bb-chord .similar-lyrics .kp-related-practice__heading {
  background: transparent !important;
  background-image: none !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}

.kp-related-practice__list img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.35rem;
  flex-shrink: 0;
}

.kp-chord-faq {
  margin: 1rem 0 1.25rem;
}

.kp-chord-faq__title {
  margin: 0 0 0.75rem !important;
  font-family: var(--bb-font) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--bb-text, #0f172a) !important;
  letter-spacing: -0.02em;
}

.kp-chord-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kp-chord-faq__item {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius);
  padding: 0;
  overflow: hidden;
}

.kp-chord-faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  font-family: var(--bb-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bb-text) !important;
  background: transparent !important;
}

.kp-chord-faq__q:hover {
  color: var(--bb-accent) !important;
  background: transparent !important;
}

.kp-chord-faq__q::-webkit-details-marker {
  display: none;
}

.kp-chord-faq__q::after {
  content: "+";
  flex-shrink: 0;
  color: var(--bb-muted, #64748b);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.kp-chord-faq__item[open] > .kp-chord-faq__q {
  color: var(--bb-accent, #e30613);
}

.kp-chord-faq__item[open] > .kp-chord-faq__q::after {
  content: "−";
}

.kp-chord-faq__a {
  padding: 0 1rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bb-muted, #64748b);
}

.kp-chord-faq__a a {
  color: var(--bb-accent, #e30613);
}

body.kp-bb-chord .embed-container {
  margin-bottom: 0;
  border-radius: var(--bb-radius, 0.65rem);
  overflow: hidden;
  border: 1px solid var(--bb-border, #d4e5f7);
}

.kp-chord-video__title {
  margin: 0 0 0.65rem !important;
  font-family: var(--bb-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--bb-text, #0f172a) !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-chord-video__title {
  color: #f8fafc !important;
}

/* Banner + chips + FAQ + related — dark surfaces */
html[data-theme="dark"] body.kp-bb-chord .kp-chord-banner {
  background: var(--bb-kind-soft) !important;
  border-color: var(--bb-chart-edge) !important;
  color: var(--bb-text) !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-chord-banner__text,
html[data-theme="dark"] body.kp-bb-chord .kp-chord-banner__text strong {
  color: var(--bb-text) !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-chord-extra,
html[data-theme="dark"] body.kp-bb-chord .kp-chord-rail__card,
html[data-theme="dark"] body.kp-bb-chord .kp-chord-info-mobile,
html[data-theme="dark"] body.kp-bb-chord .kp-chord-faq__item,
html[data-theme="dark"] body.kp-bb-chord .kp-related-practice,
html[data-theme="dark"] body.kp-bb-chord .similar-lyrics {
  background: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
}

html[data-theme="dark"] body.kp-bb-chord .similar-lyrics li a,
html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__list a {
  background: var(--bb-bg) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
}

html[data-theme="dark"] body.kp-bb-chord .similar-lyrics li a:hover,
html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__list a:hover {
  background: color-mix(in srgb, var(--bb-accent) 14%, var(--bb-surface)) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-accent) !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__tab {
  color: var(--bb-muted) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__tab.is-active,
html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__tab[aria-selected="true"] {
  color: var(--bb-text) !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__tab:hover {
  color: var(--bb-accent) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.kp-bb-chord .kp-chord-faq__title,
html[data-theme="dark"] body.kp-bb-chord .kp-related-practice__heading,
html[data-theme="dark"] body.kp-bb-chord .similar-lyrics h3 {
  color: var(--bb-text) !important;
  background: transparent !important;
}

html[data-theme="dark"] body.kp-bb-chord a:hover:not(.kp-chord-hero__cta):not(.kp-chord-cta__btn):not(.kp-chord-toolbar__btn) {
  color: var(--bb-accent) !important;
}

/* Kill GP customizer pink / orange on chord controls */
body.kp-bb-chord .kp-related-practice__tab:hover,
body.kp-bb-chord .kp-related-practice__tab:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bb-accent) !important;
  box-shadow: none !important;
}

body.kp-bb-chord .kp-chord-toolbar__select:hover,
body.kp-bb-chord .kp-chord-toolbar__select:focus {
  border-color: var(--bb-accent) !important;
  outline-color: var(--bb-accent);
  box-shadow: none !important;
}

body.kp-bb-chord .kp-chord-toolbar__range {
  accent-color: var(--bb-accent) !important;
}

/* Chord archive (/chord/) — reuse category + movie list chrome */
body.kp-bb-chord-archive.kp-bb-category .page-header,
body.kp-bb-chord-archive.kp-bb-category #right-sidebar {
  display: none !important;
}

body.kp-bb-chord-archive .kp-chord-archive-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.kp-bb-chord-archive .kp-chord-archive-intro p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--bb-muted);
}

body.kp-bb-chord-archive .kp-movie__learn {
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
}

body.kp-bb-chord-archive .kp-movie__learn a {
  color: var(--bb-accent) !important;
  font-weight: 600;
  text-decoration: none !important;
}

body.kp-bb-chord-archive .kp-movie__learn a:hover {
  color: var(--bb-accent-hover) !important;
}