@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

/* === Theme (matched) === */
:root{
  --black:#000; --white:#fff;
  --bg:#1c1c1c;
  --section-gap:20px;

  /* Oranges */
  --orange:#d35400;
  --orange-d:#c25227;
  --orange-dim:#a84300;

  /* Purple & Blues */
  --purple:#96318d; --purple-d:#81227a; --purple-dim:#752070;
  --blue:#058890;  --blue-d:#04767e;   --blue-dim:#03656b;

  --gray-1:#ddd; --gray-3:#53525d;
}

/* === Base === */
*{ box-sizing:border-box; }
html, body{
  font-family:'Ubuntu',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-size:18px;
  padding:0;
}

/* === Layout === */
.wrap{
  width:90%; /* Changed to 90% as requested */
  max-width:1400px;  /* Increased max-width slightly for a better visual on wide screens */
  margin:50px auto; /* Centers horizontally with 50px vertical margin */
}

/* NEW: Card Title Styling */
.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    /* Reduced margin below the title on desktop/mobile for compactness */
    margin: 0; 
    padding: 0;
    color: #fff;
    opacity: 0.95;
    /* Optional: Small text shadow for punch */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* NEW: Top Content Row for Side-by-Side */
.top-content-row {
  display: flex;
  flex-direction: column; /* Default stack on mobile */
  gap: var(--section-gap);
  margin-bottom: var(--section-gap);
}

@media (min-width: 1100px) {
  .top-content-row {
    display: grid;
    grid-template-columns: 65% 1fr; 
    gap: var(--section-gap);
    align-items: stretch; 
    margin-bottom: var(--section-gap); 
  }
  
  .top {
    width: 100%;
    margin: 0; 
    margin-bottom: 0;
    gap: 0;
    height: 100%;
  }
  
  .optionsCard {
    width: 100%;
    margin: 0; 
    height: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start;
    gap: 12px; 
  }
  
  .optionsCard .card-title {
      margin-bottom: 0; 
  }
  
  .rhythm-tile-wrapper {
      display: flex;
      flex-direction: row; 
      flex-wrap: wrap; 
      gap: 12px;
      width: 100%;
      margin-top: 8px; 
      justify-content: space-between; 
      align-items: flex-start;
  }

  .optionsCard .rhythmTile {
      /* FIXED: Restored to 2-column width (50% minus gap).
         This makes them large again to fill the desktop card. */
      width: calc(50% - 6px); 
      height: 70px;
  }
  .optionsCard .rhythmTile .rhythmIcon {
      transform: scale(0.9);
      transform-origin: center;
  }
  .optionsCard .rhythmTile .rhythmCanvas {
      width: 100px; 
      height: 70px;
  }

  .top .controls {
      gap: 10px; 
      margin-top: 8px; 
  }
  .top .control-row-top {
      margin-bottom: 8px; 
  }
  .top .unified-toolbar {
      margin-bottom: 8px; 
  }
  .top .btnRow {
      margin-top: 0; 
  }
}

.top{
  width:100%;
  position:relative;
  margin:0 auto;
  margin-bottom: var(--section-gap);
  background:var(--blue);
  border:2px solid var(--black);
  border-radius:12px;
  padding:12px;
  /* CHANGED: Switched to flex-start to align the new title left */
  display:flex;
  flex-direction:column;
  align-items: flex-start; 
  gap:20px; /* Kept 20px for mobile/default stacking */
}
/* Ensure the controls container doesn't have a gap on desktop */
@media (min-width: 1100px) {
  .top .controls {
    /* Need to undo the mobile/default gap: 20px for the controls container itself. 
       We target .controls directly to set internal row spacing. */
    gap: 10px; 
    margin-top: 8px;
  }
}

.title{
  font-size:1.2rem;
  line-height:1.2;
  margin:0;
  text-align:center;
}
.sub{
  font-size:1rem;
  opacity:.95;
  text-align:center;
  margin-top:6px;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:center;
  width: 100%; /* Ensure controls fill the header width below the title */
}

/* Field blocks (Renamed to avoid Webflow collisions) */
.rdm-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  /* SAFETY: Force remove any unwanted borders/bg inherited from Webflow defaults */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rdm-field > span{
  color:#fff;
  font-size:1.1rem;
}

.fieldHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

.fieldLabel{
  color:#fff;
  font-size:1.05rem;
}

.fieldValue{
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  white-space:nowrap;
}


/* Inputs */
.rdm-field input[type="number"]{
  width:100%;
  height:44px;
  padding:8px;
  font-size:1.1rem;
  border:2px solid var(--black);
  border-radius:6px;
  background:#fff;
  color:#000;
  text-align:center;
  outline:none;
}

.pill{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--black);
  border-radius:6px;
  background:#fff;
  color:#000;
  padding:6px 12px;
  font-size:1.05rem;
  user-select:none;
  white-space:nowrap;
}

/* Checkbox line */
.check{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:2px solid var(--black);
  border-radius:12px;
  background:var(--blue);
}

.check--compact{
  width:auto;
  padding:10px 14px;
  border-radius:999px;
}

/* Triplets chip — default (not selected) */
.check--compact{
  border-color:#fff;   /* override black border */
  color:#fff;
}

.check--compact span{
  color:inherit;
}

.check--compact input{
  accent-color:#fff;   /* checkbox is white when off */
}

/* Triplets chip — selected */
.check--compact:has(input:checked){
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: 0 0 0 2px rgba(150,49,141,.35);
}

.check--compact:has(input:checked) input{
  accent-color: var(--purple);
}


.check span{ font-size:1.05rem; }

/* === Buttons (matched 44px) === */
.btnRow{
  display:flex;
  gap:20px;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--black);
  color:#fff;
  font-size:1.05rem;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  background:var(--orange); /* default matches your ref buttons */
}
.btn:hover{ background:var(--orange-d); }
.btn:disabled{ background:var(--orange-dim); cursor:not-allowed; }

.btn.primary{ background:var(--purple); }
.btn.primary:hover{ background:var(--purple-d); }

/* Make "Stop" distinct but still on-theme */
.btn.danger{ background:var(--blue-dim); }
.btn.danger:hover{ background:var(--blue-d); }


.statusChip{
  /* Fix: Use static position + flex alignment so it stacks */
  position: static;
  align-self: flex-end;
  /* Removed margin-bottom: 10px; - it is now controlled by .score-header-row */
  
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--black);
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  color:#000;
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
}


.statusChip .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid var(--black);
  background:var(--blue);
}

/* states */
.statusChip--ok .dot{ background:var(--blue); }
.statusChip--play .dot{ background:var(--orange); }
.statusChip--warn .dot{ background:var(--orange); }

/* keep it from overlaying on small screens */
@media (max-width:700px){
  .statusChip{
    position:static;
    align-self:center;
  }
}


/* === Slider (exact thumb + track style you like) === */
/* CHANGED HEIGHT TO 12PX HERE */
.rdm-field input[type="range"]{
  --thumb:24px;
  --fill: var(--purple); /* default fill */
  width:100%;
  height:12px; /* Changed from 16px to 12px */
  border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--black);
  background:linear-gradient(to right,var(--fill) 0 0) no-repeat var(--bg-pos,0/0%), #fff;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
}
.rdm-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:var(--thumb);
  height:var(--thumb);
  background:#fff;
  border-radius:50%;
  border:2px solid var(--black);
  cursor:pointer;
}

.rdm-field input[type="range"].slider-fill{ --fill: var(--purple); }
.rdm-field input[type="range"].slider--orange{ --fill: var(--orange); }


.rdm-field input[type="range"]::-moz-range-thumb{
  width:var(--thumb);
  height:var(--thumb);
  background:#fff;
  border-radius:50%;
  border:2px solid var(--black);
  cursor:pointer;
}

/* iOS: only thumb interactive */
.is-ios .rdm-field input[type="range"] { touch-action: manipulation; }
.is-ios .rdm-field input[type="range"]::-webkit-slider-runnable-track { pointer-events:none; }
.is-ios .rdm-field input[type="range"]::-webkit-slider-thumb { pointer-events:auto; }

/* === Main area === */
.main{ margin-top: var(--section-gap); }

.status{
  color:#fff;
  opacity:.95;
  font-size:1rem;
  margin:0 0 var(--section-gap) 2px;
  text-align:left;
}

.error{
  border:2px solid var(--black);
  background:rgba(254,100,41,.20);
  border-radius:12px;
  padding:12px;
  white-space:pre-wrap;
  margin-bottom:12px;
}

.scoreWrap{
  margin:0 auto;
  margin-bottom: var(--section-gap);
  border:2px solid var(--black);
  border-radius:12px;
  background:var(--blue);
  padding:12px;
  
  /* Fix: Flex column to stack Header Row -> Score -> Bar */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align contents to the left */
  width: 100%;
}

/* NEW: Wrapper for the Sheet Music Title and Status Chip */
.score-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px; 
    /* NEW: Allow wrapping so status chip doesn't overflow on small screens */
    flex-wrap: wrap; 
    gap: 10px;
}

/* Override the scoreWrap .card-title alignment so it aligns properly in the new flex row */
.scoreWrap .card-title {
    margin: 0;
}
/* Ensure the status chip doesn't have an odd margin/alignment issue */
.scoreWrap .statusChip {
    margin: 0;
    align-self: center;
}

.scoreStack{
  position:relative;
  display:flex; /* Use flexbox to enable centering */
  justify-content:center; /* CRITICAL: Center the score horizontally */
  width:100%; /* Ensure it spans the full width of .scoreWrap */
}

.score, .playhead {
  display: block;
  vertical-align: top; /* Ensures no baseline space below/above */
}


.optionsCard{
  margin:0 auto;
  border:2px solid var(--black);
  border-radius:12px;
  background:var(--blue);
  padding:12px;
  /* CRITICAL: Changed to flex-start/flex-start for vertical stacking on mobile */
  display:flex; 
  justify-content:flex-start;
  align-items: flex-start;
  gap:14px; /* Mobile/Default gap */
  flex-wrap:wrap;
  width: 100%; /* Ensure full width on mobile/mid-size screens */
}

/* Rhythm tile (Triplets) */
.rhythmTile{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Reset width/height for mobile wrapping */
  width:170px;
  height:80px; 
  border:2px solid var(--black);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.rhythmTile input{
  position:absolute;
  top:8px;
  left:8px;
  width:18px;
  height:18px;
  opacity:0;          /* keep it real, but hidden */
  margin:0;
}

/* visual checkbox */
.rhythmTick{
  position:absolute;
  top:8px;
  left:8px;
  width:18px;
  height:18px;
  border:2px solid var(--black);
  border-radius:4px;
  background:#fff;
}

.rhythmIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000; /* icon color */
}

.rhythmCanvas{
  display:block;
  /* Default Mobile Sizes */
  width:120px;   /* visual size */
  height:auto;   /* keep aspect ratio */
}

/* Selected state */
.rhythmTile input:checked ~ .rhythmTick{
  border-color: var(--purple);
  background: var(--purple);
}

.rhythmTile input:checked ~ .rhythmTick::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}

/* keyboard focus */
.rhythmTile:focus-within{
  box-shadow:0 0 0 3px rgba(150,49,141,.35);
}

/* screen-reader only text */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


@media (min-width: 940px){
  .scoreWrap{ min-width:900px; }
}

.score{
  display:block;
  background:#fff;
  border:2px solid var(--black);
  border-radius:8px;
  /* IMPORTANT: do NOT force width:100% / height:auto.
     Your JS sets exact pixel sizes for perfect overlay alignment. */
}

.playhead{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* === New Sticking Select Style === */
.rdm-select {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  font-size: 1.05rem;
  font-family: inherit;
  border: 2px solid var(--black);
  border-radius: 6px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  outline: none;
  /* Appearance adjustments */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 10px auto;
}

.rdm-select:focus {
  border-color: var(--purple);
}

/* === Progress Bar & Time Overlay (Revised) === */
.bar {
  position: relative; /* Anchor for absolute time text */
  width: 100%; /* Take full width of the parent (scoreWrap) */
  max-width: 100%; 
  margin-top: 12px; /* Space between score and bar */
  margin-bottom: 0;
  border: 2px solid var(--black);
  background: var(--white);
  height: 40px; 
  overflow: hidden;
  border-radius: 8px;
}

.bar__fill {
  height: 100%;
  background: var(--orange);
  width: 0%;
  transition: width 0.1s linear;
  position: relative; /* Ensure stacking order works */
  z-index: 1; /* Behind text */
}

.time-display {
  position: absolute;
  inset: 0; /* Stretches to fill the .bar container */
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally */
  z-index: 2; /* Sits on top of the orange fill */
  pointer-events: none; /* Allows clicks to pass through to the bar for scrubbing */
  
  /* Text Styling */
  color: var(--black); 
  font-weight: 400; 
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* [START OF SNIPPET 2 REPLACEMENT - styles.css @media mobile] */
/* Responsive adjustments */
@media (max-width:700px){
  .wrap{ width:90%; margin:50px auto; }
  .rdm-field{ min-width:0; width:100%; }
  .btn{ width:100%; max-width:520px; }
  
  /* CRITICAL FIX: Allow horizontal scrolling for scaled music */
  .scoreWrap { overflow-x: auto; }
}
/* [END OF SNIPPET 2 REPLACEMENT - styles.css @media mobile] */










/* === Picker Modal (Copied Design) === */
/* === Picker Modal === */
.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6); /* Darker dim */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start; 
  justify-content: center;
  padding-top: 12vh; 
  opacity: 0; /* START: Hidden */
  pointer-events: none;
  /* Only transition opacity for the backdrop */
  transition: opacity 0.18s ease-out; 
}

.picker-overlay:not([hidden]) {
  opacity: 1; /* Fade in backdrop */
  pointer-events: auto;
}

.picker-overlay[hidden] {
  display: none;
}

/* Modal Box */
.picker__modal {
  width: 90%;
  max-width: 400px;
  /* Match the Orange/Brown from image */
  background: var(--orange); 
  border: 2px solid var(--black);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  max-height: 70vh; 
  overflow: hidden;
  /* Start transform is set in the keyframe's 0% step, remove default transition */
  transform: translateY(10px); 
  transition: none;
}

/* Apply the Animation to the Modal on Activation */
.picker-overlay:not([hidden]) .picker__modal {
  animation: picker-fade-in 0.18s ease-out forwards; 
}

/* Header */
.picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  /* Darker shade for header to separate it slightly */
  border-bottom: 2px solid var(--black);
}

.picker__title {
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}

/* Close Button (White Square Style from Image) */
.picker__close {
  background: #fff;
  color: #000;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid var(--black);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px; /* Optical centering for the times symbol */
  transition: transform 0.1s;
}

.picker__close:active {
  transform: scale(0.95);
}

/* List Items */
.picker__list {
  list-style: none;
  margin: 0;
  padding: 6px; /* NEW: 6px Padding all around the list container */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.picker__item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  transition: background 0.1s;
  border-radius: 5px; /* NEW: 5px Border Radius */
}

/* Hover State (Gray) */
.picker__item:hover {
  background: #53525d; /* Dark Grey */
  color: #fff;
}

/* Selected State (White) */
.picker__item.is-active {
  background: #ffffff; /* White Background */
  color: var(--orange); /* Orange Text */
}


/* === Final Clean Layout === */

.controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* --- Row 1: Sliders --- */
.control-row-top {
  display: flex;
  gap: 20px; /* Wide gap for alignment */
  align-items: flex-end;
  width: 100%;
}

/* Fields */
.rdm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Font Weight 400 Update (Thinner Text) */
.rdm-field > span, .fieldLabel, .fieldValue {
  font-size: 1rem;
  color: #fff;
  font-weight: 400 !important; 
}
.fieldValue { opacity: 0.9; }

.slider-field { flex: 1; }

.fieldHead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

/* White Inputs (Unified Style) */
input[type="number"], .white-select {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 2px solid var(--black); /* Border added */
  background: #fff;
  color: #000;
  font-size: 1rem;
  padding: 0 12px;
  outline: none;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.white-select { text-align: left; cursor: pointer; }

/* === SLIDERS === */
input[type=range] {
  -webkit-appearance: none; 
  width: 100%; 
  background: transparent; 
}

/* Track */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px; /* Already 12px here */
  cursor: pointer;
  background: #fff; /* White empty track */
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Thumb */
input[type=range]::-webkit-slider-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px; 
}

/* Purple Slider Fill (Tempo) */
/* UPDATED SELECTOR FOR SPECIFICITY */
.rdm-field input[type="range"].slider-purple {
  /* CHANGED TO #ffffff on right side */
  background: linear-gradient(to right, #800080 0%, #800080 var(--pct, 50%), #ffffff var(--pct, 50%), #ffffff 100%);
  border-radius: 6px;
  height: 16px;
}
.rdm-field input[type="range"].slider-purple::-webkit-slider-runnable-track { background: transparent; }

/* Orange Slider Fill (Rests) */
/* UPDATED SELECTOR FOR SPECIFICITY */
.rdm-field input[type="range"].slider-orange {
  /* CHANGED TO #ffffff on right side */
  background: linear-gradient(to right, #d35400 0%, #d35400 var(--pct, 50%), #ffffff var(--pct, 50%), #ffffff 100%);
  border-radius: 6px;
  height: 16px;
}

.rdm-field input[type="range"].slider-orange::-webkit-slider-runnable-track { background: transparent; }

/* --- Row 2: Measures, Sticking & Hand --- */
.control-row-mid {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
.measure-field { width: 100px; flex-shrink: 0; }
.sticking-field { flex: 1; }

.select-wrapper {
  position: relative;
  width: 100%;
}
.chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 0.8rem;
}

.hand-field {
  width: auto;
  align-items: center;
  padding-bottom: 2px; /* Align with inputs */
}

/* Hand Toggle */
.toggle-switch-purple {
  display: inline-flex;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  height: 44px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 2px solid var(--black); /* Border added */
}

.toggle-switch-purple input { display: none; }
.toggle-switch-purple span {
  padding: 0 16px;
  font-weight: 400; /* Thin font */
  color: #000;
  transition: all 0.2s;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Logic: Checked = Right (Purple) */
.toggle-switch-purple input:checked ~ .opt-R {
  background: #800080; color: #fff;
}
.toggle-switch-purple input:not(:checked) ~ .opt-L {
  background: #800080; color: #fff;
}

/* --- Row 3: Bottom Area --- */
.control-row-bot {
  display: flex;
  justify-content: center; /* Centers the groups */
  gap: 40px; /* Adds even spacing between the Toggles and Buttons */
  flex-wrap: wrap; /* Ensures they stack nicely on small screens */
  align-items: center;
  padding-top: 10px;
}

.toggles-area {
  display: flex;
  gap: 30px; /* Spacious Checkbox layout */
}

/* Checkboxes */
.check-purple {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  user-select: none;
  font-weight: 400;
  /* Removed line-height: 1 to let text sit naturally */
}

/* The Box itself */
.check-purple .checkmark {
  width: 24px;
  height: 24px;
  background-color: #fff; 
  border: 2px solid transparent; 
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  
  /* NEW: Visually nudge the box down 1px to match the text baseline */
  position: relative;
  top: 1px; 
}
.check-purple input { position: absolute; opacity: 0; }
.checkmark {
  position: relative;
  display: inline-block;
  height: 22px;
  width: 22px;
  background-color: transparent;
  border: 2px solid #fff; 
  border-radius: 4px;
}
/* Checked */
.check-purple input:checked ~ .checkmark {
  background-color: #800080; 
  border-color: #800080;
}
.check-purple input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Buttons */
.btnRow { display: flex; gap: 20px; }
.btn {
  height: 44px;
  padding: 0 12px;
  border: 2px solid var(--black); /* Border added */
  border-radius: 6px;
  color: #fff;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.1s, opacity 0.2s;
}

.btn:active { transform: translateY(2px); }

.btn-purple { background: #800080; } 
.btn-purple:hover { background: #600060; }

.btn-orange { background: #d2691e; } 
.btn-orange:hover { background: #b05010; }

/* BLUE STOP BUTTON */
.btn-blue { background: var(--blue-dim); } 
.btn-blue:hover { background: var(--blue-d); }
.btn-blue:disabled { 
  background: var(--blue-dim); /* Overrides the default orange disabled color */
  opacity: 0.5; 
  cursor: not-allowed; 
}

/* Responsive */
/* NEW CODE (Ensures Measures/Hand are side-by-side, Sticking is full-width, and Checkboxes are separated from buttons) */
@media (max-width: 700px) {
  /* 1. HEADER FIX: Stack Header Row */
  .score-header-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
  }
  
  /* 2. TILE FIX: Force Rhythm Tiles to full width on mobile */
  .rhythmTile {
      width: 100% !important;
      margin-right: 0;
  }
  
  /* 3. CHECKBOX CENTERING (Rhythm Tiles) */
  .rhythmTile input,
  .rhythmTick {
      top: 50% !important;
      transform: translateY(-50%) !important;
  }

  /* 4. BUTTON FIX: Flexible width */
  .btnRow {
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center;
    gap: 12px;
  }
  .btn {
    width: auto;
    flex: 1 0 120px; 
    padding: 0 20px;
  }

  /* --- TOOLBAR & INPUTS FIX --- */
  .wrap { width: 90%; margin: 50px auto; }
  .rdm-field { min-width: 0; width: 100%; }
  .scoreWrap { overflow-x: auto; }

  /* Stack main rows */
  .control-row-top, .control-row-mid, .control-row-bot {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* Center the labels/inputs inside their own fields */
  .rdm-field {
      align-items: center !important; /* Centers "Measures" label above box */
  }

  /* --- UNIFIED TOOLBAR: CENTERED LAYOUT --- */
  .unified-toolbar {
    flex-direction: row; 
    align-items: flex-start;  
    flex-wrap: wrap; 
    justify-content: center !important; /* Force items to center of screen */
    gap: 12px; 
  }
  
  /* Measures & Lead Hand: Natural width, centered side-by-side */
  .unified-toolbar > .rdm-field:nth-child(1) { /* Measures */
      width: auto !important; 
      order: 1;
  }
  .unified-toolbar > .rdm-field:nth-child(3) { /* Lead Hand */
      width: auto !important; 
      order: 2; 
  }
  
  .unified-toolbar:before { content: none; }
  
  /* Sticking Pattern: Full width, centered below */
  .unified-toolbar > .rdm-field:nth-child(2) { /* Sticking Pattern */
      width: 100% !important; 
      order: 3; 
      margin-top: 4px;
      align-items: center !important; /* Ensure label is centered */
  }

  /* 5. CHECKBOX STACK FIX (The Box that holds the checkboxes) */
  .checkbox-cluster {
    /* Break onto a new line by forcing basis to auto, but width fit-content */
    flex: 0 0 auto !important; 
    width: fit-content !important; 
    
    /* Center the box itself on the screen */
    margin: 15px auto 20px auto !important; 
    
    /* Stack items vertically */
    flex-direction: column !important; 
    
    /* Align checkboxes strictly to the LEFT edge of this centered box */
    align-items: flex-start !important; 
    
    gap: 12px; 
    order: 4; 
  }
}

/* === UNIFIED TOOLBAR LAYOUT (Desktop) === */
.unified-toolbar {
  display: flex;
  flex-direction: row;
  align-items: flex-end; 
  /* FIXED: Back to flex-start so desktop groups nicely on the left */
  justify-content: flex-start; 
  gap: 30px; 
  flex-wrap: wrap; 
}

/* NEW CODE (Fix: Remove fixed height, set height: auto for wrapping safety) */
/* NEW CODE (Restoring fixed height for desktop vertical centering) */
.checkbox-cluster {
  display: flex;
  gap: 20px;
  /* Ensure it has the same height scaffold as inputs */
  min-height: 44px; 
  height: auto; 
  /* Perfect vertical centering */
  align-items: center; 
  justify-content: center;
  /* Removed padding-bottom: 2px; */
  margin: 0;
}

/* --- Controls Spacing Overrides for Minimal Height --- */
.top .controls {
    /* Reverting to the original structure to allow the desktop query to control the height */
    gap: 20px; /* Kept 20px for mobile/default stacking */
}
.top .control-row-top {
    /* The space between Sliders and Unified Toolbar */
    margin-bottom: 0; 
}
.top .unified-toolbar {
    /* The space between Unified Toolbar and Buttons */
    margin-bottom: 0; 
}
.top .btnRow {
    margin-top: 0; 
}

/* ... rest of the CSS ... */

/* === CHECKBOX STYLING (Purple Box + Black Border) === */
.check-purple {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Slightly tighter gap between box and text */
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  user-select: none;
  /* Fix text alignment */
  line-height: 1;
  font-weight: 400;
}

/* The Box itself */
.check-purple .checkmark {
  width: 24px;
  height: 24px;
  background-color: #fff; /* Default Empty White */
  border: 2px solid transparent; 
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* When Checked: Purple Background + BLACK BORDER */
.check-purple input:checked ~ .checkmark {
  background-color: #800080; 
  border: 2px solid #000; /* <--- The Black Border you wanted */
  box-shadow: 0 0 0 1px #fff; /* Optional: adds a tiny white separation if needed, or remove */
}

/* The checkmark symbol */
.check-purple input:checked ~ .checkmark::after {
  content: "";
  display: block;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* === LEAD HAND TOGGLE STYLING === */
.toggle-switch-purple {
  display: inline-flex;
  width: fit-content; /* <--- Forces box to hug content */
  min-width: 0;       /* prevents it from defaulting to 100% */
  height: 44px;
  border: 2px solid #000;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.toggle-switch-purple span {
  width: 36px; /* Fixed width for L and R buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000;
  height: 100%;
}

/* Active State Logic */
.toggle-switch-purple input:not(:checked) ~ .opt-L {
  background: #800080;
  color: #fff;
}
.toggle-switch-purple input:checked ~ .opt-R {
  background: #800080;
  color: #fff;
}







/* === Picker Animation Keyframes === */
@keyframes picker-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}