:root{
  --accent:#2b6cb0;
  --bg:#fff;
  --muted:#666;
  --radius:8px;
}

.collapsible {
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  background:var(--bg);
  margin-bottom:12px;
  overflow:visible;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.collapsible__header {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
}
.collapsible__title{
  font-weight:600;
  font-size:0.95rem;
}
.collapsible__hint{
  margin-left:auto;
  font-size:.85rem;
  color:var(--muted);
}

/* arrow */
.collapsible__chev {
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  transition: transform 200ms ease;
  color:var(--accent);
}
/* we use an inline SVG (chevron) that rotates */
.collapsible[aria-expanded="true"] .collapsible__chev{
  transform: rotate(90deg);
}

/* content area */
.collapsible__content {
  padding:0 12px 7px 12px;
  max-height:0;
  overflow:hidden;
  transition: max-height 260ms ease, opacity 200ms ease;
  opacity:0;
}
.collapsible[aria-expanded="true"] .collapsible__content{
  opacity:1;
  /* max-height large enough to show the textarea */
  max-height: 300px;
}

textarea {
  width:100%;
  box-sizing:border-box;
  min-height:110px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.09);
  padding:10px;
  resize:vertical;
  font-family:inherit;
  font-size:0.95rem;
  background:#fff;
}

/* small accessible focus */
.collapsible__header:focus {
  outline: 3px solid rgba(66,153,225,0.25);
  outline-offset:2px;
}

/* optional small action row inside the content */
.collapsible__actions {
  display:flex;
  gap:.5rem;
  margin-top:8px;
}
.action_btn {
  background:var(--accent);
  color:white;
  border:0;
  padding:.45rem .65rem;
  border-radius:6px;
  font-size:.85rem;
  cursor:pointer;
}
.btn--ghost {
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(43,108,176,0.12);
}
.collapsible__header:focus {
  outline: none;
  box-shadow: none;
}


input {
  line-height: 1;
}




.duplicate_modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.duplicate_modal.hidden { display: none; }
.duplicate_modal-content {
  background: white; padding: 20px; border-radius: 10px;
  min-width: 300px; text-align: center;
}
.duplicate_modal-content button {
  margin: 5px; padding: 8px 12px;
}





input:focus {
  outline: none;
}

.groupClickableRect {
  fill:transparent;
}
.groupClickableRect:hover, .selectedSyl {
  fill: rgba(187, 187, 187, 0.5); 
}
.selectedNote-space{
  fill:rgb(187, 187, 187); 
}

#stavesInfoSlotEditor {
  padding-top:10px;
  display:flex;
  font-weight: lighter;
}

#stavesInfoSlotHeader{
  margin-top: -3px;
  display:flex;
  font-weight: normal;
}

#stavesVisibility {
  border-radius: 5px;
  padding-left: 4px;
  padding-right: 4px;
  margin-left: 10px;
}
.visibility-0 {
  border: 1px, solid, #2C3E50;
  color: #2C3E50;

}
.visibility-1 {
  border: 1px, solid, #357ABD;
  color: #357ABD;
}
.visibility-2 {
  border: 1px, solid, #4CAF50;
  color: #4CAF50;
}

#reviewBtn {
  text-align: center;
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
  margin-top:5px;
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  background-color: white;
  
  border: 1px, solid, #357ABD;
  color: #357ABD;
  
  border: 1px solid #FF9800;   /* orangey-yellow border */
  color: #FF9800;
}

#reviewBtn:hover {
  background-color: #f7f7f7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#reviewBtn:hover {
  background-color: #FFF9E6;   /* pale yellow */
}