/* ===============================
   Nuotin raahaus -testi – kokeellinen prototyyppi, minimaalinen tyyli
   =============================== */

#nrt-app {
  font-family: "Marker Felt", sans-serif;
  text-align: center;
  max-width: 700px;
  margin: 20px auto;
  padding: 0 8px;
  box-sizing: border-box;
}

#nrt-instructions {
  font-size: 15px;
  color: #555;
  margin-bottom: 14px;
}

#nrt-app button {
  font-family: inherit;
  font-size: 17px;
  margin: 4px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #e0e0e0;
  color: #000;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s, color 0.2s;
}

#nrt-app button:hover {
  background: #d0d0d0;
}

/* ---------------------------------
   VIIVASTO
--------------------------------- */
#nrt-paper {
  margin: 16px auto;
  min-height: 220px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

#nrt-paper svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Valittu (jo kirjoitettu) nuotti — voi raahata suoraan uuteen korkeuteen */
#nrt-paper .abcjs-note.editing path {
  fill: #2196F3 !important;
  stroke: #2196F3 !important;
}

/* ---------------------------------
   ETUMERKKINAPIT
--------------------------------- */
#nrt-accidental-buttons {
  margin: 10px 0;
}

#nrt-accidental-buttons button.active {
  background: #f44336;
  color: #fff;
  box-shadow: 0 0 6px #f44336;
}

/* ---------------------------------
   AIKA-ARVON RAAHAUSNAPIT
--------------------------------- */
#nrt-duration-buttons {
  margin: 14px 0;
}

.nrt-drag-source {
  min-width: 50px;
  background: #4f8cc4 !important;
  color: #fff !important;
  cursor: grab;
  touch-action: none; /* estää selainta kaappaamasta kosketusraahausta vieritykseksi */
  user-select: none;
}

.nrt-drag-source:active {
  cursor: grabbing;
}

/* ---------------------------------
   RAAHATTAVA "HAAMUNUOTTI"
--------------------------------- */

/* Itse nuotinpää — istuu suoraan viivaston päällä oikealla korkeudella.
   Leveys/korkeus asetetaan JS:stä (NOTEHEAD_W/H, skaalattu NOTATION_SCALEn
   mukaan), jotta koko ja updateGhostin sijoituslaskut eivät voi ajautua epäsynkkaan. */
#nrt-ghost-notehead {
  position: fixed;
  z-index: 9998;
  display: none;
  border-radius: 50%;
  background: #4f8cc4;
  transform: rotate(-20deg);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#nrt-ghost-notehead.snapped {
  background: #4CAF50;
}

/* Alalisäviiva keski-C:tä varten (koko JS:stä, ks. yllä) */
#nrt-ghost-ledger {
  position: fixed;
  z-index: 9998;
  display: none;
  background: #333;
  pointer-events: none;
}

/* Etumerkki (#, b, ♮) nuotinpään vasemmalla puolella, kuten oikeassa nuotinnuksessa
   (koko/fontti JS:stä, ks. yllä) */
#nrt-ghost-accidental {
  position: fixed;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #4f8cc4;
  pointer-events: none;
}

/* Luettava sävelnimilaatikko viivaston oikeassa reunassa, varmistuksena nuotinpäälle */
#nrt-ghost-label {
  position: fixed;
  z-index: 9999;
  width: 64px;
  height: 40px;
  border-radius: 10px;
  background: rgba(79, 140, 196, 0.9);
  border: 2px solid #4f8cc4;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#nrt-ghost-label.snapped {
  background: rgba(76, 175, 80, 0.92);
  border-color: #4CAF50;
  color: #2e7d32;
}

#nrt-ghost-label sup {
  font-size: 0.6em;
  font-weight: bold;
  top: -0.6em;
}

/* ---------------------------------
   TOIMINTANAPIT / STATUS
--------------------------------- */
#nrt-action-buttons {
  margin: 14px 0;
}

#nrt-status {
  font-size: 15px;
  color: #333;
  margin-top: 8px;
  min-height: 20px;
}

#nrt-debug {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  font-family: monospace;
  word-break: break-word;
}