/* =============================================================
   Lyric Sheet Chords — Drawing Layer Styles
   ============================================================= */

/* Canvas overlay — sits on top of lyric content */
.lsc-drawing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Drawing toolbar */
.lsc-drawing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 13px;
  position: sticky;
  z-index: 100;
}

/* Base button style */
.lsc-btn {
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s;
  /* Large tap targets for tablet use */
  min-height: 36px;
  min-width: 44px;
}

.lsc-btn:hover {
  background: #e8e8e8;
}

.lsc-btn:active {
  background: #d5d5d5;
}

/* Active/selected state */
.lsc-btn.lsc-active {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

.lsc-btn.lsc-active:hover {
  background: #1558b0;
}

/* Toggle button — slightly wider */
.lsc-btn-toggle {
  font-weight: 500;
}

/* Clear button — destructive, subtle red hint */
.lsc-btn-clear {
  color: #c0392b;
  border-color: #c0392b;
}

.lsc-btn-clear:hover {
  background: #fdecea;
}

/* Color picker */
.lsc-color-picker {
  width: 32px;
  height: 28px;
  padding: 1px;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* Size slider */
.lsc-size-slider {
  width: 80px;
  vertical-align: middle;
  cursor: pointer;
}

/* Settings panel — hidden by default, shown on toggle */
.lsc-settings-panel {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 4px;
  border-top: 0.5px solid #ddd;
  margin-top: 2px;
}

/* Settings toggle button */
.lsc-btn-settings {
  margin-left: auto;
}
  margin-left: auto;
  font-size: 12px;
  color: #666;
  font-style: italic;
  min-width: 60px;
  text-align: right;
}

/* Tablet — make everything a bit bigger for finger/stylus */
@media (max-width: 1024px) and (pointer: coarse) {
  .lsc-drawing-toolbar {
    gap: 4px;
    padding: 4px 8px;
  }

  .lsc-btn {
    min-height: 32px;
    min-width: 40px;
    font-size: 12px;
    padding: 4px 8px;
  }

  .lsc-color-picker {
    width: 28px;
    height: 28px;
  }

  .lsc-size-slider {
    width: 60px;
  }

  /* Hide text labels on small screens, keep only icons/values */
  .lsc-drawing-toolbar label {
    font-size: 11px;
  }

  .lsc-save-status {
    font-size: 10px;
    min-width: 40px;
  }
}

/* Phone — ultra compact single row */
@media (max-width: 480px) {
  .lsc-drawing-toolbar {
    gap: 3px;
    padding: 3px 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .lsc-btn {
    min-height: 28px;
    min-width: 36px;
    font-size: 11px;
    padding: 3px 6px;
    white-space: nowrap;
  }

  .lsc-size-slider {
    width: 50px;
  }
}