/* ═══════════════════════════════════════════════════════════════════
   Harpflow — estilos de la app.

   Toda regla arranca en `.hf-app` a propósito: matcha.css estila por
   elemento (section { display:flex }, p { margin }, h1–h6 { border-bottom },
   button { … }) y sin ese prefijo gana en silencio.

   La paleta sí respeta el tema claro/oscuro del sitio (a diferencia de
   cupping, que trae el suyo): esta app se mira fijo durante minutos mientras
   se toca, y forzar un fondo oscuro a quien eligió claro sería peor que en
   una pantalla que se abre y se cierra. Lo único que NO cambia con el tema es
   el escenario del canvas: las flechas necesitan fondo oscuro para que el
   ámbar y el azul se separen, y ese contraste no es negociable.

   Los dos colores que codifican la respiración —ámbar soplar, azul inhalar—
   son los mismos de todo el sitio (`--hf-blow` sale del sol de la marca,
   `--hf-draw` de `--accent`). El color dice una sola cosa en toda la app.
   ═══════════════════════════════════════════════════════════════════ */

.hf-app {
  --hf-blow: #f0a52b;
  --hf-draw: #4493f8;
  --hf-blow-ink: #8a5000;
  --hf-draw-ink: #0b3d7a;

  /* El escenario es oscuro siempre. Ver arriba. */
  --hf-stage-bg: #0f1219;
  --hf-lane: #161b25;
  --hf-lane-edge: #232b39;
  --hf-bar: #2b3444;
  --hf-comb: #29313f;
  --hf-comb-edge: #3d4757;
  --hf-hole: #0b0e14;
  --hf-ink: #e6edf3;
  --hf-ink-dim: #8b95a6;
  --hf-on-blow: #3b2a08;
  --hf-on-draw: #08213c;

  --hf-radius: 12px;
  --hf-gap: 1rem;

  max-width: 900px;
  margin: 0 auto;
  padding: 1rem .75rem 4rem;
}

/* Resets de matcha dentro de :where() — especificidad cero, así cualquier
   regla de clase de más abajo les gana. Sin esto, `.hf-app section` (0,1,1)
   le ganaría a `.hf-card` (0,1,0) y las tarjetas saldrían como columnas
   flex, que es exactamente lo que pasó la primera vez. */
.hf-app :where(section) { display: block; margin: 0; padding: 0; }
.hf-app :where(p) { margin: 0; max-width: none; hyphens: manual; }
.hf-app :where(h1, h2, h3) { border: 0; margin: 0; padding: 0; }
.hf-app :where(button) { font-family: inherit; cursor: pointer; }
.hf-app :where(input, select, textarea) { font-family: inherit; }
.hf-app :where(pre) { margin: 0; }
.hf-app :where(ul) { margin: 0; padding: 0; list-style: none; }
.hf-app :where(details) { margin: 0; }

.hf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────────── cabecera ───────────── */

.hf-head { padding: .25rem 0 1rem; }

.hf-title { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.hf-sub { color: var(--muted); margin-top: .35rem; }
.hf-muted { color: var(--muted); font-size: .9rem; }

/* ───────────── leyenda de la notación ───────────── */

.hf-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: var(--bg-muted);
  border: 1px solid var(--bg-muted);
  border-radius: var(--hf-radius);
}

.hf-legend-item { display: flex; align-items: center; gap: .7rem; }
.hf-legend-item strong { display: block; font-size: .95rem; }
.hf-legend-item span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hf-legend-note { padding-left: .2rem; }

.hf-glyph { width: 26px; height: 42px; flex: none; }
.hf-g-blow { fill: var(--hf-blow); }
.hf-g-draw { fill: var(--hf-draw); }
.hf-g-edge { stroke: var(--default); stroke-width: 3; }
.hf-g-slash { stroke: var(--bg-default); stroke-width: 3; }

/* ───────────── secciones y tarjetas ───────────── */

.hf-section { margin-bottom: 2rem; }

.hf-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.hf-section-head h2 { font-size: 1.15rem; font-weight: 650; }

.hf-card {
  background: var(--bg-muted);
  border: 1px solid var(--bg-muted);
  border-radius: var(--hf-radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.hf-card-title { font-size: 1.05rem; font-weight: 650; margin-bottom: .35rem; }

.hf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}

.hf-song-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: .6rem; margin: 0; padding: .85rem;
}
.hf-song-main { text-decoration: none; color: inherit; display: block; }
.hf-song-main h3 { font-size: 1rem; font-weight: 650; }
.hf-song-main:hover h3 { color: var(--accent); }
.hf-song-actions { display: flex; gap: .35rem; }

.hf-badges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.hf-badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 6px;
  font-size: .78rem; font-weight: 650;
  background: var(--hf-blow); color: var(--hf-blow-ink);
}
.hf-badge-soft { background: transparent; color: var(--muted); border: 1px solid var(--muted); }

.hf-empty, .hf-note {
  color: var(--muted); font-size: .88rem; line-height: 1.5;
  grid-column: 1 / -1;
}
.hf-note { margin-top: .75rem; }

/* ───────────── botones ───────────── */

.hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .45rem .8rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--bg-default);
  color: var(--default);
  font-size: .9rem; font-weight: 550;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.hf-btn:hover { border-color: var(--accent); color: var(--accent); }
.hf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-btn:disabled { opacity: .45; cursor: not-allowed; }
.hf-btn:disabled:hover { border-color: var(--muted); color: var(--default); }

.hf-btn-primary {
  background: var(--hf-blow); border-color: var(--hf-blow);
  color: var(--hf-blow-ink); font-weight: 650;
}
.hf-btn-primary:hover { background: var(--hf-blow); border-color: var(--hf-blow); color: var(--hf-blow-ink); filter: brightness(1.08); }
.hf-btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.hf-btn-small { padding: .3rem .55rem; font-size: .82rem; }
.hf-btn-wide { min-width: 8rem; }

/* ───────────── el escenario ───────────── */

.hf-play-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.hf-play-title { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.hf-play-meta { display: flex; gap: .5rem; flex-wrap: wrap; color: var(--muted); font-size: .88rem; margin-top: .25rem; }
.hf-play-meta span:not(:last-child)::after { content: ' ·'; }
.hf-play-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* El alto se fija en unidades de viewport para que la barra de transporte
   nunca quede fuera de pantalla: es el mismo problema que /shuffle resolvió
   con una container query, acá alcanza con reservar el resto. */
.hf-stage-wrap {
  height: min(62vh, 620px);
  min-height: 330px;
  border-radius: var(--hf-radius);
  overflow: hidden;
  background: var(--hf-stage-bg);
}
.hf-stage-edit { height: min(42vh, 380px); min-height: 260px; }
.hf-stage-wrap canvas { display: block; width: 100%; height: 100%; }

/* ───────────── transporte ───────────── */

.hf-transport {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .75rem 0;
}
.hf-scrub { flex: 1 1 180px; display: flex; }
.hf-scrub input { width: 100%; accent-color: var(--hf-blow); }
.hf-clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .88rem; }

.hf-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted); }
.hf-keys { color: var(--muted); font-size: .82rem; padding-bottom: .75rem; }

.hf-details { margin-top: .5rem; }
.hf-details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.hf-tab {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .95rem; line-height: 1.9; letter-spacing: .02em;
  white-space: pre-wrap; word-break: break-word;
  padding: .75rem; margin-top: .6rem;
  background: var(--bg-default);
  border: 1px solid var(--bg-muted);
  border-radius: 8px;
}

/* ───────────── formularios ───────────── */

.hf-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .7rem;
}
.hf-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.hf-field > span { font-size: .82rem; color: var(--muted); font-weight: 550; }
.hf-field input, .hf-field select, .hf-field textarea {
  padding: .45rem .55rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--bg-default);
  color: var(--default);
  font-size: .92rem;
  width: 100%;
}
.hf-field textarea { resize: vertical; }
.hf-field-inline { flex-direction: row; align-items: center; gap: .4rem; margin-bottom: 0; }
.hf-field-inline > span { white-space: nowrap; }

/* ───────────── herramientas del editor ───────────── */

.hf-tools {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 0;
}
.hf-tool-group { display: flex; align-items: center; gap: .35rem; }
.hf-tool-label { font-size: .8rem; color: var(--muted); font-weight: 550; }
.hf-chips { display: flex; gap: .25rem; }
.hf-chip {
  min-width: 2.1rem; padding: .3rem .5rem;
  border: 1px solid var(--muted); border-radius: 7px;
  background: var(--bg-default); color: var(--default);
  font-size: .95rem; line-height: 1.2;
}
.hf-chip.is-on {
  background: var(--hf-blow); border-color: var(--hf-blow);
  color: var(--hf-blow-ink); font-weight: 700;
}

.hf-preview { margin-top: .5rem; }
.hf-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; color: var(--muted); font-size: .85rem;
}

.hf-errors { margin-top: .5rem; }
.hf-errors li {
  padding: .3rem 0; font-size: .85rem; color: var(--danger);
  border-bottom: 1px solid var(--bg-muted);
}
.hf-errors code {
  background: var(--bg-default); padding: .05rem .3rem;
  border-radius: 4px; margin-right: .35rem;
}

/* ───────────── aviso ───────────── */

.hf-toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1.5rem);
  padding: .6rem 1rem; border-radius: 9px;
  background: var(--default); color: var(--bg-default);
  font-size: .9rem; font-weight: 550;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 60; max-width: min(90vw, 26rem); text-align: center;
}
.hf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hf-toast.is-good { background: var(--success); color: #fff; }
.hf-toast.is-bad { background: var(--danger); color: #fff; }

/* ───────────── móvil ───────────── */

@media (max-width: 620px) {
  .hf-app { padding: .75rem .5rem 3rem; }
  .hf-title { font-size: 1.45rem; }
  .hf-stage-wrap { height: min(56vh, 460px); }
  .hf-transport { gap: .45rem; }
  .hf-scrub { flex-basis: 100%; order: 5; }
  .hf-clock { order: 6; }
  /* Con las tres casillas en fila la barra se parte fea; van abajo, juntas. */
  .hf-check { flex: 1 1 auto; order: 7; }
  .hf-legend { grid-template-columns: 1fr 1fr; padding: .75rem; }
  .hf-legend-note { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-btn, .hf-toast { transition: none; }
}