/* ============================================================
   KINOJO Animations
   ------------------------------------------------------------
   - Shared movement and transition rules
   - Menu/card/button animation refinements only
   - No data or layout logic here
============================================================ */

/* iPhone-like sub toggle: render delay in JS lets this animation be visible */
.sub-toggle.compact,#subToggle.sub-toggle{
  width:116px!important;
  height:34px!important;
  background:#fff!important;
  border-radius:999px!important;
  position:relative;
}
.toggle-knob{
  transition:left .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease!important;
}
.sub-toggle.compact.on .toggle-knob,#subToggle.sub-toggle.on .toggle-knob{
  left:84px!important;
}
.toggle-text{
  transition:padding .25s ease,color .25s ease!important;
  white-space:nowrap;
}

@media(max-width:900px){
  .relation-viewport{grid-template-columns:1fr!important;min-height:0!important;max-height:none!important;}
  .relation-combined-head{grid-template-columns:1fr!important;}
  .relation-combined-head .section-head + .section-head{border-left:0!important;border-top:1px solid rgba(117,140,177,.16)!important;}
  .relation-column + .relation-column{border-left:0;border-top:1px solid rgba(117,140,177,.16);}
  .relation-track{max-height:180px;}
}
@media(max-width:760px){
  .mini-row{grid-template-columns:50px minmax(0,1fr) 66px 92px!important;}
}
@media(max-width:520px){
  .mini-row{grid-template-columns:46px minmax(0,1fr) 62px 82px!important;}
  .rank-table{min-width:980px!important;}
}