/**
 * chord-popup.css - Hosanna
 * Styles du popup d'affichage des diagrammes d'accord (guitare / piano)
 * et du span .chord-token inséré par rendering.js
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * Span chord-token dans chRowMono
 * Important : display inline, pas de margin/padding qui briserait l'alignement
 * white-space:pre est hérité du parent .chRowMono — ne pas modifier
 * ───────────────────────────────────────────────────────────────────────────── */
.chord-token {
  display: inline;
  cursor: default;
  border-radius: 2px;
  transition: background var(--transition-fast);
}

.chord-token:hover {
  background: color-mix(in oklab, var(--chord-color, currentColor) 12%, transparent 88%);
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Popup principal
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup {
  position: fixed;
  z-index: 9999;
  display: none; /* géré par JS */

  background: Canvas;
  color: CanvasText;
  border: 1px solid color-mix(in oklab, CanvasText 15%, Canvas 85%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  padding: 6px 8px;
  min-width: 100px;
  /* max-width s'adapte dynamiquement à la taille choisie : 3 formes + gaps + padding */
  max-width: calc(var(--hs-chord-size, 110px) * 3 + 28px);
  max-height: 92vh;
  overflow-y: auto;

  user-select: none;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Référence fichier source (debug, en très petit sous le titre)
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__fileref {
  font-family: monospace;
  font-size: 0.68rem;
  color: color-mix(in oklab, CanvasText 35%, Canvas 65%);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 0;
}
.hs-chord-popup__title {
  font-family: var(--font-system);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Grille horizontale des formes guitare
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__guitar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Conteneur d'une forme guitare
 * Le SVG a width:100% — fixer la largeur ici contrôle tout le rendu.
 * La variable --hs-chord-size est injectée par JS depuis le slider de réglages.
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__guitar-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--hs-chord-size, 110px);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Conteneur piano — proportionnel à la taille choisie
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__piano {
  width: calc(var(--hs-chord-size, 110px) * 2.8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Label de forme (ex: "Forme ouverte", "Barré V")
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__shape-label {
  font-family: var(--font-system);
  font-size: 0.75rem;
  color: color-mix(in oklab, CanvasText 60%, Canvas 40%);
  margin-bottom: 3px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Indicateur "N autres formes"
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__more {
  font-family: var(--font-system);
  font-size: 0.75rem;
  color: color-mix(in oklab, CanvasText 45%, Canvas 55%);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Message accord non reconnu
 * ───────────────────────────────────────────────────────────────────────────── */
.hs-chord-popup__miss {
  font-family: var(--font-system);
  font-size: 0.78rem;
  color: color-mix(in oklab, CanvasText 50%, Canvas 50%);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}

/* Petits écrans : éviter tout débordement horizontal du popup */
@media (max-width: 480px) {
  .hs-chord-popup {
    max-width: calc(100vw - 20px);
  }
}