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

/* ===== Theme ===== */
:root{
  --black:#000; --white:#fff;
  --bg:#1c1c1c;
  --orange:#d35400; --orange-d:#c25227; --orange-dim:#a84300;
  --purple:#96318d; --purple-d:#81227a; --purple-dim:#752070;
  --gray-1:#ddd; --gray-2:#808080; --gray-3:#53525d;

  /* Darker blue palette (better contrast on white text) */
--blue:#058890;
  --blue-d:#04767e;
  --blue-dim:#03656b;
}

/* ===== Global ===== */
*{ box-sizing:border-box; }
html, body { font-family:'Ubuntu',sans-serif; font-weight:400; }
*, *::before, *::after { font-family:inherit; }
input, button, select, textarea { font:inherit; }
input::placeholder, textarea::placeholder { font-family:inherit; }

body{ margin:0; background:var(--bg); color:var(--white); }
.container{ width:90%; max-width:1000px; margin:20px auto; text-align:center; }

/* prevent background scroll when picker open */
body.modal-open{ overflow:hidden; touch-action:none; }

/* ===== Selection policy ===== */
.picker__list, .picker__item{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* Never show a caret/selection for the top readOnly selector inputs */
.selector,
.selector:focus{
  -webkit-user-select:none; user-select:none; -moz-user-select:none;
  -webkit-touch-callout:none;
  caret-color:transparent;
}
.selector::selection{ background:transparent; }

/* blanket suppression inside the picker overlay subtree
   EXCEPT the search input and its subtree (fixes iOS/macOS Safari typing) */
.picker, .picker *{
  -webkit-user-select:none; user-select:none; -moz-user-select:none;
  -webkit-touch-callout:none;
  caret-color:transparent;
}
.picker .picker__search,
.picker .picker__search *{
  -webkit-user-select:text !important; user-select:text !important; -moz-user-select:text !important;
  -webkit-touch-callout:default !important;
  caret-color:auto !important;
}

/* allow normal text/caret in the search box when focused (kept for non-WebKit engines) */
.picker__search,
.picker__search:focus{
  -webkit-user-select:text; user-select:text; -moz-user-select:text;
  caret-color:auto;
}
/* selection highlight off for any stray selection in overlay */
.picker ::selection{ background:transparent; }

/* iOS interaction guards */
.bar{
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;
}
.tempo-slider{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.bar__fill{ pointer-events:none; }
#tempoLabel, .tempo-control label{ pointer-events:none; }

/* ===== Sheet music ===== */
.sheet-music{ margin:40px 0; }
.sheet-music img{ max-width:100%; height:auto; border:2px solid var(--black); }

/* ===== Inputs ===== */
.selector{
  width:10rem; max-width:100%;
  padding:5px 8px; font-size:.9rem;
  border:2px solid var(--black); border-radius:5px; text-align:left; color:var(--white);
  background:var(--orange);
}
.selector::placeholder{ color:var(--white); opacity:1; }

/* Disabled selectors — match disabled buttons (no iOS fade) */
.selector:disabled{
  background:var(--orange-dim) !important;
  color:#fff !important;
  border-color:var(--black) !important;
  cursor:not-allowed !important;
  opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
  filter:brightness(.85) saturate(.95) !important;
}

/* Variants */
.selector--orange{ background:var(--orange); }
.selector--orange:hover,.selector--orange:focus{ background:var(--orange-d); }
.selector--purple{ background:var(--purple); }
.selector--purple:hover,.selector--purple:focus{ background:var(--purple-d); }

/* Playlist Queue disabled stays purple */
#playlistQueueSearch.selector:disabled{
  background:var(--purple-dim) !important;
  filter:brightness(.9) saturate(.95) !important;
}

/* Tempo utility inputs */
.tempo-input{
  width:6.4rem; height:40px;
  padding:6px; font-size:1rem;
  border:2px solid var(--black); border-radius:5px;
  background:#fff; color:#000;
}
#repsPerTempo:disabled,
#minTempo:disabled,
#maxTempo:disabled,
#dialReps:disabled,
#dialStep:disabled{
  background:#d9d9d9;
  color:#444;
  border-color:var(--black);
  cursor:not-allowed;
  opacity:1;
  -webkit-text-fill-color:currentColor;
}

/* ===== Buttons ===== */
.btn{
  height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--black); color:var(--white); font-size:1.2rem;
  padding:6px 12px; border-radius:5px; cursor:pointer; margin:0;
  touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn--orange{ background:var(--orange); }
.btn--orange:hover{ background:var(--orange-d); }
.btn--purple{ background:var(--purple); }
.btn--purple:hover{ background:var(--purple-d); }
.btn:disabled{
  background:var(--orange-dim);
  cursor:not-allowed;
  opacity:1; filter:brightness(.85) saturate(.95);
}
.btn--purple:disabled{ background:var(--purple-dim); opacity:1; filter:brightness(.9) saturate(.95); }
.btn-square{ width:45px; }

/* Instant tactile feedback on press */
.random-container .btn:active{ background: var(--orange-d); }
#tempoStepContainer .btn:active{ background: var(--blue-d); }

/* ===== Random container (Orange) ===== */
.random-container{
  display:flex; align-items:center; border:2px solid var(--black); border-radius:5px; overflow:hidden;
  margin:0; background:var(--orange); padding:0;
  height:40px; box-sizing:border-box;        /* total = 40px including borders */
}
.random-container:hover{ background:var(--orange-d); }
.random-container .btn,
.random-container .auto-label{
  margin:0; height:100%; display:inline-flex; align-items:center; justify-content:center;
  border-radius:0;
}
.random-container .btn{ border:0; }

/* Playlist lock visuals (orange group) */
.random-container.disabled{
  background:var(--orange-dim);
  cursor:not-allowed;
  filter:brightness(.85) saturate(.95);
}
.random-container.disabled .btn,
.random-container.disabled .auto-label{
  background:var(--orange-dim);
  cursor:not-allowed;
  filter:none !important;
}
.random-container.disabled .btn:hover,
.random-container.disabled .auto-label:hover{
  background:var(--orange-dim);
}

.random-container .btn:first-child{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.random-container .auto-label:last-child{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}

.vertical-divider{ width:2px; background:var(--black); align-self:stretch; margin:0; height:100%; }

/* ===== Auto label (default/orange) ===== */
.auto-label{
  height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--white);
  font-size:1.2rem; padding:6px 12px; cursor:pointer; border-radius:5px; border:0; margin:0;
  gap:8px;
  white-space:nowrap;
}
.auto-label:hover{ background:var(--orange-d); }
.auto-label input[type="checkbox"]{ margin:0; accent-color:var(--purple); }
.auto-label.disabled{ background:var(--orange-dim); cursor:not-allowed; }







/* ===== Sliders (final even thickness both sides) ===== */

:root{ --thumb:24px; }

.tempo-slider,
.volume-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; max-width:100%;
  height:16px; border-radius:10px;
  background:var(--gray-1);
  box-shadow:inset 0 0 0 2px var(--black);
  cursor:pointer;
  margin:0 auto;
}

/* Tempo slider gets gradient fill */
.tempo-slider{
  --fill: var(--purple);
  --bg-pos: 0%;
  background:
    linear-gradient(to right, var(--fill) 0 var(--bg-pos), var(--gray-1) var(--bg-pos) 100%) no-repeat;
}

/* Fill variants */
.slider-fill{ --fill: var(--purple); }
.slider--orange{ --fill: var(--orange); }

/* Unified thumbs (same size + centered everywhere) */
.tempo-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:var(--thumb);
  height:var(--thumb);
  background:var(--white);
  border:2px solid var(--black);
  border-radius:50%;
  cursor:pointer;
  margin-top: calc((16px - var(--thumb)) / 2); /* centers thumb vertically on 16px track */
}

.tempo-slider::-moz-range-thumb,
.volume-slider::-moz-range-thumb{
  width:var(--thumb);
  height:var(--thumb);
  background:var(--white);
  border:2px solid var(--black);
  border-radius:50%;
  cursor:pointer;
}


/* Transparent tracks */
.tempo-slider::-webkit-slider-runnable-track,
.volume-slider::-webkit-slider-runnable-track{
  -webkit-appearance:none;
  background:transparent;
  border:none;
  height:16px;
}
.tempo-slider::-moz-range-track,
.volume-slider::-moz-range-track{
  background:transparent;
  border:none;
  height:16px;
}

/* Don’t use ::-moz-range-progress (causes fat left side) */

/* iOS quirk: thumb only interactive */
@media (hover:none) and (pointer:coarse){
  .tempo-slider, .volume-slider{ pointer-events:none; }
  .tempo-slider::-webkit-slider-thumb,
  .tempo-slider::-moz-range-thumb,
  .volume-slider::-webkit-slider-thumb,
  .volume-slider::-moz-range-thumb{ pointer-events:auto; }
}









/* Disabled range visuals (Safari) */
input[type="range"]:disabled{ opacity:1; }
input[type="range"]:disabled::-webkit-slider-runnable-track{ background:#c7b8c5; }
input[type="range"]:disabled::-webkit-slider-thumb{ background:#9b9b9b; }

/* Keep tempo slider visuals when non-interactive via aria-disabled (playlist mode on Apple) */
input[type="range"][aria-disabled="true"]{
  pointer-events:none;
  opacity:1 !important;
  filter:none !important;
}

/* ===== Layout (40px section spacing) ===== */
.control-container{
  display:flex; justify-content:center; align-items:center;
  gap:20px; margin:40px auto; flex-wrap:wrap; width:100%;
}
.exercise-group, .playlist-group{
  display:flex; align-items:center; justify-content:center;
  gap:20px;
}
#exerciseSearch.selector, #playlistQueueSearch.selector{ width:150px; }
.exercise-container, .category-container, .playlist-container, .playlist-queue-container{ position:relative; }

/* ===== Tempo column ===== */
.tempo-control{
  width:75%; max-width:600px; margin:40px auto;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.tempo-control label{ margin:0; color:var(--white); width:100%; text-align:center; }

/* ===== Progress bars ===== */
.progress-container, .playlist-progress-container{ width:75%; max-width:600px; margin:40px auto; }
.playlist-progress-container{ display:none; }
.bar{
  position:relative; height:40px; background:var(--white);
  border:2px solid var(--black); overflow:hidden; margin:0 auto;
}
.bar__fill{
  width:100%; height:100%; background:var(--orange);
  transform-origin:left center; transform:scaleX(0); will-change:transform;
}
.bar--playlist .bar__fill{ background:var(--purple); }

.time-overlay, .playlist-time-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:1rem; color:var(--black); pointer-events:none;
}

/* Playlist progress visuals */
.playlist-progress-bar{ position:relative; width:100%; height:40px; background:var(--white); border:2px solid var(--black); overflow:hidden; }
#playlistProgress{ width:0%; height:100%; background:var(--purple); transition:width .2s linear; }

/* ===== Playlist mode locks ===== */
body.playlist-mode #exerciseSearch.selector{ background:var(--purple); }
body.playlist-mode #exerciseSearch.selector:hover,
body.playlist-mode #exerciseSearch.selector:focus{ background:var(--purple-d); }
body.playlist-mode .btn-square{ background:var(--purple); border:2px solid var(--black); }
body.playlist-mode .btn-square:hover{ background:var(--purple-d); }

/* ===== Tempo Step container (mirror Random container, but BLUE) ===== */
#tempoStepContainer{
  display:flex; align-items:center; border:2px solid var(--black);
  border-radius:5px; overflow:hidden; margin:0; padding:0;
  background:var(--blue);
  height:40px; box-sizing:border-box;                 /* total = 40px including borders */
}
#tempoStepContainer .btn,
#tempoStepContainer .auto-label{
  margin:0; height:100%; display:inline-flex; align-items:center; justify-content:center;
  border-radius:0;
}
#tempoStepContainer .btn{
  background:var(--blue);
  border:0;
}
#tempoStepContainer .btn:hover{ background:var(--blue-d); }
#tempoStepContainer .btn:disabled{ background:var(--blue-dim); }
#tempoStepContainer .auto-label{
  background:var(--blue); color:#fff; gap:8px; white-space:nowrap;
}
#tempoStepContainer .auto-label:hover{ background:var(--blue-d); }
#tempoStepContainer .auto-label input[type="checkbox"]{ accent-color:var(--purple); }
#tempoStepContainer .btn:first-child{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
#tempoStepContainer .auto-label:last-child{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
#tempoStepContainer.disabled{
  background:var(--blue-dim);
  cursor:not-allowed;
  filter:brightness(.9) saturate(.95);
}
#tempoStepContainer.disabled .btn,
#tempoStepContainer.disabled .auto-label{
  background:var(--blue-dim);
  cursor:not-allowed;
  filter:none !important;
}
#tempoStepContainer.disabled .btn:hover,
#tempoStepContainer.disabled .auto-label:hover{
  background:var(--blue-dim);
}

/* Reps + ±BPM fields inline on desktop, sized like other tempo inputs */
.tempo-step-fields{
  display:flex;
  align-items:center;
  gap:20px;
}
.tempo-step-fields .tempo-input{
  width:6.4rem;
  height:40px;
  flex:0 0 auto;
  min-width:0;
}

/* ===== Scrollbar (optional) ===== */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#2c2c2c; }
::-webkit-scrollbar-thumb{ background:var(--purple); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:#e67e22; }

/* ===== Mobile (≤600px) ===== */
@media (max-width:600px){
  body{ font-size:.95rem; }

  /* --- TOP BARS (above sheet music) span full width --- */
  .control-container > .exercise-group,
  .control-container > .playlist-group{
    flex:1 1 100%;
    width:100%;
  }
  .exercise-group,
  .playlist-group{
    width:100%;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:20px;
    align-items:center;
  }
  .btn-square{ width:40px; height:40px; }

  .exercise-container,
  .playlist-queue-container,
  .category-container,
  .playlist-container{
    width:100%;
    min-width:0;
  }

  /* Force Category & Playlist selectors to FULL ROW + FULL WIDTH */
  .exercise-group #categorySearch.selector{
    grid-column:1 / -1;               /* span all 3 grid columns */
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch;
  }
  .playlist-group #playlistSearch.selector{
    grid-column:1 / -1;               /* span all 3 grid columns */
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch;
  }

  /* Full-width specific controls */
  #randomExerciseBtn,
  #stopPlaylistBtn{
    grid-column:1 / -1;
    width:100% !important;
    max-width:100%;
    justify-self:stretch;
  }

  /* generic selector widths on mobile */
  #exerciseSearch.selector,
  #playlistQueueSearch.selector,
  #categorySearch.selector,
  #playlistSearch.selector{
    width:100% !important; min-width:0;
  }

  .selector{ width:100%; height:40px; }
  .btn{ height:40px; }
  .tempo-input{ height:40px; }

  /* --- TRANSPORT BAR (play/random/tempo step) --- */
  .control-container:has(#playPauseBtn){
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    gap:20px;
  }

  /* Each major block takes its own row */
  .control-container:has(#playPauseBtn) #playPauseBtn,
  .control-container:has(#playPauseBtn) .random-container,
  .control-container:has(#playPauseBtn) #tempoStepContainer{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
  }

  /* Ensure TempoStepContainer and its fields fully span width */
  #tempoStepContainer{
    width:100% !important;
  }
  .tempo-step-fields{
    display:flex;
    gap:20px;
    width:100% !important;
  }
  .tempo-step-fields .tempo-input{
    width:auto;
    flex:1 1 0;        /* stretch to fill row evenly */
    min-width:0;
  }

  /* Randomize inputs share a row (3-up) */
  .control-container:has(#playPauseBtn) #repsPerTempo,
  .control-container:has(#playPauseBtn) #minTempo,
  .control-container:has(#playPauseBtn) #maxTempo{
    flex:1 1 calc(33.333% - 13.5px);
    min-width:0;
    width:auto;
    height:40px;
  }

  /* Make the AUTO pieces compact (snug) and right-side; main button grows */
  .random-container .auto-label,
  #tempoStepContainer .auto-label{
    flex:0 0 auto;
    padding:6px 12px;
    white-space:nowrap;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .random-container .btn,
  #tempoStepContainer .btn{
    flex:1 1 auto;
    min-width:0;
  }

  .tempo-control{ width:100%; max-width:600px; margin:40px auto; }
  .progress-container, .playlist-progress-container{ width:100%; margin:40px auto; }
}

/* ===== Accessibility & disabled parity (no iOS fade) ===== */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled{
  opacity:1;
  filter:brightness(.85) saturate(.95);
  cursor:not-allowed;
}
select:disabled:not(.selector),
input[type="text"]:disabled:not(.selector),
input[type="search"]:disabled:not(.selector),
input[type="number"]:disabled{
  opacity:1;
  background:#efefef;
  color:#555;
  border-color:var(--black);
  -webkit-text-fill-color:currentColor;
}

/* aria-disabled/.disabled parity */
[aria-disabled="true"],
.disabled{
  opacity:1 !important;
  filter:brightness(.9) saturate(.95);
  cursor:not-allowed;
}

/* Prevent .disabled parity from re-dimming children inside the locked random group */
.random-container.disabled .auto-label.disabled{ filter:none !important; }
.random-container.disabled .btn:disabled{ filter:none !important; }

/* --- Webflow typography guard (keep at end) --- */
.container .auto-label,
.container .auto-label *,
.container .tempo-control label,
.container .tempo-control label *,
.container #tempoLabel{
  font-weight:400 !important;
  font-style:normal !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-family:'Ubuntu',sans-serif !important;
}

/* ===== Picker Overlay (TOP-ANCHORED) ===== */
.picker{
  position:fixed; inset:0;
  display:flex; align-items:flex-start; justify-content:center;
  --picker-inline-pad: 4vw;
  padding: var(--picker-inline-pad);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  z-index:9999;
  animation: picker-fade-in .18s ease-out;
}
.picker[hidden]{ display:none !important; }

.picker__panel{
  width:min(520px, 100%);
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  animation: panel-pop .22s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior:contain;
}

.picker__header{
  display:grid;
  grid-template-columns:1fr 40px;
  grid-template-areas:
    "title close"
    "search search";
  align-items:center;
  gap:8px 10px;
  padding:8px;
  border:2px solid var(--black);
  border-radius:10px;
}
.picker--orange .picker__header{ background:var(--orange); }
.picker--purple .picker__header{ background:var(--purple); }

.picker__title{
  grid-area:title;
  margin:0;
  font-size:1.2rem;
  line-height:1.2;
  color:var(--white);
}
.picker__close{
  grid-area:close;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1;
  cursor:pointer;
  background:var(--white);
  color:var(--black);
  border:2px solid var(--black);
  border-radius:10px;
}
.picker__search{
  grid-area:search;
  width:100%; height:40px; font-size:1rem;
  padding:6px 10px;
  background:#fff; color:#000;
  border:2px solid var(--black);
  border-radius:10px;
}

/* List “card” */
.picker__list{
  list-style:none; margin:0; padding:6px;
  border:2px solid var(--black);
  border-radius:10px;
  overflow-y:auto;
  max-height:calc(82vh - 80px);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.picker--orange .picker__list{ background:var(--orange); }
.picker--purple .picker__list{ background:var(--purple); }

/* Hide the list entirely when there are no results */
.picker--no-results .picker__panel{ grid-template-rows:auto; }
.picker--no-results .picker__list{ display:none; }

.picker__item{
  padding:10px 12px;
  cursor:pointer;
  color:var(--white);
  border-radius:5px;
  transition:none;
  touch-action:manipulation;
}
.picker__item:hover{ background:var(--gray-3); }
.picker--orange .picker__item.is-active{ background:var(--white); color:var(--orange); }
.picker--purple .picker__item.is-active{ background:var(--white); color:var(--purple); }

/* Ensure active stays white even on touch "sticky hover" */
@media (hover:none) and (pointer:coarse){
  .picker__item:hover{ background:transparent; }
  .picker--orange .picker__item.is-active:hover{ background:#fff; color:var(--orange); }
  .picker--purple .picker__item.is-active:hover{ background:#fff; color:var(--purple); }
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .picker, .picker__panel{ animation:none !important; }
}

/* Animations */
@keyframes picker-fade-in{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes panel-pop{
  from{ opacity:0; transform:translateY(12px) scale(.98); }
  to{   opacity:1; transform:translateY(0)      scale(1);   }
}

@media (max-width:600px){
  .picker__panel{ width:100%; }
  .picker__close{ width:36px; height:36px; font-size:1.2rem; }
  .picker__search{ height:38px; }
}

/* Picker search placeholder color */
.picker__search::placeholder { color:#555; opacity:1; }
.picker__search::-webkit-input-placeholder { color:#555; }
.picker__search::-moz-placeholder { color:#555; opacity:1; }
.picker__search:-ms-input-placeholder { color:#555; }
.picker__search::-ms-input-placeholder { color:#555; }

@media (hover:none) and (pointer:coarse){
  .picker, .picker * , .selector, .btn {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .picker__item:focus { outline: none; }
}

/* Make playlist overlay text clickable (keeps same typography) */
.playlist-time-overlay{
  pointer-events:auto;   /* overrides shared rule that disables pointers */
  cursor:pointer;
  user-select:none;
}