/* ========================================
   RHYTHM MASTERY APP STYLES
   UI aligned with TuneMap / GTS app
   ======================================== */

:root{
  --appbar-h:70px;
  --brand-blue:#307b94;
  --brand-blue-hover:#25657a;
  --brand-blue-active:#1e5263;
  --brand-green:#38a169;
  --brand-red:#e53e3e;
  --text:#1a2e38;
  --muted:#5a7a88;
  --border:#d1dde4;
  --card:#ffffff;
  --rail-bg:#e5e7eb;
  --radius-card:14px;
  --radius-btn:10px;
  --control-h:44px;
  --shadow-soft:0 4px 12px rgba(26,46,56,.08);
  --shadow-action:0 7px 18px rgba(26,46,56,.12);
}


/* ========================================
   GLOBAL / APP SHELL
   ======================================== */

*,*::before,*::after{
  box-sizing:border-box;
}

html,body{
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  font-family:'Inter',sans-serif!important;
}

body #page,
body #content,
body main,
body .site-main{
  margin:0!important;
  padding:0!important;
  height:100%!important;
}

#gts-app-shell{
  position:relative;
  width:100%;
  max-width:400px;
  height:100dvh;
  margin:0 auto;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% -10%,rgba(48,123,148,.055),transparent 34%),
    linear-gradient(160deg,#fbfcfd 0%,#f5f7f8 54%,#eceff1 100%);
}

@media (pointer:coarse){
  #gts-app-shell{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
  }
}

@media (min-width:769px){
  body{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    min-height:100vh!important;
  }
}

#gts-main{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
  -webkit-overflow-scrolling:touch;
}

#freq-calc-container{
  position:relative;
  flex:1 1 0;
  width:100%;
  height:100%;
  min-height:0;
  padding:18px 20px 20px 20px;
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  background:transparent!important;
  color:var(--text);
  text-align:left;
}

#gts-appbar{
  background:linear-gradient(270deg,#373E64 0%,#307B94 70%);
  color:#fff;
}

#gts-appbar-wrap{
  flex:0 0 var(--appbar-h);
  height:var(--appbar-h);
  width:100%;
  position:relative;
  z-index:50;
}


/* ========================================
   RHYTHM MASTERY LAYOUT
   Three clear functional groups
   ======================================== */

#rhythm-mastery{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  color:var(--text);
  font-family:'Inter',sans-serif;
}

#rhythm-mastery button,
#rhythm-mastery input{
  font-family:'Inter',sans-serif;
}

.rm-group{
  width:100%;
  min-width:0;
}

/*
   Keep the three functional groups, but do NOT wrap them in cards.
   Spacing creates the visual hierarchy instead of boxes inside boxes.
*/
.rm-nav-group,
.rm-settings-group,
.rm-action-group{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.rm-nav-group{
  gap:14px;
  padding:0 2px;
  margin-bottom:28px;
}

.rm-settings-group{
  gap:10px;
  padding:0;
  margin-bottom:30px;
}

.rm-action-group{
  gap:12px;
  padding:0;
}


/* ========================================
   CHAPTER / EXERCISE SELECTORS
   TuneMap-style: plain centered value + arrows
   ======================================== */

.rm-selector{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
}

.rm-selector-display{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rm-arrow{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:none!important;
  border-radius:9px;
  background:linear-gradient(180deg,#358aa2 0%,#307b94 100%)!important;
  color:#fff!important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,transform .08s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-soft);
}

.rm-arrow:hover{
  background:linear-gradient(180deg,#307f96 0%,#286b80 100%)!important;
  box-shadow:0 5px 14px rgba(26,46,56,.11);
}

.rm-arrow:active{
  background:var(--brand-blue-active)!important;
  transform:translateY(1px) scale(.985);
}

.rm-arrow svg{
  width:22px!important;
  height:22px!important;
  display:block;
}

.rm-arrow svg,
.rm-arrow svg *{
  fill:currentColor!important;
  stroke:currentColor!important;
}


/* ========================================
   BPM / SOUND / METRONOME
   Cycle buttons with subtle next-chevron cue
   ======================================== */

.rm-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:100%;
}

.rm-cycle,
.rm-loop,
.rm-play{
  -webkit-appearance:none;
  appearance:none;
  border:none!important;
  border-radius:var(--radius-btn);
  cursor:pointer;
  touch-action:manipulation;
  box-sizing:border-box;
  font-weight:600;
  transition:background .15s,filter .15s,transform .08s,box-shadow .15s;
}

.rm-cycle{
  position:relative;
  min-width:0;
  height:46px;
  padding:0 24px 0 10px;
  background:linear-gradient(180deg,#358aa2 0%,#307b94 100%)!important;
  color:#fff!important;
  box-shadow:var(--shadow-soft);
  font-size:13px;
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Makes it obvious that the button cycles to the next value. */
.rm-cycle::after{
  content:"›";
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-52%);
  font-size:20px;
  font-weight:700;
  line-height:1;
  opacity:.82;
  pointer-events:none;
}

.rm-cycle:hover{
  background:linear-gradient(180deg,#307f96 0%,#286b80 100%)!important;
  box-shadow:0 5px 14px rgba(26,46,56,.10);
}

.rm-cycle:active{
  background:var(--brand-blue-active)!important;
  transform:translateY(1px);
}


/* ========================================
   LOOP
   ======================================== */

.rm-loop{
  width:100%;
  height:46px;
  padding:0 12px;
  background:linear-gradient(180deg,#358aa2 0%,#307b94 100%)!important;
  color:#fff!important;
  box-shadow:var(--shadow-soft);
  font-size:13px;
  letter-spacing:-.005em;
}

.rm-loop:hover{
  background:linear-gradient(180deg,#307f96 0%,#286b80 100%)!important;
  box-shadow:0 5px 14px rgba(26,46,56,.10);
}

.rm-loop.active{
  background:linear-gradient(180deg,#3cad73 0%,#38a169 100%)!important;
}

.rm-loop:active{
  transform:translateY(1px);
}


/* ========================================
   MIX SLIDER
   Part of the settings group, not a separate card
   ======================================== */

.rm-mix{
  width:100%;
  padding:6px 2px 0;
}

.rm-mix-labels{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:1px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.rm-mix-labels span:nth-child(2){
  color:var(--text);
  font-weight:700;
}

.rm-mix-labels span:last-child{
  text-align:right;
}

#rm-mix{
  display:block;
  width:100%;
  height:30px;
  margin:0;
  accent-color:var(--brand-blue);
  cursor:pointer;
  filter:drop-shadow(0 1px 1px rgba(26,46,56,.05));
}


/* ========================================
   PLAY / STOP
   ======================================== */

.rm-play{
  width:100%;
  height:56px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(180deg,#3eae75 0%,#38a169 100%)!important;
  color:#fff!important;
  box-shadow:var(--shadow-action);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
}

.rm-play:hover{
  filter:brightness(.98);
  box-shadow:0 9px 22px rgba(26,46,56,.14);
}

.rm-play:active{
  transform:translateY(1px) scale(.997);
}

.playing .rm-play{
  background:linear-gradient(180deg,#ea5050 0%,#e53e3e 100%)!important;
}

.loading .rm-play{
  opacity:.55;
  cursor:wait;
}

#rm-play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
}


/* ========================================
   BOOK CONTEXT
   ======================================== */

.rm-book-note{
  width:min(100%,330px);
  padding:0 8px;
  margin:4px auto 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  letter-spacing:-.005em;
}

.rm-book-note strong{
  color:var(--text);
  font-weight:700;
}

.rm-book-note a{
  display:inline-block;
  margin-top:2px;
  color:var(--brand-blue);
  font-weight:700;
  text-decoration:none;
  text-underline-offset:3px;
}

.rm-book-note a:hover{
  text-decoration:underline;
}


/* ========================================
   FOCUS
   ======================================== */

#rhythm-mastery button:focus-visible,
#rhythm-mastery input:focus-visible,
.rm-book-note a:focus-visible{
  outline:2px solid var(--brand-blue);
  outline-offset:2px;
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width:340px){
  #freq-calc-container{
    padding-left:12px;
    padding-right:12px;
  }

  .rm-nav-group{
    margin-bottom:22px;
  }

  .rm-settings-group{
    margin-bottom:22px;
  }

  .rm-selector{
    gap:8px;
  }

  .rm-controls{
    gap:6px;
  }

  .rm-cycle{
    padding-left:5px;
    padding-right:20px;
    font-size:12px;
  }

  .rm-cycle::after{
    right:6px;
  }
}