/* The bar at the top of the panel that switches between the shader lab and
   glitchcut, with the language button at its end. One file, linked by both
   pages, because glitchcut draws its own copy of the panel inside a frame and
   the switch only reads as one control if both copies are the same pixels. */
.modebar{
  display:flex; align-items:center; gap:4px;
  height:40px; margin:-4px 0 8px;
  border-bottom:1px solid var(--line);
}
.modebar .modes{display:flex; align-items:stretch; align-self:stretch; gap:20px; flex:1; min-width:0}
.modebar .mode{
  position:relative; display:flex; align-items:center;
  height:100%; padding:0 1px; border:0; border-radius:0; background:none;
  font:500 13px/1 var(--mono); letter-spacing:0; color:var(--dim); cursor:pointer;
}
.modebar .mode:hover{background:none; color:var(--ink)}
.modebar .mode.on{color:#fff; font-weight:600; cursor:default}
/* the underline sits on the bar's hairline, so the tab reads as attached to it */
.modebar .mode.on::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#fff;
}
#langBtn{
  flex:none; width:auto; min-width:36px; height:28px; padding:0 6px; white-space:nowrap;
  border-radius:0; border-color:transparent;
  background:none; color:var(--dim);
  font-size:13px; letter-spacing:0;
}
#langBtn:hover{color:var(--ink); background:rgba(255,255,255,.07)}
#langBtn.on{color:var(--ink)}