/* RadioJuh visualizer — scoped so it does not alter the rest of REXOLUS. */
.radiojuh-section{
  padding:0;
  position:relative;
  background:var(--paper,#f1eee5);
  color:#090909;
  overflow:hidden;
}

.radiojuh-stage{
  position:relative;
  width:100%;
  min-height:calc(100vh - 54px);
  height:calc(100vh - 54px);
  overflow:hidden;
  background:var(--paper,#f1eee5);
  color:#090909;
  font-family:Arial,Helvetica,sans-serif;
  isolation:isolate;
}

.radiojuh-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:manipulation;
}

.radiojuh-ui{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-sizing:border-box;
  padding:max(14px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom)) 14px;
  mix-blend-mode:multiply;
}

.radiojuh-head{
  position:absolute;
  z-index:8;
  left:14px;
  top:max(14px,env(safe-area-inset-top));
  transform:translate(.5em,1em);
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  pointer-events:none;
  mix-blend-mode:multiply;
}

.radiojuh-brand{
  position:static;
  transform:none;
  flex:0 0 auto;
  font-weight:900;
  font-size:clamp(20px,5.4vw,46px);
  letter-spacing:-.055em;
  line-height:.88;
}

.radiojuh-meta{
  position:absolute;
  left:14px;
  bottom:max(12px,env(safe-area-inset-bottom));
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:clamp(9px,2.1vw,12px);
  letter-spacing:.05em;
  line-height:1.4;
  opacity:.68;
}

.radiojuh-panel-viewport{
  position:absolute;
  right:10px;
  top:13vh;
  bottom:9vh;
  width:min(30vw,184px);
  overflow:hidden;
}

.radiojuh-panel-track{
  position:absolute;
  left:0;
  right:0;
  top:0;
  will-change:transform;
}

.radiojuh-box{
  height:34px;
  border:2px solid #090909;
  box-sizing:border-box;
  margin:0 0 7px 0;
  padding:0 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.15);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:clamp(8px,2vw,11px);
  letter-spacing:.04em;
  transition:border-width .08s linear;
}

.radiojuh-label{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:72%;
}

.radiojuh-value{opacity:.78}

@media(max-width:850px){
  .radiojuh-stage{
    min-height:calc(100vh - 48px);
    height:calc(100vh - 48px);
  }
}


/* Local listener control. It never controls the RadioJuh server itself. */
.radiojuh-listen{
  position:static;
  z-index:8;
  flex:0 0 auto;
  min-width:112px;
  height:46px;
  padding:0 16px;
  border:3px solid #090909;
  border-radius:0;
  background:rgba(241,238,229,.94);
  color:#090909;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
  mix-blend-mode:multiply;
}
.radiojuh-listen:hover{background:#090909;color:#f1eee5;}
.radiojuh-listen.is-loading{cursor:wait;}
.radiojuh-listen:focus-visible{outline:2px solid #090909;outline-offset:3px;}
.radiojuh-audio{display:none;}

@media(max-width:520px){
  .radiojuh-head{
    gap:12px;
  }
  .radiojuh-listen{
    min-width:88px;
    height:38px;
    padding:0 11px;
    border-width:2px;
    font-size:11px;
  }
}


/* SERVER STACK FIX 2026-09-15 */
.radiojuh-canvas{z-index:1;}
.radiojuh-ui{z-index:10;mix-blend-mode:normal;}
.radiojuh-head{z-index:20;mix-blend-mode:normal;}
.radiojuh-brand,.radiojuh-meta{mix-blend-mode:multiply;}
.radiojuh-listen{mix-blend-mode:normal;outline:2px solid #fff;outline-offset:0;-webkit-text-stroke:1px #fff;paint-order:stroke fill;}